Railsの基礎を学ぼう
2h
いよいよフレームワーク突入です。
Django girlsでPYthonAnywhereに触れてはいますが
もちろん、全然わかっていません(T^T)
全15レッスンありますが、最後まで生き残れるか不安です。
まずは完成物を鑑賞。
こ、こんなものが作れるなんて夢のようです。
たぶんプログラミングをやっている人なら
たいした事ではないのかもしれませんが
自分にとってはまさに
『ブレイクスルー』です!!
完成すればの話しですが。
では
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_3-1024x509.png)
Railsの準備です。
ターミナルが開かれるので
$rails server でサーバーを起動します。
それからターミナル1で
rails generete controller home topを実行し
トップページを生成します。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_4-1024x527.png)
今までと違って
エディタ、ターミナル、ブラウザと
3カ所を見て進めて行くので、ちょっと戸惑います。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_5-1024x291.png)
ここから少しHTMLのおはなし。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_6-1024x523.png)
さっき作ったtop.html.erbのある場所。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_7.png)
演習がはじまって、しばらく何して良いのか悩んだ場面。
エディタのファイルアイコンをクリックして
トントンとファイルを開いていくと
目標発見。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_8.png)
HTMLコード追加して、ブラウザで確認。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_9-1.png)
コントローラファイルの確認。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_10.png)
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_8-1.png)
以下、ちょっと何言ってるかわからない・・・
けれども先へすすみます。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_12.png)
ルーティングについての説明。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_13-1024x550.png)
ざっくりと理解したような、しないような・・・。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_14-1024x557.png)
ルーティングのファイル位置。
get ”url” => “コントローラー名#アクション名”で定義される。
これは大事かも。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_15-1024x527.png)
ここで演習!
routes.rbの内容確認のみ。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_16-1024x430.png)
ルーティングを変えて、topページを変更する練習。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_17-1024x523.png)
ルーティングを間違えると
以下のようにエラーが表示されることを確認。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_18.png)
コマンドについての説明。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_19.png)
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_20.png)
ルーティングとアクションを追加する。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_21-1024x473.png)
演習で新しいhtml.rbとルートを追加して
ブラウザで確認。
![](https://goohayami.com/wp-content/uploads/2022/02/ra1_22-1024x275.png)
長くなったので、後半に続きます。