【独学】プログラミング学習2か月目の記録【dotinstall】

プログラミング

現在,ドットインストールの無料動画を見ながら独学で学習しているぷうよか。(@pohyoka)です。

プログラミング学習2か月目の記録と感想を書いていきます!

  1. “この記事を書いた人”のスキルと装備
  2. 【32~33日目】PHPの学習
    1. cyberduckが固まって動かない
  3. 【34日目】Cloud9の学習【2回目】
    1. “python – V “ではなく “python –v “と入力した…
    2. “rails s“と入力したらエラーが出た
    3. environmentからClould9User直下 に行った…
    4. “a server is already running rails“が出た
    5. “Errno::EADDRINUSE“が出た
    6. “ActiveRecord::~”が出た…
    7. “Add `gem ‘sqlite3’`“が出た
  4. 【35~41日目】Rubyの学習
    1. 前の日はできた “vagrant up” ができない
    2. インストール時間を短縮する方法
    3. IPアドレスを調べる方法【再渇】
    4. railsサーバーを起動する方法
    5. サーバーを停止する方法
    6. ログを表示する方法
    7. Webアプリをつくる方法
    8. データを格納する方法
    9. 格納したデータベースに直接覗く方法
    10. 初期データの管理
    11. 現在のテーブルの削除
    12. コントローラーの作り方
    13. 記事の一覧を表示する方法
    14. ~/postsなしのURLでアクセスできるように
    15. 画面のカスタマイズする方法
    16. railsのリンクタグの書き方
    17. 記事の詳細を表示する
    18. 記事の詳細から元の画面に戻る方法
    19. 記事の追加
    20. 新規記事の保存
    21. 無効な記事をエラーにする
    22. 記事の編集ホームをつくる
    23. 共通部品をつくる
    24. 記事の消去の設定
    25. 記事にコメントをつけられるようにする
    26. ブログアプリを完成させる
  5. 【42~43日目】Node.jsの学習
    1. UNIXコマンドの復習
  6. 【44日目】Androidアプリ開発入門の学習
      1. 設定やソースコードから検索
      2. 使うファイルは主に3つ
      3. アプリの起動・実行
      4. “Hardcoded text”の直し方
      5. TextViewの値を変える
  7. 【45~46日目】WordPressの学習
      1. リセットCSS ”reset yui”
  8. 【47~52日目】Java Scriptの実践演習
    1. JavaScriptで作る誕生日診断
    2. JavaScriptで作る王様ゲーム
    3. JavaScriptで文字数チェッカーを作ろう
    4. JavaScriptで音声認識サービスを作ろう
  9. 【53~日目】JavaScript以外の実践編のレッスン
    1. パラックスサイトを作ろう
    2. HTML5で作るシンプルメモ帳
    3. PHPで作る簡単サイコロ
    4. PHPとjQueryで実装する「もっと読む」
    5. PHPで作るページング機能
    6. PHPで作る簡易掲示板

“この記事を書いた人”のスキルと装備

  • 英語力 : TOEIC 640点(2018.11),TOEFL itp 500点(2018.8)留学経験なし
  • 能力   :初見の英文を見ても拒絶反応を起こさない
  • 性格  :飽きっぽく適当だが,すぐに結果がほしいタイプ
  • 使用PC:大学生協で買ったぼったくりパソコン(すでに4年使用,Windows)

【32~33日目】PHPの学習

PHP無料学習終了時の記録

総完了数:374本/総学習時間:15:44:33/総学習日数:33日

〇感想

  • Javaと似た記号が出てくるので比較しながら学習を心がけた
  • Javaのときほど頭がテンパらずに落ち着いて学習ができた
  • できなくても先に進んじゃおう精神が強かった
総括:Javaより頭が混乱せずに学習できた
PHPを学習したノートの一部

cyberduckが固まって動かない

  1. cyberduckが固まって動かない
  2. 左下のWindowsボタンを右クリック
  3. タスクマネージャーでcyberduck消す
  4. もう一度立ち上げたら動いた

【34日目】Cloud9の学習【2回目】

Cloud9入門の学習【2回目】 終了時の記録

総完了数:374本/総学習時間:15:44:33/総学習日数:34日

〇感想

  • 1回目なににつまづいていたのか分からないくらいスムーズに進んだ
  • 基本的に簡単だった
  • 最後だけできなかったが次に進んだ
総括:数日間の学習の効果が出た!

“python – V “ではなく “python –v “と入力した…

“python –v” と入力したら”>>>“が出た:「Ctrl」+「Shift」+「Z」で元に戻る

“rails s“と入力したらエラーが出た

rails s“と入力したらGem::LoadErrorが出た: こちらで解決

rail s“と入力したらGem::GemNotFoundExceptionが出た:こちらで解決

gem install bundler
bundle install

environmentからClould9User直下 に行った…

cd“と入力したらClould9User直下に行ってしまったようだ。

environmentに戻る方法:” cd ~/environment

“a server is already running rails“が出た

a server is already running rails“が出たとき:こちらで解決:myappファイルを消した

サーバーが立ち上がらなかったのでmyappを消してもう一度つくった…。

“Errno::EADDRINUSE“が出た

Errno::EADDRINUSE“が出たとき:こちらこちらで解決

  • エラーコードの前のport番号を入力(8080)
 lsof -i :8080 
  • PIDはCOMMANDの次の4桁の数字だった
kill -9 6900 

“ActiveRecord::~”が出た…

“ActiveRecord::ConnectionNotEstablished”が出たとき:こちらで解決

rake db:migrate 
rake db:create:all

“Add `gem ‘sqlite3’`“が出た

Add `gem ‘sqlite3’`“が出たとき:こちらで解決(補足情報にも書いてあった)

 gem 'sqlite3', '~> 1.3.6 

ぼくは解決できなかった。次に進んじゃおう。

【35~41日目】Rubyの学習

Rubyの無料学習 終了時の記録

総完了数:428本/総学習時間:18:05:26/総学習日数:41日

〇感想

  • 日本人がつくった言語のようですごいなと思った!
  • Javaと似ているところもある
  • ファイルやフォルダーのいったり来たりが難しい
総括:ファイルの複数作成は慣れないとしんどい

前の日はできた “vagrant up” ができない

PowerShellでいつものように”vagrant up“したらできなかった。詳しくはこちら

vagrant reload“としたら,

The error output from the command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

と出たので,こちらで解決した。

vagrant plugin install vagrant-vbguest
vagrant vbguest
vagrant vbguest --status  //確認
vagrant reload //再度試した

ーーーーーーーーーーRuby on rails ーーーーーーーーーー

インストール時間を短縮する方法

gem install rails --no-document

“–no-document”と打つとインストール時間を短縮できる。

IPアドレスを調べる方法【再渇】

ip a

このコードを打つとIPアドレスが検索できる。

railsサーバーを起動する方法

rails server -b 192.168.33.10 -d

UNIXコマンドのまとめサイト見つけた。こちら

サーバーを停止する方法

①プロセス番号を調べる(どちらでも)

cat tmp/pids/server.pid
ps aux | grep puma

②サーバーを停止させる

kill -9 プロセス番号

②のコードは前にも出てきたな。

ログを表示する方法

tail log/development.log

ログとは前にアクセスした記録のこと。

Webアプリをつくる方法

rails g scaffold Memo title:string body:text
rails db:migrate

Webでタイトルとメモが書ける。

rails g model Post title:string body:text
rails db:migrate

データを格納する方法

rails c

c=console

ーーーーーーーーーー編集 ーーーーーーーーーー

p = Post.new(title: 'title 1', body: 'body 1')
p. save

上と下は同じ意味。

Post.create(title: 'title 2',body: 'body 2')

データの確認方法

Post.all

格納をやめる方法

quit

ーーーーーーーーーー編集 ーーーーーーーーーー

格納したデータベースに直接覗く方法

rails db
rails dbconsole

どちらでもいい。

ーーーーーーーーーー編集 ーーーーーーーーーー

select * from posts;

“.quit”で抜けられる。

ーーーーーーーーーー編集 ーーーーーーーーーー

初期データの管理

cyberduck→myblog→bd→seeds.rbでファイルに行ける。

seed.rb内でコードを編集後,コードの内容を流し込む。

rails db:seed

現在のテーブルの削除

rails db:migrate:reset

コントローラーの作り方

rails g controller Posts

ルーティングの仕方

  1. cyberduck→myblog→config→routes.rbに行く
  2. routes.rbに”resources :posts”と打って保存
  3.  

ルーティングの確認方法

rails routes

記事の一覧を表示する方法

  1. cyberduck→app→controllers→posts_controller.rbに行く
  2. 以下のように打つ
def index
@posts = Post.all.order(created_at: 'desc')
end

3.データを表示するためのviewをつくるために,cyberduck→app→views→postsの中にindex.html.erbをつくり以下のように打つ

<h2>My Posts</h2>
<ul>
<% @posts.each do |post| %>
<li><%= post.title %></li>
<% end %>
</ul>

~/postsなしのURLでアクセスできるように

routes.rbに以下のように書く。

root 'posts#index'

railsにはコードを書く量を減らすために細かい規約がある。

細かい規約=ファイル名の単数・複数形,ファイルをつくる場所など

画面のカスタマイズする方法

views→layouts→application.html.erbでhtmlを編集できる。

viewで書いたコードは<%= yield %>の中に読み込まれる。

assets→stylesheets→application.cssでcssを編集できる。

railsのリンクタグの書き方

index.html.erbに以下のように書く。

<%= link_to post.title, post.path(post) %>

post.pathはurlで(post)はidを表す。

記事の詳細を表示する

posts_controller.rbに以下のように書く。

def show
@post = Post.find(params[:id])
end

views→postsのフォルダーにshow.html.erbつくり以下のように書く。

<h2><%= @post.title %></h2>
<p><%= @post.body %></p>

記事の詳細から元の画面に戻る方法

asset→imageフォルダーに画像をいれる。

application.html.erbに以下のように書く。

<h1><%= link_to image_tag('logo.png', class: 'logo'), root_path %></h1>

application.cssで画像の大きさなどを調節する。

画像を押すと記事の一覧に戻る。

記事の追加

index.html.erbに以下のように書く。

<%= link_to 'Add New', new_post_path, class: 'header-menu' %>

application.cssで加工する。

posts_controller.rbで以下のように書く。

def new
end

def create
end

views→posts→new.html.erbをつくり以下のように書く。

<h2>Add New Post</h2>
<%= form_for :post, url: posts_path do |f| %>
<p>
<%= f.text_field :title, placeholder: 'enter title' %>
</p>
<p>
<%= f.text_area :body, placeholder: 'enter body text' %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>

application.cssで加工する。

新規記事の保存

posts_controller.rbに以下のように書く。

def create
@post = Post.new(post_params)
@post.save
redirect_to posts_path
end

private
def post_params
params.require(:post).permit(:title, :body)
end

無効な記事をエラーにする

記事を入力必須にする方法は,post.rbに以下のように書く。

validates :title, presence: true, length: { minimum: 3 message: 'Too short to post!'}
validates :body, presence: true

エラーの条件分岐をposts_controller.rbに書く。

if @post.save
redirect_to posts_path
else
render 'new'

エラーメッセージを表示させるには,new.html.erbに以下のように書く。

<% f.text_field :title, placeholder: 'enter title' %>
<% if @post.errors.messages[:title].any? %>
<span class="error"><%= @post.errors.messages[:title][0] %></span>
<% end %>

<% f.text_area :body, placeholder: 'enter body text' %>
<% if @post.errors.messages[:body].any? %>
<span class="error"><%= @post.errors.messages[:body][0] %></span>
<% end %>

posts_controller.rbにも以下のように書く。

def new
@post = Post.new
end

エラーメッセージをapplication.cssで加工。

記事の編集ホームをつくる

index.html.erbに以下のように書く。

<% link_to '[Edit]', edit_post_path(post), class: 'command' %>

コマンドをapplication.cssで加工。

posts_controller.rbに以下のように書く。

def edit
@post = Post.find(params[:id])
end

views→postsにedit.html.erbをつくり以下のように書く。

new.html.erbをコピペ。

<h2>Edit Post</h2>
<%= form_for @post, url: post_path(@post) do |f| %>
<p>
<%= f.text_field :title, placeholder: 'enter title' %>
<% if @post.errors.messages[:title].any? %>
<span class="error"><%= @post.errors.messages[:title][0] %></span>
<% end %>
</p>
<%= f.text_area :body, placeholder: 'enter body text' %>
<% if @post.errors.messages[:body].any? %>
<span class="error"><%= @post.errors.messages[:body][0] %></span>
<% end %>

<%= f.submit %>
<% end %>

posts_controller.rbに以下のように書く。

def update
@post = Post.find(params[:id])
if @post.update(post_params)
redirect_to posts_path
else
render 'edit'
end
end

文を改行するには,show.html.erbに以下のように書く。

<p><%= simple_format @post.body %></p>

“simple_format”

共通部品をつくる

postsに_form.html.erbをつくり以下のように書く。

edit.html.erbもしくは new.html.erb のコードをコピペ。

<%= form_for @post do |f| %>    

とする。

2つのファイルのコードは微妙に違うが,いい感じにしてくれる。

new.html.erb のコードをほぼすべて消す。

<h2>Add New Post</h2>
<%= render 'form' %>

edit.html.erb のコードもほぼすべて消す。

<h2>Edit Post</h2>
<%= render 'form' %>

コードがすっきりした!

記事の消去の設定

index.html.erbに以下のように書く。

<% link_to '[x]', post_path(post), method: delete, class: 'command' data: {confirm: 'Sure?' } %>

posts_controller.rbに以下のように書く。

def destroy
@post = Post.find(params[:id])
@post.destroy
redirect_to post_path
end

記事にコメントをつけられるようにする

PuTTYに以下のように書く。

rails g model Comment body:string post:references
rails db:migrate

app→modelsにcomment.rbファイルができる。以下のように追加で書く。

validates :body, presence: ture

post.rbに以下のように書く。

has_many :comments

routes.rbに以下のように書く。

resources :posts do
resources :comments

PuTTYで確認。

rails routes

PuTTYでコントローラーをつくる。

rails g controller Comments

show.html.erbに以下のように書く。

<h3>Comments</h3>

_form.html.erbをコピぺし,以下のように書く。

<%= form_for @post, ([@post.comments.build]) do |f| %>

条件分岐やplaceholder~を消し,以下のように書く。

<%= f.text_field :body %>

h3をapplication.cssで加工。

comments_controller.rbに以下のように書く。

def create
@post = Post.find(params[:post_id])
@post.comments.create(comment_params)
redirect_to post_path(@post)
end

private
def comment_params
params.require(:comment).permit(:body)
end

show.html.erbに以下のように書く。

<% if @post.comments.any? %>
<ul>
<% @post.comments.each do |comment| %>
<li>
<%= comment.body %>
</li>
</ul>
<% end %>

コメントの削除はindex.html.erbのをshow.html.erbにコピペし編集。

 <% link_to '[x]', post_comment_path(post), method: delete, class: 'command' data: {confirm: 'Sure?' } %> 

comments_controller.rbに以下のように書く。

def destroy
@post = Post.find(params[:post_id])
@comment = @post.comments.find(params[:id])
@comment.destroy
redirect_to post_path(@post)
end

routes.rbを編集。

resources :coments, only: [:create, :destroy]

ブログアプリを完成させる

post.rbを以下のように編集。

has_many : comments, dependent: :destroy

記事と一緒にコメントも消える。

【42~43日目】Node.jsの学習

Node.js入門の学習終了時の記録

総完了数:444本/総学習時間:18:48:31/総学習日数:43日

〇感想

  • 192と168を逆に書いていた。慣れというものは恐ろしい
  • だんだん理解できなくなった
  • 先に進んじゃおう
総括:Javaをもっとできるようにしよう

UNIXコマンドの復習

mkdir nodejs
cd nodejs
node mongo.js
>show dbs;
>use nodedb;
>show collections;
>db.users.find();

【44日目】Androidアプリ開発入門の学習

Androidアプリ開発入門学習終了時の記録

総完了数:456本/総学習時間:19:19:24/総学習日数:44日

〇感想

  • Android Stadio重すぎて動画だけ見ました…
  • ホントに基礎的なところだけの学習だった
総括: Android Stadio重すぎてPC動かない 

設定やソースコードから検索

shiftキーを2回クリックする。

使うファイルは主に3つ

  • manifests→AndroidManifest.xml
  • java→com.dotinstall.myfirstapp→MainActivity
  • res→layout→activity_main.xml

アプリの起動・実行

  1. AVD Manegerを押してもろもろ操作をして起動
  2. アプリの実行は「▶アイコン」もしくは「Ctrl+R

“Hardcoded text”の直し方

2つの直し方があり,1つ目は以下の通り。

  1. TextViewのtextの右にある「…」をクリック
  2. Add new resource→New String Valueで追加

2つ目はエラーコードから直接直す。

TextViewの値を変える

  1. onClickに”ChangeTextView”と書く
  2. MainActivity.ktを以下のように編集
fun changeTextView(view: View) {
messageTextView.text = "Hello there!"
}

ViewとmessageTextViewをEnterを押して読む込む必要がある。

その後,▶アイコンで実行。

⚡アイコンで簡単な変更が高速で起ち上がる!

【45~46日目】WordPressの学習

WordPress学習13回目終了時の記録

総完了数:463本/総学習時間:19:39:56/総学習日数:46日

リセットCSS ”reset yui”

リセット CSS とは、 Google ChromeやSafariなど ブラウザ があらかじめ持っているデフォルトの CSS を、リセットするための手法・設定です。


ferret「2016年で最もダウンロードされたリセットCSSランキングトップ5 」 ,2016.8.16
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 
CSS Reset - YUI Library

MySQL入門をやってから14回以降をやろうと思いました。

【47~52日目】Java Scriptの実践演習

JavaScriptで作る誕生日診断

JavaScriptで作る誕生日診断 終了時の記録

総完了数:468本/総学習時間:19:54:26/総学習日数:47日

  • getAge()
  • getTime()
  • split()
  • innerHTML
POINT

月は0~11で表されるので,”birthdayArray[1]”から1を引く!

最初は「検証」を使うのにだいぶ手こずったけど,いまは当たり前のように使っています…。

経った一か月でこれほど慣れてしまうものなのか。

 コードを見やすくするためにbirthdayArrayをなくす方法がある。 

JavaScriptで作る王様ゲーム

JavaScriptで作る王様ゲーム 終了時の記録

総完了数:474本/総学習時間:20:08:18/総学習日数:48日

  • kingSaid()
  • Math.floor(Math.random() * orders.length
  • p(erson)1とp2を重複させないためにwhile(p1 = p2)文を使う
  • innerHTML
  • プレイヤーが1人のときはif文を使う

JavaScriptで文字数チェッカーを作ろう

JavaScriptで文字数チェッカーを作ろう 終了時の記録

総完了数:482本/総学習時間:20:30:23/総学習日数:50日

  • keyup
  • remaining
  • if文を短く label.className = remaining < WARNING ? ‘warning’ : ”;

JavaScriptで音声認識サービスを作ろう

JavaScriptで音声認識サービスを作ろう

総完了数:487本/総学習時間:20:41:01/総学習日数:52日

    • speech.start
  • 「-bash: php: コマンドが見つかりません」がよく出るのでこれを読んでみた

【53~日目】JavaScript以外の実践編のレッスン

パラックスサイトを作ろう

 パララックスサイトを作ろう

総完了数:498本/総学習時間:21:09:29/総学習日数:53日

  • scrollTop()

HTML5で作るシンプルメモ帳

HTML5で作るシンプルメモ帳

総完了数:506本/総学習時間:21:24:44/総学習日数:56日

動画の最終更新日が2011年(ぼくが見た中で一番古い!)で補足情報に「レッスンの内の誤表記について」にごめんなさい!と書かれていた。タグチ先生にも若かりし頃があったようだ。

PHPで作る簡単サイコロ

PHPで作る簡単サイコロ

総完了数:508本/総学習時間:21:30:26/総学習日数:58日

関数はmt_randなどを使用した。動画の本数は少なかったが内容は濃かった。

PHPとjQueryで実装する「もっと読む」

PHPとjQueryで実装する「もっと読む」

総完了数:517本/総学習時間:21:53:39/総学習日数:58日

vagrant upとtweetsを読み込まず写経のみをやった。php忘れている…。偶然にも昨日,ブログに”よむボタン”をいじっていたが,それはHTMLとCSSだけでできていたので,このレッスンのほうが難しかったよ。

PHPで作るページング機能

PHPで作るページング機能

総完了数:527本/総学習時間:22:19:57/総学習日数:59日

データベースの設定はやらず,写経のみやった。phpを基本からもう一度学習し直そうと思った…。

PHPで作る簡易掲示板

PHPで作る簡易掲示板

総完了数:536本/総学習時間:22:42:27/総学習日数:61日

“.dat”という見慣れない拡張子が出てきた。調べてみたがよく分からない。とりあえず,ポケモンでいうならメタモン的な不思議な存在だと思っておくことにした。

CSRF対策という言葉が出てきたので調べました。こちらが分かりやすかった。

今月の感想

Macがほしい…。

コメント

タイトルとURLをコピーしました