GTB2022_WebAppFramework

Transcript

1. 1 GTB2022
 Webアプリフレームワーク入門
2. 2 GMOペパボ株式会社 CTO室鹿児島エンジニアリングチーム 2021年 中途入社 高岡佑輔 (kurehajime) 趣味 いろいろ作ってます • 新言語『TypoScript』を作った • 文章からダジャレのみを抜き出すコマンドを作ってみた • ターミナルでスライドを再生するコマンド • pongコマンド • 将棋みたいなボードゲーム 講師紹介
3. 3 GMOペパボ株式会社 EC事業部 CRE/QAチーム 2021年 入社 菊山 樹 (symmonds) 出身 奈良県 趣味 ゲーム、読書 講師紹介
4. 4 GMOペパボ株式会社 EC事業部 ECグループ アプリストアチーム 2021年 入社 伊藤 滉祐 (kosuke) 出身 愛知県 趣味 カメラ、ガジェット、ピストバイク 講師紹介
5. 5 5 講師紹介 GMOペパボ株式会社 EC事業部 CRE/QAチーム 2017年 新卒入社 遠藤 太徳(endu) 趣味 料理、音楽鑑賞 去年もGTBへ参加しています! 今年はオフラインなので楽しみです。 グループ横断でつくる新卒技術研修！【 GMOテク ノロジーブートキャンプ】オンライン開催 2年目の裏 側インタビュー
6. 6 講義のすすめかた
7. 7 この講義で学ぶこと 講義の進め方について • 内容 Ruby向けWebアプリケーションフレームワーク『 Ruby on Rails』を学びます。 • 目標 ◦ Web アプリケーションフレームワークの基本的な使い方について学ぶ ◦ 成果物作成のために必要な知識のインデックスを身につける ◦ 受講者同士で協力し合う体験をする
8. 8 今日作るもの 講義の進め方について Ruby on Railsを使って、表示・登録・更新・削除機能を備えた とてもシンプルなブログサービスを作ります。 今日はたくさん手を動かします。
9. 9 スケジュールについて 講義の進め方について • 講義についての説明 15分 (10:15〜10:30) ◦ 講師紹介 ◦ 講義の進め方 • 開発環境構築 1時間30分 (10:30〜12:00) ◦ ConoHa VPSにRailsを導入する ◦ VSCodeの拡張機能Remote - SSHでConoHa VPSにアクセスする • Webアプリケーションフレームワークについて 30分 (12:00〜12:30) ◦ Webアプリケーションフレームワークについて ◦ Ruby on Railsについて • Railsをはじめようをはじめよう 2時間30分 (13:30〜17:00) ◦ 『Railsをはじめよう』1章〜7章
10. 10 席移動 講義の進め方について 今日の演習は • 各個人ごとに演習に取り組みます。 • 早めに終わった人は同じチームの人を積極的にお手伝いしましょう。 • チーム外の困ってる人にも手が空いていたら協力しましょう。 これから5分間かけて チームメンバー同士で(ほどほどに)近い席に移動して下さい。
11. 11 チーム スレの作成 講義の進め方について slackのスレッド機能を作ってみましょう。 #prj-gtb2022_engineerを開いて、 チームごとに、チームスレを作ってみて下さい。 そこにまずはみんなで適当に一言書き込んでみて下さい。 これからそこに今の進捗や困っていること、独り言などを 書き込んでいきます。 ここ押して 左側に出てき たパネルに書 き込むとスレッ ドが作成でき ます。
12. 12 講義の進め方について slackに気軽に書き込んでください。 例 ) 【質問】***と書いてみたのですが、動かないです。 【質問】*** って、どういう意味でしょうか? 質問方法について
13. 13 作業パートの進捗を確認するために皆さんの反応を伺う時があります。 その時はzoomの「手を挙げる」機能でボタンを押してください。 反応を確認できたら「手を下ろしてください」と言うので 「手を降ろす」ボタンを押してください。 講義をスムーズに進めるため、ご協力お願いします。 リアクションについて 講義の進め方について
14. 14 この画像が載っているスライドがある時は 10分休憩です。 この講義ではこまめに休憩を入れて進めていきます。 休憩時間以外でもお手洗い等の際はご自由に離席して結構です。 聞き逃して演習に追いつけなくなったら slackに書き込んだり、 お近くのサブ講師の人に助けを求めて下さい。 休憩について 講義の進め方について
15. 15 「開発環境構築」と「Railsをはじめようをはじめよう」は手を動かします。 このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。 手を動かす作業でのスライドについて 講義の進め方について 作業 「作業」がついているスライドは実際に手を動かしな がら行うパートになります。実際にコーディングをし たり、設定したりする作業で出てきます。
16. 16 DEMOスライドの出ている時は、講師が画面見せながら実際に DEMOを行います DEMOスライドと作業スライドについて 講義の進め方について
17. 17 作業スライドが出ている時は、皆さんに手を動かして作業をして貰います。 DEMOスライドと作業スライドについて 講義の進め方について やること ・ ・ ・ ・ 確認 ・XXができたらOK！ **:** まで各自で作業をしましょう。
18. 18 演習を伴う章は以下のような流れになります。 全体の流れ 講義の進め方について 解説 DEMO 作業 終わったら ZOOMで挙手 して下さい
19. 19 うまくいかなくても深刻に考えないようにしましょう。 今回の目標は 『成果物作成のために必要な知識のインデックスを身につける』 です。 「詳細については忘れたけど、調べつつやれば何とかなりそう」 まで到達できれば大きな前進です。 こういった演習にはトラブルがつきものです 講義の進め方について
20. 20 開発環境構築
21. 21 このパートで行う事 ①ConoHa VPS上にサーバーを作成する ②VSCodeの拡張機能 Remote - SSHでConoHa VPSにアクセスする 開発環境の構築
22. 22 ConoHa VPSにサーバーを 作成する
23. 23 ConoHa VPSの管理画面にログインしましょう。 ConoHa VPSにサーバーを作成する
24. 24 管理画面にログインできれば左メニューの サーバー追加をクリックします。 ConoHa VPSにサーバーを作成する
25. 25 画面が切り替われば、サーバーを追加するにあたっての設定を行います。 以下のように設定してください。 - リージョン : 東京 - VPS割引きっぷ : 利用しない - プラン : 2GB 1,848円 - OS : Ubuntu 20.04 ※Ruby on Railsは選ばないで下さい！ ※最新のUbuntu22.04は選ばないで下さい！ - rootパスワード : 任意 - ネームタグはそのままで大丈夫です ConoHa VPSにサーバーを作成する ※rootパスワードは一度設定すると変更ができないので必ず どこかにメモをしてください。また、紛失した際にも確認する術 がないため注意してください。
26. 26 ConoHa VPSにサーバーを作成する 設定していただくと、このような選択になっていると思います。 ※ まだ追加は押さないでください。
27. 27 ConoHa VPSにサーバーを作成する 次に、オプションを見るをクリックしてください。以下の設定をして ください。 - IPv6 全て拒否 - IPv4 指定ポートのみ許可 - SSH(22)以外のチェックを外す
28. 28 最後にオプションのSSH Keyを登録する必要があります。選択する際に キーを新規作成をク リックしてください。そうすれば下記の画像のように追加ボタンが出てくるので、それをクリックし てください。 ConoHa VPSにサーバーを作成する
29. 29 追加ボタンを押し、登録されるとシークレットキーのダウンロードを促すポップアップが出るの で、ダウンロードします。 ConoHa VPSにサーバーを作成する
30. 30 追加ボタンを押す前に、深呼吸して確認しましょう。 - リージョン : 日本 - VPS割引きっぷ : 利用しない - プラン : 2GB 1,848円 - OS : Ubuntu 20.04 ←注意！最新ではありません！ ※Ruby on Railsは選ばないで下さい！ ※最新のUbuntu22.04は選ばないで下さい！ - rootパスワード : 任意 - ネームタグはそのままで大丈夫です ConoHa VPSにサーバーを作成する ここを間違えるとだいぶ後になってからやり直しになります！！
31. 31 ConoHa VPSにサーバーを作成する ここまでやったら画面右側の追加をクリックします。 作成後にConoHa VPSの管理画面に遷移します。 サーバリストに作成したVPSがあるのを確認します。
32. 32 DEMOタイム
33. 33 作業 これから15分後まで各自で作業をしましょう。 わからない事があったら、 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・サーバーの追加 ・Ubuntu ・2GB ・ポートの制限 ・シークレットキーの保存 確認 ・Ubuntuのサーバーがができたら OK！
34. 34 休憩タイム
35. 35 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
36. 36 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする なぜVSCodeを使用するのか VSCodeを使用しない場合、以下のような作業が発生します。 - コンソール画面に入りコマンドラインで操作する必要がある - 手間が発生する - コマンドの入力間違いで作業が思うように進まない - viなどの知識が必要 - 修正箇所を探すのが大変
37. 37 なぜVSCodeを使用するのか vSCodeを使用した場合、以下のようなメリットがあります。 - GUIで楽に操作できる - 自動でインデントや補完をしてくれるので、ファイルの中身を編集するのが楽 - 拡張機能を入れて自分好みにカスタマイズできる VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
38. 38 これから行う具体的な手順 1. VSCodeに拡張機能 Remote-SSH をインストールする 2. VSCode Remote-SSH の接続設定 a. SSH Key を権限変更する b. VSCode Remote-SSH に接続設定を追加する VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
39. 39 ① VSCodeにRemote-SSHをインストールする VSCodeの拡張機能の検索画面(Crt+Shift+X)からRemote-SSHを検索してインストールしま す。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
40. 40 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールする インストールが完了するとVSCodeの左のアイコン一覧にRemote-SSH用のアイコンが表示さ れます。
41. 41 DEMOタイム
42. 42 作業 これから5分後まで各自で作業をしましょう。 わからない事があったら、 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・VSCodeにRemote-SSHをインストールする 確認 ・SSH接続のアイコンが表示されたら OK
43. 43 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする Mac用 クリックすると 動画が始まります。
44. 44 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする クリックすると 動画が始まります。
45. 45 作業 これから10分後まで各自で作業をしましょう。 わからない事があったら、 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・SSH Key を権限変更する ・VSCode Remote-SSH に接続設定を追加する 確認 ・接続ができたらOK！ 画面下部のターミナルは root@160-251-53-88:~# のようになっていますか？ (IPアドレスは各自違います )
46. 46 Webアプリフレームワークにつ いて
47. 47 Web アプリケーションフレームワークナニソレ？ Webアプリフレームワークについて
48. 48 そもそもフレームワークとは？ フレームワーク＝何らかの「型」や「枠組み」 - 例：問題解決のフレームワークとは？ →問題を解決するための型（決まりきった手順） Webアプリフレームワークについて
49. 49 Webアプリケーションフレームワークとは？ - 効率よくWebアプリケーション開発を行うための型・枠組み - 以降は略して、フレームワークにします Webアプリケーションフレームワークについて
50. 50 フレームワークを使うとなぜ効率が良いのか？ そのフレームワークに用意されたルールやテンプレートに沿って開発できるため、作業効率が向 上します。また、フォルダ構造やライブラリについても用意されたものを使えるため、プログラムの 分割に迷うことが少なくなります。 Webアプリケーションフレームワークについて
51. 51 なぜ枠組みが作られたのか？ つまり、 - みんなが必要になりそうな部分が、あらかじめ用意されている - 部分的な提供ではなく、全体的に面倒を見てくれる - 道筋が用意されているので、それに沿うことである程度 セキュリティ対策ができる。 - メンバー間のズレが減って開発しやすい ただし、 - 一から全部作るのに比べて、自由度は低い 引用 - https://wa3.i-3-i.info/word12470.html - https://qiita.com/Jxck_/items/ec8e928f69d099b25764 Webアプリケーションフレームワークについて
52. 52 Ruby on Railsとは？ 52
53. 53 Ruby on Railsとは？ 2004年に、デンマークのプログラマであるデイヴィッド・ハイネマイヤー・ハンソン（通称 DHH）氏に よって、Rubyのフレームワークとして作られました。エンジニアの間では縮めて Rails（またはRoR） と呼ばれることも多く、簡単なコードで Webアプリケーションの開発ができるように設計されていま す。 引用：https://hnavi.co.jp/knowledge/blog/ruby-on-rails/ Ruby on Railsとは
54. 54 Ruby on Railsの特徴 Ruby on Railsは、「MVCアーキテクチャ」に基づいて構築されたフレームワークです。 それぞれ、Model（モデル）、View（ビュー）、 Controller（コントローラ）の頭文字をとって名付けら れています。 引用：https://hnavi.co.jp/knowledge/blog/ruby-on-rails/ Ruby on Railsの特徴
55. 55 MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする MVCパターンについて 55
56. 56 MVCパターンの特徴 MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており これに従って実装するので（比較的）悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある 56 MVCパターンの復習
57. 57 処理の流れをMVCに沿って 見てみよう 57
58. 58 ECショップから服の一覧データを取得したい場合の例 58 処理の流れをMVCに沿って見てみよう 服の一覧を 見たい
59. 59 ECショップから服の一覧データを取得したい場合の例 59 処理の流れをMVCに沿って見てみよう 服の一覧を 見たい Response GET /clothes 服の一覧ページをレスポンスで返す Request
60. 60 ECショップから服の一覧データを取得したい場合の例 この中身をもっと詳細に見てみよう 60 処理の流れをMVCに沿って見てみよう 服の一覧を 見たい Response GET /clothes 服の一覧ページをレスポンスで返す Request
61. 61 Model ECショップから服の一覧データを取得したい場合の例 61 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller
62. 62 Model ECショップから服の一覧データを取得したい場合の例 62 処理の流れをMVCに沿って見てみよう Route DB View ① Controller /clothesを元にControllerに 遷移します ② ③ ④ ⑤ ⑥ ⑦
63. 63 Model ECショップから服の一覧データを取得したい場合の例 63 処理の流れをMVCに沿って見てみよう Route DB View ② ③ ④ ⑤ ⑥ ⑦ Controller Controller側で「服の一覧を 取得する」処理を呼び出します ①
64. 64 Model ECショップから服の一覧データを取得したい場合の例 64 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller DBからデータを取得したいので モデルに処理が移ります
65. 65 Model ECショップから服の一覧データを取得したい場合の例 65 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller Model経由でDBから必要な データを取得します
66. 66 Model ECショップから服の一覧データを取得したい場合の例 66 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller 受け取ったデータを Controllerに返します
67. 67 Model ECショップから服の一覧データを取得したい場合の例 67 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller データをViewに渡して レスポンスで返す形に加工します
68. 68 Model ECショップから服の一覧データを取得したい場合の例 68 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller Controllerからレスポンスを クライアントに返します
69. 69 Model ECショップから服の一覧データを取得したい場合の例 69 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller MVCパターンの流れ
70. 70 MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする MVCパターンについてのおさらい 70
71. 71 この後のカリキュラムでもMVCを 意識して進めていこう！
72. 72 休憩タイム 順調ならここでお昼休み
73. 73 Rails をはじめよう
74. 74 『Rails をはじめよう』について 『Railsをはじめよう』はRuby言語向けのWebアプリケーションフレームワーク『 Ruby on Rails』向 けの定番入門教材です。 Railsをはじめよう https://railsguides.jp/getting_started.html
75. 75 これから作るもの 今日はブログサービスを作ります。 ブログサービス
76. 76 これから作るもの 記事一覧ページ ブログサービス 記事一覧 新規作成ボタン
77. 77 これから作るもの 記事作成ページ ブログサービス
78. 78 これから作るもの 記事ページ ブログサービス 編集も削除もできる
79. 79 前置き １章〜２章 こちらは先ほど学んだ内容とほぼ同じなので、飛ばします。 ３章 演習形式。 環境の差異などの関係で今回は『 Railsをはじめよう』とは若干異なる形で進めます。 ４章から７章まで 演習方式。 『Railsをはじめよう』の内容に沿って進めます。 ８章以降 今日の演習では扱いません。 この講習の進め方
80. 80 第３章 Railsプロジェクトを新規作成する Railsアプリケーションの雛形を生成します。 この章でやること この章では『Railsをはじめよう』の内容とは若干異なる手順を踏みます。
81. 81 第３章 Railsプロジェクトを新規作成する それではRailsの環境構築のためのコマンド入力を行います。 環境構築前の確認 画面下部にターミナルは表 示されてますか？ 表示されていない場合は 『ターミナル→新しいターミ ナル』から開きましょう 『ターミナル』を選択しましょ う SSH接続になっているはず です ここにコマンドを入力します
82. 82 第３章 Railsプロジェクトを新規作成する 以下のコマンドを1行ずつ入力していきましょう 関連ツールのインストール sudo apt update snap install --classic --channel=3.1 ruby sudo apt install -y sqlite3 libsqlite3-dev build-essential コマンド補足 sudo : コマンドを管理者権限で実行します。 apt ：パッケージをインストールするための便利なコマンド。 snap ：パッケージをインストールするための便利なコマンド。 　既存の環境に影響を与えずにインストールできるため、 　新しめのバージョンはこちらで提供されることが多い。 上のコマンドで入れているもの　 ruby : ruby sqlite3 ：データを格納するための簡易的なデータベース。 libsqlite3-dev ：sqlite3を使うためのライブラリ。 build-essential : C言語などをコンパイルするためのツールです。 railsでは一部のライブラリがC言語で実装されています。 　
83. 83 第３章 Railsプロジェクトを新規作成する Citing for cache lock: Could not get lock〜と表示される → こちらを参照 dpkg was interrupted〜と表示される → こちらを参照 Failed to fetch〜と沢山エラーが出る → apt-get update をしてから再実行してみて下さい よくあるトラブル
84. 84 第３章 Railsプロジェクトを新規作成する 以下のコマンドを入力していきましょう Railsのインストール gem install -v 7.0.3 rails 補足 rubyではライブラリのことをgemと呼びます。 gemはgemコマンドでインストールすることができます。 複数のgemを管理するのに便利なbundlerというツールもあります。 apt,snap,npm,yarn,gem,bundler…今日だけで6つも似たようなツールが登場しました。
85. 85 第３章 Railsプロジェクトを新規作成する railsコマンドを使うための準備をします。 ファイルの一覧を開きましょう。 Railsコマンドのパスを通す ① 『フォルダーを開く』ボタンを押す。 ② ダイアログが表示されるので、『 /root/』になっていることを確認する。 ③ OKを押す。 ※確認ダイアログが出たら「信頼する」をクリックして下さい
86. 86 第３章 Railsプロジェクトを新規作成する railsコマンドの場所を記憶させます。 Railsコマンドのパスを通す ① ファイルの一覧から『 .bashrc』を開く。 ② 最後の行にexport PATH=$PATH:~/.gem/binを追記する。 ③ 保存する。(WindowsならCtrl+S、MacならCommand+S) ④ターミナルで以下のコマンドを入力。 source ~/.bashrc
87. 87 第３章 Railsプロジェクトを新規作成する railsコマンドが使えるようになりました。 確認してみましょう。 Railsのバージョン確認 rails --version バージョンは表示されましたか？ Rails 7.0.3と正しく表示されていますか？
88. 88 DEMOタイム
89. 89 作業 これから15分後まで各自で作業をしましょう。 わからない事があったら、 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・環境構築前の確認 ・関連ツールのインストール ・Railsのインストール ・Railsコマンドのパスを通す ・Railsのバージョン確認 確認 ・rails versionでRails 7.0.3と表示されたらOK
90. 90 第３章 Railsプロジェクトを新規作成する Railsにはアプリケーションの雛形を作る便利なコマンドがあります。 以下のコマンドを叩いてみましょう。 ブログアプリケーションを作成する rails _7.0.3_ new blog cd blog コマンドが終わったら以下のコマンドでディレクトリを移動します。
91. 91 第３章 Railsプロジェクトを新規作成する 少し4章の範囲に入ってしまいますが、さっそく Webアプリケーションを起動してみましょう。 /root/blog ディレクトリで、以下のコマンドを実行します。 実行してみる rails server コマンドを実行して10秒ぐらい経ってからブラウザで以下の URLを開いてみましょう。 http://127.0.0.1:3000/ 開くのが早すぎるとエラーがでることがあります。 エラーが出る場合は時間をおいて開き直しましょう。 ※ localhostは127.0.0.1の別名です
92. 92 第３章 Railsプロジェクトを新規作成する 正しくインストールされていれば、以下の画面が表示されるはずです。 実行してみる
93. 93 DEMOタイム
94. 94 作業 10分後まで各自で作業をしましょう。 わからない事があったら、 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・ブログアプリケーションを作成する ・実行してみる 確認 ・http://127.0.0.1:3000/にrailsの初期画面ができ たらOK！
95. 95 休憩タイム
96. 96 第４章 Hello, Rails! ここから先は『Railsをはじめよう』の内容に沿って進めます。 4.1 Webサーバーを起動する Webサーバーの起動方法を学びます。 4.2 Railsで「Hello」と表示する 新しいページの追加方法を学びます。 この章でやること(1/2) 作業タイム
97. 97 第４章 Hello, Rails! 技術サイトや書籍では、コマンドを紹介する際に先頭に $マークを付けることがあります。 【4.1 補足】＄マークについて $ bin/rails server これは「このコマンドを実行して下さい」という意味です。 (一般ユーザーの場合は$、rootユーザーの場合は#記号になります) $マーク自体は入力しないで下さい。 bin/rails server ↑自分で入力する時は$は不要。
98. 98 第４章 Hello, Rails! rails serverで起動したサーバーは Ctrl + Cキー で止めることができます。 【4.1 補足】サーバーの停止について
99. 99 第４章 Hello, Rails! ルーティングとは、ユーザーがアクセスした URLをもとに実行する処理や表示するテンプレートを振り 分ける処理です。 Railsではルーティングを設定するために routes.rbというファイルを編集します。 routesは人によって「ルーツ」と読んだり「ラウツ」と読んだり、結構分かれています。 【4.2 補足】ルーティング get "/articles", to: "articles#index" http://◦◦◦◦/articlesにアクセスしたら app/controllers/articles_controller.rbのindexを呼び出して app/views/articles/index.html.erbを表示します。 記事一覧ページのルーティングの例
100. 100 DEMOタイム
101. 101 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・Webサーバーを起動する ・Railsで「Hello」と表示する 確認 ・http://localhost:3000/articles を表示して ・「Hello, Rails!」が返ってきたらOK！ (文章は好きに変更しても OKです)
102. 102 第４章 Hello, Rails! 4.3 アプリケーションのHomeページを設定する URLの変更方法を学びます。 この章でやること(2/2) 作業タイム
103. 103 DEMOタイム
104. 104 作業 5分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・アプリケーションの Homeページを設定する 確認 ・http://localhost:3000 を表示して ・「Hello, Rails!」が返ってきたらOK！ (文章は好きに変更しても OKです)
105. 105 第５章 オートロード この章ではコードを書きません。 5 オートロード Railsが暗黙で提供してくれるオートロードの仕組みについて学びます。 この章でやること
106. 106 第５章 オートロード RailsはRubyを利用するWebアプリケーションフレームワークですが、標準の Ruby言語では利 用できない様々な言語拡張が最初から用意されています。 Railsをはじめて学ぶRubyユーザーはそれらの言語拡張に遭遇すると「あれ？なんでこのコード はエラーにならないの？」と不思議に感じるかもしれません。 それらの多くは『Active Support』というライブラリで実現していますので、気になる人は以下の 資料を参考にして下さい。 Active Support コア拡張機能 https://railsguides.jp/active_support_core_extensions.html 【5.1 補足】Railsによる言語拡張
107. 107 第６章 MVCを理解する 6.1 モデルを生成する 記事のデータを表現するためのモデルを作成します。 6.2 データベースマイグレーション データベースに変更内容を反映します。 この章でやること(1/3) 作業タイム
108. 108 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ MVC ユーザーがサーバーにリクエストを投げてから画面に表示されるまでの流れ やってること ① ユーザーがサーバーにリクエストを投げると、Routeがそれを受け取ります。 ② RouteはURLに応じたControllerを呼び出します。 ③ Controllerは必要に応じてModelに処理を依頼します。 ④ Modelはデータベースとのやり取りを行います。 ⑤ ControllerはModelを参照します。 ⑥ ControllerはViewをもとにHTMLを生成します。 ⑦ Controllerは生成したHTMLをユーザーに返却します。
109. 109 第６章 MVCを理解する Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する 【6.1 補足】MVCパターンとは
110. 110 第６章 MVCを理解する DB(データベース)のスキーマ(構造)の管理は、DBの管理ツールを利用してコマンドや GUIで直接 操作することもできます。しかしRailsではそのようなやり方は推奨しておらず、原則マイグレー ションだけを使って管理します。 マイグレーションを利用することによって以下のようなメリットがあります。 • 同じスキーマのDBを簡単に作成できるようになる。 • 特定のDBに依存しない書き方のため、別の DBへの乗り換えが容易になる。 • 古いスキーマのDBを差分更新できる(最初から作り直さなくて良い)。 • スキーマの定義をもとに戻すことができる。 【6.2 補足】マイグレーションの何が嬉しいのか
111. 111 DEMOタイム
112. 112 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・モデルを生成する ・データベースマイグレーション 確認 ・bin/rails db:migrateを実行して CreateArticles: migrated と表示されたらOK
113. 113 第６章 MVCを理解する 6.3 モデルを用いてデータベースとやりとりする データの作成や表示をやってみます。 この章でやること(2/3) 作業タイム
114. 114 DEMOタイム
115. 115 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・モデルを用いてデータベースとやりとりする 確認 ・railsコンソールでArticle.allを実行して 　レコードが1件返ってきたらOK
116. 116 第６章 MVCを理解する 6.4 記事のリストを表示する データベースの内容がアプリケーションに表示されるようにします。 この章でやること(3/3) 作業タイム
117. 117 DEMOタイム
118. 118 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・記事のリストを表示する 確認 ・http://localhost:3000 を表示して ・記事一覧が返ってきたら OK！
119. 119 休憩タイム
120. 120 第７章 CRUDの重要性 7.1 記事を1件表示する 記事の詳細ページを作成します。 この章でやること(1/5) 作業タイム
121. 121 第７章 CRUDの重要性 Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）の略。 Controllerのアクションはこれらのいずれかを担当している。 【7.0 補足】CRUDとは 名前 操作 RESTで言い換えると Create 作成 POST Read 読み取り GET Update 更新 PUT/PATCH Delete 削除 DELETE
122. 122 DEMOタイム
123. 123 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・記事を1件表示する 確認 ・http://localhost:3000/articles/1 を開いて記事が表示されたら OK
124. 124 第７章 CRUDの重要性 7.2 リソースフルルーティング URLのルーティングについて詳しく学びます。 この章でやること(2/5) 作業タイム
125. 125 第７章 CRUDの重要性 Railsには基本となる7つのアクションがあります。 大半のWebアプリケーションはこれらの組み合わせでできています。 【7.2 補足】各アクションの役割 アクション名 役割 HTTPメソッド URL例(articlesの場合) index 一覧画面の表示 GET /articles new 作成画面の表示 GET /articles/new show 表示画面の表示 GET /articles/123 create 作成機能の実行 POST /articles edit 編集画面の表示 GET /articles/123/edit update 更新機能の実行 PATCH /articles/123 destroy 削除機能の実行 DELETE /articles/123
126. 126 第７章 CRUDの重要性 一覧ページ 【7.2 補足】各アクションの役割 □□□□▪□□□□▪ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□▪□□□□▪ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□▪□□□□▪ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□▪のブログ index
127. 127 第７章 CRUDの重要性 記事ページ 【7.2 補足】各アクションの役割 □□□□▪□□□□▪ □□□□▪のブログ show 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
128. 128 第７章 CRUDの重要性 記事投稿ページ 【7.2 補足】各アクションの役割 新しい記事を投稿する タイトル 本文 写真 投稿する create を呼び出すボタン new
129. 129 第７章 CRUDの重要性 記事編集ページ 【7.2 補足】各アクションの役割 新しい記事を投稿する タイトル 本文 写真 更新する update を呼び出すボタン edit 削除する destroy を呼び出すボタン
130. 130 DEMOタイム
131. 131 作業 5分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・リソースフルルーティング 確認 ・http://localhost:3000/articles/1 を開いて記事が表示されたら OK (挙動に変化はないはずです )
132. 132 第７章 CRUDの重要性 7.3 記事を1件作成する 記事の作成画面を作ります。 この章でやること(3/5) 作業タイム
133. 133 第７章 CRUDの重要性 【7.3 補足】Strong Parametersの何が嬉しいのか Webアプリケーションはユーザーからの入力を利用することが多いです。 - 例えば会員制サイトでログインを行う場合 - ユーザーからID/パスワードを受け取る - しかしながら、ユーザーは善意のユーザーばかりではない
134. 134 第７章 CRUDの重要性 たとえば以下のようなテーブルがあったとします。 admin_flagの欄に1が格納されていると管理者向け機能が使えるとします。 【7.3 補足】Strong Parametersの何が嬉しいのか id name admin_flag 42 山田 太郎 0 admin_flag=1 :管理者 admin_flag=0 :一般ユーザー
135. 135 第７章 CRUDの重要性 ユーザーの登録画面は以下のような構成です。 一般ユーザーが自分の意思でadmin_flagを編集して管理者権限を変更できないよう HTMLを作 成します。 【7.3 補足】Strong Parametersの何が嬉しいのか 山田 太郎 作成 名前 ユーザー登録
136. 136 第７章 CRUDの重要性 Strong Parametersを使わずにUser.createメソッドにパラメータを渡してみます。 どのような問題があるでしょうか。 【7.3 補足】Strong Parametersの何が嬉しいのか def create User.create(params[:user]) def
137. 137 第７章 CRUDの重要性 ユーザーはブラウザ上に表示された HTMLやJavascriptの内容を自由に編集することができま す。adminのinputタグを追加されたり、リクエストを細工されると、前ページのソースだと 簡単に admin_flag=1に変更できてしまい、管理者権限が奪われてしまいます。 Strong Parameterが設定されていれば、事前に指定された項目以外をフィルタリングをすること ができます。 ユーザーから送られてくるデータを信用してはいけない
138. 138 DEMOタイム
139. 139 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・記事を1件作成する 確認 ・http://localhost:3000/articles/new から記事が作成できたら OK
140. 140 第７章 CRUDの重要性 7.4 記事を更新する 記事の更新画面を作ります。 この章でやること(4/5) 作業タイム
141. 141 DEMOタイム
142. 142 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・記事を更新する 確認 ・http://localhost:3000/articles/1/edit から記事が編集できたら OK
143. 143 第７章 CRUDの重要性 7.5 記事を削除する 記事の削除機能を実装します。 この章でやること(5/5) 作業タイム
144. 144 DEMOタイム
145. 145 作業 10分後まで各自で作業をしましょう。 わからない事があったら、遠慮なく 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です! やること ・記事を削除する 確認 ・記事が削除できたら OK
146. 146 おわり 困ってる人がいたらお手伝いしましょう。 それでも手が空いたら、８章以降も挑戦してみましょう。 ※8章は明日の『DB概論』『DB設計・実践』を学んだ後でないと難しいです。 　理解するのは後回しでいいかもしれません。 —- 終わったらConohaのサーバーを忘れず削除して下さい。 もし早めに終わったら
147. 147 おわり 今日の演習ではRuby on Railsで表示、登録、更新、削除の機能を持つ ブログアプリケーションを作りました。 世の中にある大半のWebアプリケーションはこれらの操作の組み合わせで出来ています。 おつかれさまでした
148. 148 以上で講義は終了です Webアプリフレームワーク入門 研修は終了です！ お疲れ様でした！