SQLの学習(4日目)とRailsの学習(1日目)
データの追加、更新、削除
テーブルにデータを追加したいときは「INSERT INTO テーブル名(カラム名)」を用いる。そして挿入したい情報を「VALUES(値)」として追加する。
多くの場合、idカラムの追加にはAUTO INSERTが用いられます。
データの更新
データを更新したいときは「UPDATE テーブル名」とし、「SET カラム名 = "追加したい情報"」を書く。そして更新するレコードを「WHERE id = 変更したいレコード」と書くことで更新される。
WHEREでレコードを指定しないと全てのデータが更新されてしまうので注意。
UPDATE実行後にデータを戻すことはできないので、必ず変更したいデータをしっかり確認すること。
データの削除
データの削除には「DELETE」を使う。下の画像では「DELETE FROM」としてstudentsテーブルから削除することを命令している。そしてUPDATEと同様に削除するレコードを指定する。削除したデータは戻らないのでよく確認すること。
これもUPDATE同様に、WHEREによるレコードの指定がないと全てのデータが消えてしまうので注意。
本コース(progate SQLコース)で学んだ4つの構文は以下のとおり。これは大切なので覚えておこう。セミコロンも大事
Railsの勉強。progateから
Railsでアプリケーションを作るには「rails new アプリケーション名」というコマンドをターミナルで実行してフォルダを作る必要がある。そうすることで入力したアプリケーション名と同じフォルダと開発に必要なファイルが入ったフォルダが作成される。
開発中のアプリケーションをブラウザで表示するためにはサーバーを起動する必要があり、「rails server」とコマンドすることで完了する。今回はlocalhost:3000にアクセスすれば以下のページが表示される
トップページを作成する。
「rails generate controller home top」を実行するとトップページが作成できる。
このコマンドを実行すると、新しいWebページが自動で作られ、
「localhost:3000/home/top」というURLにアクセスできるようになります。
ページ作成に必要なものは以下の3つが挙げられる。
viewとは
viewとは単語の意味するとおり、ページの「見た目」を作るためのHTMLファイル。
ブラウザとRailsのやりとりの中で、Railsからビューが返され、ページが表示される。
いわゆるクライアントとホストのリクエストとレスポンスの関係？
viewはviewsフォルダの中で作られ、viewsフォルダの中に置かれる。
先ほどの「rails generate controller home top」を実行すると、
viewsフォルダの中に「homeフォルダ」と「top.html.erb」という
ファイルが作成される。右の図のように、html.erbは非常にHTMLと形式が似ている。
viewの中身はhtml.erbを編集すれば変えることができる。
controllerについて
ページを表示する際、Railsの中のcontrollerによってHTMLを返されている。
controllerファイルの中身を見てみると、「rails generate controller home top」を実行したとき、「home_controller.rb」というコントローラのファイルが作成され、ファイルの中に「topメソッド」が追加されているのがわかる。このcontroller内のメソッドをアクションという。また、まさにRubyのコードがcontrollerに使われている。
controller内のアクションは、viewsフォルダ内の、自身と同名のHTMLファイルを見つけ、ブラウザに返す働きを持つ。勝手に作られるとはいえ、これをいじる機会があったら、全て同じ名前に直さないといけないので、最初からファイル名はちゃんと考えないといけない
rootingとは
Rails内ではcontrollerを介してviewをブラウザに返しているが、ブラウザからcontrollerへの経路を繋ぐのがrootingである。ページが表示されるまでにブラウザ→rooting→controller→view→ブラウザの順番になる。
rootingはブラウザから送信されたURLに対して「どのcontrollerのどのアクション」で処理するかを決める「対応表」のようなものである。つまり、適切な処理を行うためのルートを作る、仕分けをするからrootingというのだろう。
ルーティングは「config/routes.rb」に定義され、右の図のように「get "URL" => "コントローラー名#アクション名"」という文法で書かれる。home/topのURLを取得したらhome#topのアクションに送れ、といったところか。
なので当然rootingに記述のないリクエストが来てもエラーになる
ではrootingを変えてみるとどうなるか。右の画像のようにURLの「home/」を削ると「localhost:3000/top」というURLでトップページにアクセスできるようになる。URLを変更しても、"home#top" の部分が変わらない限りhomeコントローラのtopアクションに対応するビューファイル（= top.html.erb）の内容がブラウザに表示される。つまりhome#topのcontroller名とアクション名が生きていればtopのviewファイルが呼び出されるということか。ちなみにURLは変更されたので、「localhost:3000/home/top」とするとエラーが表示される。
新しいページを作ろうとした際、既に使われている名前のcontroller名やアクション名がついていると、作ることはできない。
となると新しいrootingとactionを作ることになるが、そのときはrootingファイル内とcontrollerファイル内に対応するrootingとactionを作ることで作成できる。
さてrootingとcontrollerを作ったら、ブラウザに渡す具体的なページであるviewファイルを作る。これはホームフォルダで右クリック新規作成で作れる。名前はアクション名と同じaboutにする。これによりaboutに関連したページが作られた。
CSSでレイアウトを整える。
CSSファイルは「app/assets/stylesheets」フォルダに入っている。
「rails generate controller home ...」コマンドを実行したときに、CSSファイル(home.scss)も自動生成される。そしてこのCSSファイルにコードを書けば全てのviewにCSSが適用される。
CSSに使う画像の保存場所
画像ファイルは「public」フォルダに画像に入れておくと「<img src="/画像名" >」や「background-image: url("/画像名");」のように、画像名を指定するだけで、簡単に画像を表示することができる。パスの仕組みが簡単！これはすごい。
トップページのURLを変更する。
「localhost:3000」 (後ろに/○○がないURL) に対応するルーティングは、
「get "/" => "コントローラ名#アクション名"」というように、URLに"/"を
指定する。
リンクの作成。
リンクを作成するためには、<a>タグ(ankerの略)でテキストを囲み、「href=" "」の中にURLを指定する。<a href="/">TweetAPP</a>。URLを打ち込む場合は「/」は必須である。左の画像も/aboutになっている。
hrefの中身をルーティングのURL部分と同じにすることで、簡単にリンク先を指定することができる。画像ではトップページへのリンクと紹介ページへのリンクをそれぞれ作成されている。これによりトップページと紹介ページをリンクで行き来することができる。
railsレッスン2
viewの中で使う変数はアクションで定義する。しかしその変数はそのままでは使えないのでviewに渡す必要がある。そのときは「@変数」とすることで渡すことができる。
共通のレイアウトをまとめる
Railsでは、「views/layouts/application.html.erb」に共通のHTMLを書いておくことができる。下の画像では四角の部分が共通しているので、application.html.erbにひとまとめにする。
「views/layouts/application.html.erb」には<%= yield %>というコードがある。top.html.erbなどの各ビューファイルは、この<%= yield %>の部分に代入され、application.html.erbの一部としてブラウザに表示される。この仕組みによって、ヘッダーなどの共通のレイアウトを1つにまとめることができる。
例えばした二つの画像では、いずれもヘッダーの文字列が表示されている。これは<%= yield %>に一まとめにしたおかげで、各htmlファイルに同じものを書かなくて済んでいる。
link_toメソッド
Rails ではlink_toというメソッドを使うと<a>タグを作成することができる。 link_to メソッドは Ruby のコードなので、「<%=%>」で囲む必要がある。もしかしてerbってRubyのコードを打ち込むファイルってこと？わからないが
下の画像のように第一引数がブラウザに表示される文字、第二引数がURLになる。こうすることで<a>タブのリンクが作成される。ちなみにトップページなら「/」のみになる。
