GTB2022_WebAppFramework

Slide 1

Slide 1 text

1 GTB2022  Webアプリフレームワーク入門

Slide 2

Slide 2 text

2 GMOペパボ株式会社 CTO室鹿児島エンジニアリングチーム 2021年中途入社高岡佑輔 (kurehajime) 趣味いろいろ作ってます ● 新言語『TypoScript』を作った ● 文章からダジャレのみを抜き出すコマンドを作ってみた ● ターミナルでスライドを再生するコマンド ● pongコマンド ● 将棋みたいなボードゲーム講師紹介

Slide 3

Slide 3 text

3 GMOペパボ株式会社 EC事業部 CRE/QAチーム 2021年入社菊山樹 (symmonds) 出身奈良県趣味ゲーム、読書講師紹介

Slide 4

Slide 4 text

4 GMOペパボ株式会社 EC事業部 ECグループアプリストアチーム 2021年入社伊藤滉祐 (kosuke) 出身愛知県趣味カメラ、ガジェット、ピストバイク講師紹介

Slide 5

Slide 5 text

5 5 講師紹介 GMOペパボ株式会社 EC事業部 CRE/QAチーム 2017年新卒入社遠藤太徳(endu) 趣味料理、音楽鑑賞去年もGTBへ参加しています! 今年はオフラインなので楽しみです。グループ横断でつくる新卒技術研修！【 GMOテクノロジーブートキャンプ】オンライン開催 2年目の裏側インタビュー

Slide 6

Slide 6 text

6 講義のすすめかた

Slide 7

Slide 7 text

7 この講義で学ぶこと講義の進め方について ● 内容 Ruby向けWebアプリケーションフレームワーク『 Ruby on Rails』を学びます。 ● 目標 ○ Web アプリケーションフレームワークの基本的な使い方について学ぶ ○ 成果物作成のために必要な知識のインデックスを身につける ○ 受講者同士で協力し合う体験をする

Slide 8

Slide 8 text

8 今日作るもの講義の進め方について Ruby on Railsを使って、表示・登録・更新・削除機能を備えたとてもシンプルなブログサービスを作ります。今日はたくさん手を動かします。

Slide 9

Slide 9 text

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章

Slide 10

Slide 10 text

10 席移動講義の進め方について今日の演習は ● 各個人ごとに演習に取り組みます。 ● 早めに終わった人は同じチームの人を積極的にお手伝いしましょう。 ● チーム外の困ってる人にも手が空いていたら協力しましょう。これから5分間かけてチームメンバー同士で(ほどほどに)近い席に移動して下さい。

Slide 11

Slide 11 text

11 チームスレの作成講義の進め方について slackのスレッド機能を作ってみましょう。 #prj-gtb2022_engineerを開いて、チームごとに、チームスレを作ってみて下さい。そこにまずはみんなで適当に一言書き込んでみて下さい。これからそこに今の進捗や困っていること、独り言などを書き込んでいきます。ここ押して左側に出てきたパネルに書き込むとスレッドが作成できます。

Slide 12

Slide 12 text

12 講義の進め方について slackに気軽に書き込んでください。例 ) 【質問】***と書いてみたのですが、動かないです。【質問】*** って、どういう意味でしょうか? 質問方法について

Slide 13

Slide 13 text

13 作業パートの進捗を確認するために皆さんの反応を伺う時があります。その時はzoomの「手を挙げる」機能でボタンを押してください。反応を確認できたら「手を下ろしてください」と言うので「手を降ろす」ボタンを押してください。講義をスムーズに進めるため、ご協力お願いします。リアクションについて講義の進め方について

Slide 14

Slide 14 text

14 この画像が載っているスライドがある時は 10分休憩です。この講義ではこまめに休憩を入れて進めていきます。休憩時間以外でもお手洗い等の際はご自由に離席して結構です。聞き逃して演習に追いつけなくなったら slackに書き込んだり、お近くのサブ講師の人に助けを求めて下さい。休憩について講義の進め方について

Slide 15

Slide 15 text

15 「開発環境構築」と「Railsをはじめようをはじめよう」は手を動かします。このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。手を動かす作業でのスライドについて講義の進め方について作業「作業」がついているスライドは実際に手を動かしながら行うパートになります。実際にコーディングをしたり、設定したりする作業で出てきます。

Slide 16

Slide 16 text

16 DEMOスライドの出ている時は、講師が画面見せながら実際に DEMOを行います DEMOスライドと作業スライドについて講義の進め方について

Slide 17

Slide 17 text

17 作業スライドが出ている時は、皆さんに手を動かして作業をして貰います。 DEMOスライドと作業スライドについて講義の進め方についてやること・・・・確認・XXができたらOK！ **:** まで各自で作業をしましょう。

Slide 18

Slide 18 text

18 演習を伴う章は以下のような流れになります。全体の流れ講義の進め方について解説 DEMO 作業終わったら ZOOMで挙手して下さい

Slide 19

Slide 19 text

19 うまくいかなくても深刻に考えないようにしましょう。今回の目標は『成果物作成のために必要な知識のインデックスを身につける』です。「詳細については忘れたけど、調べつつやれば何とかなりそう」まで到達できれば大きな前進です。こういった演習にはトラブルがつきものです講義の進め方について

Slide 20

Slide 20 text

20 開発環境構築

Slide 21

Slide 21 text

21 このパートで行う事 ①ConoHa VPS上にサーバーを作成する ②VSCodeの拡張機能 Remote - SSHでConoHa VPSにアクセスする開発環境の構築

Slide 22

Slide 22 text

22 ConoHa VPSにサーバーを作成する

Slide 23

Slide 23 text

23 ConoHa VPSの管理画面にログインしましょう。 ConoHa VPSにサーバーを作成する

Slide 24

Slide 24 text

24 管理画面にログインできれば左メニューのサーバー追加をクリックします。 ConoHa VPSにサーバーを作成する

Slide 25

Slide 25 text

25 画面が切り替われば、サーバーを追加するにあたっての設定を行います。以下のように設定してください。 - リージョン : 東京 - VPS割引きっぷ : 利用しない - プラン : 2GB 1,848円 - OS : Ubuntu 20.04 ※Ruby on Railsは選ばないで下さい！ ※最新のUbuntu22.04は選ばないで下さい！ - rootパスワード : 任意 - ネームタグはそのままで大丈夫です ConoHa VPSにサーバーを作成する ※rootパスワードは一度設定すると変更ができないので必ずどこかにメモをしてください。また、紛失した際にも確認する術がないため注意してください。

Slide 26

Slide 26 text

26 ConoHa VPSにサーバーを作成する設定していただくと、このような選択になっていると思います。 ※ まだ追加は押さないでください。

Slide 27

Slide 27 text

27 ConoHa VPSにサーバーを作成する次に、オプションを見るをクリックしてください。以下の設定をしてください。 - IPv6 全て拒否 - IPv4 指定ポートのみ許可 - SSH(22)以外のチェックを外す

Slide 28

Slide 28 text

28 最後にオプションのSSH Keyを登録する必要があります。選択する際にキーを新規作成をクリックしてください。そうすれば下記の画像のように追加ボタンが出てくるので、それをクリックしてください。 ConoHa VPSにサーバーを作成する

Slide 29

Slide 29 text

29 追加ボタンを押し、登録されるとシークレットキーのダウンロードを促すポップアップが出るので、ダウンロードします。 ConoHa VPSにサーバーを作成する

Slide 30

Slide 30 text

30 追加ボタンを押す前に、深呼吸して確認しましょう。 - リージョン : 日本 - VPS割引きっぷ : 利用しない - プラン : 2GB 1,848円 - OS : Ubuntu 20.04 ←注意！最新ではありません！ ※Ruby on Railsは選ばないで下さい！ ※最新のUbuntu22.04は選ばないで下さい！ - rootパスワード : 任意 - ネームタグはそのままで大丈夫です ConoHa VPSにサーバーを作成するここを間違えるとだいぶ後になってからやり直しになります！！

Slide 31

Slide 31 text

31 ConoHa VPSにサーバーを作成するここまでやったら画面右側の追加をクリックします。作成後にConoHa VPSの管理画面に遷移します。サーバリストに作成したVPSがあるのを確認します。

Slide 32

Slide 32 text

32 DEMOタイム

Slide 33

Slide 33 text

33 作業これから15分後まで各自で作業をしましょう。わからない事があったら、【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・サーバーの追加・Ubuntu ・2GB ・ポートの制限・シークレットキーの保存確認・Ubuntuのサーバーがができたら OK！

Slide 34

Slide 34 text

34 休憩タイム

Slide 35

Slide 35 text

35 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 36

Slide 36 text

36 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスするなぜVSCodeを使用するのか VSCodeを使用しない場合、以下のような作業が発生します。 - コンソール画面に入りコマンドラインで操作する必要がある - 手間が発生する - コマンドの入力間違いで作業が思うように進まない - viなどの知識が必要 - 修正箇所を探すのが大変

Slide 37

Slide 37 text

37 なぜVSCodeを使用するのか vSCodeを使用した場合、以下のようなメリットがあります。 - GUIで楽に操作できる - 自動でインデントや補完をしてくれるので、ファイルの中身を編集するのが楽 - 拡張機能を入れて自分好みにカスタマイズできる VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 38

Slide 38 text

38 これから行う具体的な手順 1. VSCodeに拡張機能 Remote-SSH をインストールする 2. VSCode Remote-SSH の接続設定 a. SSH Key を権限変更する b. VSCode Remote-SSH に接続設定を追加する VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 39

Slide 39 text

39 ① VSCodeにRemote-SSHをインストールする VSCodeの拡張機能の検索画面(Crt+Shift+X)からRemote-SSHを検索してインストールします。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 40

Slide 40 text

40 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールするインストールが完了するとVSCodeの左のアイコン一覧にRemote-SSH用のアイコンが表示されます。

Slide 41

Slide 41 text

41 DEMOタイム

Slide 42

Slide 42 text

42 作業これから5分後まで各自で作業をしましょう。わからない事があったら、【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・VSCodeにRemote-SSHをインストールする確認・SSH接続のアイコンが表示されたら OK

Slide 43

Slide 43 text

43 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする Mac用クリックすると動画が始まります。

Slide 44

Slide 44 text

44 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスするクリックすると動画が始まります。

Slide 45

Slide 45 text

45 作業これから10分後まで各自で作業をしましょう。わからない事があったら、【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・SSH Key を権限変更する・VSCode Remote-SSH に接続設定を追加する確認・接続ができたらOK！画面下部のターミナルは root@160-251-53-88:~# のようになっていますか？ (IPアドレスは各自違います )

Slide 46

Slide 46 text

46 Webアプリフレームワークについて

Slide 47

Slide 47 text

47 Web アプリケーションフレームワークナニソレ？ Webアプリフレームワークについて

Slide 48

Slide 48 text

48 そもそもフレームワークとは？フレームワーク＝何らかの「型」や「枠組み」 - 例：問題解決のフレームワークとは？ →問題を解決するための型（決まりきった手順） Webアプリフレームワークについて

Slide 49

Slide 49 text

49 Webアプリケーションフレームワークとは？ - 効率よくWebアプリケーション開発を行うための型・枠組み - 以降は略して、フレームワークにします Webアプリケーションフレームワークについて

Slide 50

Slide 50 text

50 フレームワークを使うとなぜ効率が良いのか？そのフレームワークに用意されたルールやテンプレートに沿って開発できるため、作業効率が向上します。また、フォルダ構造やライブラリについても用意されたものを使えるため、プログラムの分割に迷うことが少なくなります。 Webアプリケーションフレームワークについて

Slide 51

Slide 51 text

51 なぜ枠組みが作られたのか？つまり、 - みんなが必要になりそうな部分が、あらかじめ用意されている - 部分的な提供ではなく、全体的に面倒を見てくれる - 道筋が用意されているので、それに沿うことである程度セキュリティ対策ができる。 - メンバー間のズレが減って開発しやすいただし、 - 一から全部作るのに比べて、自由度は低い引用 - https://wa3.i-3-i.info/word12470.html - https://qiita.com/Jxck_/items/ec8e928f69d099b25764 Webアプリケーションフレームワークについて

Slide 52

Slide 52 text

52 Ruby on Railsとは？ 52

Slide 53

Slide 53 text

53 Ruby on Railsとは？ 2004年に、デンマークのプログラマであるデイヴィッド・ハイネマイヤー・ハンソン（通称 DHH）氏によって、Rubyのフレームワークとして作られました。エンジニアの間では縮めて Rails（またはRoR）と呼ばれることも多く、簡単なコードで Webアプリケーションの開発ができるように設計されています。引用：https://hnavi.co.jp/knowledge/blog/ruby-on-rails/ Ruby on Railsとは

Slide 54

Slide 54 text

54 Ruby on Railsの特徴 Ruby on Railsは、「MVCアーキテクチャ」に基づいて構築されたフレームワークです。それぞれ、Model（モデル）、View（ビュー）、 Controller（コントローラ）の頭文字をとって名付けられています。引用：https://hnavi.co.jp/knowledge/blog/ruby-on-rails/ Ruby on Railsの特徴

Slide 55

Slide 55 text

55 MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする MVCパターンについて 55

Slide 56

Slide 56 text

56 MVCパターンの特徴 MVCパターンは多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっておりこれに従って実装するので（比較的）悩まないで済む注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある 56 MVCパターンの復習

Slide 57

Slide 57 text

57 処理の流れをMVCに沿って見てみよう 57

Slide 58

Slide 58 text

58 ECショップから服の一覧データを取得したい場合の例 58 処理の流れをMVCに沿って見てみよう服の一覧を見たい

Slide 59

Slide 59 text

59 ECショップから服の一覧データを取得したい場合の例 59 処理の流れをMVCに沿って見てみよう服の一覧を見たい Response GET /clothes 服の一覧ページをレスポンスで返す Request

Slide 60

Slide 60 text

60 ECショップから服の一覧データを取得したい場合の例この中身をもっと詳細に見てみよう 60 処理の流れをMVCに沿って見てみよう服の一覧を見たい Response GET /clothes 服の一覧ページをレスポンスで返す Request

Slide 61

Slide 61 text

61 Model ECショップから服の一覧データを取得したい場合の例 61 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller

Slide 62

Slide 62 text

62 Model ECショップから服の一覧データを取得したい場合の例 62 処理の流れをMVCに沿って見てみよう Route DB View ① Controller /clothesを元にControllerに遷移します ② ③ ④ ⑤ ⑥ ⑦

Slide 63

Slide 63 text

63 Model ECショップから服の一覧データを取得したい場合の例 63 処理の流れをMVCに沿って見てみよう Route DB View ② ③ ④ ⑤ ⑥ ⑦ Controller Controller側で「服の一覧を取得する」処理を呼び出します ①

Slide 64

Slide 64 text

64 Model ECショップから服の一覧データを取得したい場合の例 64 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller DBからデータを取得したいのでモデルに処理が移ります

Slide 65

Slide 65 text

65 Model ECショップから服の一覧データを取得したい場合の例 65 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller Model経由でDBから必要なデータを取得します

Slide 66

Slide 66 text

66 Model ECショップから服の一覧データを取得したい場合の例 66 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller 受け取ったデータを Controllerに返します

Slide 67

Slide 67 text

67 Model ECショップから服の一覧データを取得したい場合の例 67 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller データをViewに渡してレスポンスで返す形に加工します

Slide 68

Slide 68 text

68 Model ECショップから服の一覧データを取得したい場合の例 68 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller Controllerからレスポンスをクライアントに返します

Slide 69

Slide 69 text

69 Model ECショップから服の一覧データを取得したい場合の例 69 処理の流れをMVCに沿って見てみよう Route DB View ① ② ③ ④ ⑤ ⑥ ⑦ Controller MVCパターンの流れ

Slide 70

Slide 70 text

70 MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする MVCパターンについてのおさらい 70

Slide 71

Slide 71 text

71 この後のカリキュラムでもMVCを意識して進めていこう！

Slide 72

Slide 72 text

72 休憩タイム順調ならここでお昼休み

Slide 73

Slide 73 text

73 Rails をはじめよう

Slide 74

Slide 74 text

74 『Rails をはじめよう』について『Railsをはじめよう』はRuby言語向けのWebアプリケーションフレームワーク『 Ruby on Rails』向けの定番入門教材です。 Railsをはじめよう https://railsguides.jp/getting_started.html

Slide 75

Slide 75 text

75 これから作るもの今日はブログサービスを作ります。ブログサービス

Slide 76

Slide 76 text

76 これから作るもの記事一覧ページブログサービス記事一覧新規作成ボタン

Slide 77

Slide 77 text

77 これから作るもの記事作成ページブログサービス

Slide 78

Slide 78 text

78 これから作るもの記事ページブログサービス編集も削除もできる

Slide 79

Slide 79 text

79 前置き１章〜２章こちらは先ほど学んだ内容とほぼ同じなので、飛ばします。３章演習形式。環境の差異などの関係で今回は『 Railsをはじめよう』とは若干異なる形で進めます。４章から７章まで演習方式。『Railsをはじめよう』の内容に沿って進めます。８章以降今日の演習では扱いません。この講習の進め方

Slide 80

Slide 80 text

80 第３章 Railsプロジェクトを新規作成する Railsアプリケーションの雛形を生成します。この章でやることこの章では『Railsをはじめよう』の内容とは若干異なる手順を踏みます。

Slide 81

Slide 81 text

81 第３章 Railsプロジェクトを新規作成するそれではRailsの環境構築のためのコマンド入力を行います。環境構築前の確認画面下部にターミナルは表示されてますか？表示されていない場合は『ターミナル→新しいターミナル』から開きましょう『ターミナル』を選択しましょう SSH接続になっているはずですここにコマンドを入力します

Slide 82

Slide 82 text

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言語で実装されています。　

Slide 83

Slide 83 text

83 第３章 Railsプロジェクトを新規作成する Citing for cache lock: Could not get lock〜と表示される → こちらを参照 dpkg was interrupted〜と表示される → こちらを参照 Failed to fetch〜と沢山エラーが出る → apt-get update をしてから再実行してみて下さいよくあるトラブル

Slide 84

Slide 84 text

84 第３章 Railsプロジェクトを新規作成する以下のコマンドを入力していきましょう Railsのインストール gem install -v 7.0.3 rails 補足 rubyではライブラリのことをgemと呼びます。 gemはgemコマンドでインストールすることができます。複数のgemを管理するのに便利なbundlerというツールもあります。 apt,snap,npm,yarn,gem,bundler…今日だけで6つも似たようなツールが登場しました。

Slide 85

Slide 85 text

85 第３章 Railsプロジェクトを新規作成する railsコマンドを使うための準備をします。ファイルの一覧を開きましょう。 Railsコマンドのパスを通す ① 『フォルダーを開く』ボタンを押す。 ② ダイアログが表示されるので、『 /root/』になっていることを確認する。 ③ OKを押す。 ※確認ダイアログが出たら「信頼する」をクリックして下さい

Slide 86

Slide 86 text

86 第３章 Railsプロジェクトを新規作成する railsコマンドの場所を記憶させます。 Railsコマンドのパスを通す ① ファイルの一覧から『 .bashrc』を開く。 ② 最後の行にexport PATH=$PATH:~/.gem/binを追記する。 ③ 保存する。(WindowsならCtrl+S、MacならCommand+S) ④ターミナルで以下のコマンドを入力。 source ~/.bashrc

Slide 87

Slide 87 text

87 第３章 Railsプロジェクトを新規作成する railsコマンドが使えるようになりました。確認してみましょう。 Railsのバージョン確認 rails --version バージョンは表示されましたか？ Rails 7.0.3と正しく表示されていますか？

Slide 88

Slide 88 text

88 DEMOタイム

Slide 89

Slide 89 text

89 作業これから15分後まで各自で作業をしましょう。わからない事があったら、【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・環境構築前の確認・関連ツールのインストール・Railsのインストール・Railsコマンドのパスを通す・Railsのバージョン確認確認・rails versionでRails 7.0.3と表示されたらOK

Slide 90

Slide 90 text

90 第３章 Railsプロジェクトを新規作成する Railsにはアプリケーションの雛形を作る便利なコマンドがあります。以下のコマンドを叩いてみましょう。ブログアプリケーションを作成する rails _7.0.3_ new blog cd blog コマンドが終わったら以下のコマンドでディレクトリを移動します。

Slide 91

Slide 91 text

91 第３章 Railsプロジェクトを新規作成する少し4章の範囲に入ってしまいますが、さっそく Webアプリケーションを起動してみましょう。 /root/blog ディレクトリで、以下のコマンドを実行します。実行してみる rails server コマンドを実行して10秒ぐらい経ってからブラウザで以下の URLを開いてみましょう。 http://127.0.0.1:3000/ 開くのが早すぎるとエラーがでることがあります。エラーが出る場合は時間をおいて開き直しましょう。 ※ localhostは127.0.0.1の別名です

Slide 92

Slide 92 text

92 第３章 Railsプロジェクトを新規作成する正しくインストールされていれば、以下の画面が表示されるはずです。実行してみる

Slide 93

Slide 93 text

93 DEMOタイム

Slide 94

Slide 94 text

94 作業 10分後まで各自で作業をしましょう。わからない事があったら、【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・ブログアプリケーションを作成する・実行してみる確認・http://127.0.0.1:3000/にrailsの初期画面ができたらOK！

Slide 95

Slide 95 text

95 休憩タイム

Slide 96

Slide 96 text

96 第４章 Hello, Rails! ここから先は『Railsをはじめよう』の内容に沿って進めます。 4.1 Webサーバーを起動する Webサーバーの起動方法を学びます。 4.2 Railsで「Hello」と表示する新しいページの追加方法を学びます。この章でやること(1/2) 作業タイム

Slide 97

Slide 97 text

97 第４章 Hello, Rails! 技術サイトや書籍では、コマンドを紹介する際に先頭に $マークを付けることがあります。【4.1 補足】＄マークについて $ bin/rails server これは「このコマンドを実行して下さい」という意味です。 (一般ユーザーの場合は$、rootユーザーの場合は#記号になります) $マーク自体は入力しないで下さい。 bin/rails server ↑自分で入力する時は$は不要。

Slide 98

Slide 98 text

98 第４章 Hello, Rails! rails serverで起動したサーバーは Ctrl + Cキーで止めることができます。【4.1 補足】サーバーの停止について

Slide 99

Slide 99 text

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を表示します。記事一覧ページのルーティングの例

Slide 100

Slide 100 text

100 DEMOタイム

Slide 101

Slide 101 text

101 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・Webサーバーを起動する・Railsで「Hello」と表示する確認・http://localhost:3000/articles を表示して・「Hello, Rails!」が返ってきたらOK！ (文章は好きに変更しても OKです)

Slide 102

Slide 102 text

102 第４章 Hello, Rails! 4.3 アプリケーションのHomeページを設定する URLの変更方法を学びます。この章でやること(2/2) 作業タイム

Slide 103

Slide 103 text

103 DEMOタイム

Slide 104

Slide 104 text

104 作業 5分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・アプリケーションの Homeページを設定する確認・http://localhost:3000 を表示して・「Hello, Rails!」が返ってきたらOK！ (文章は好きに変更しても OKです)

Slide 105

Slide 105 text

105 第５章オートロードこの章ではコードを書きません。 5 オートロード Railsが暗黙で提供してくれるオートロードの仕組みについて学びます。この章でやること

Slide 106

Slide 106 text

106 第５章オートロード RailsはRubyを利用するWebアプリケーションフレームワークですが、標準の Ruby言語では利用できない様々な言語拡張が最初から用意されています。 Railsをはじめて学ぶRubyユーザーはそれらの言語拡張に遭遇すると「あれ？なんでこのコードはエラーにならないの？」と不思議に感じるかもしれません。それらの多くは『Active Support』というライブラリで実現していますので、気になる人は以下の資料を参考にして下さい。 Active Support コア拡張機能 https://railsguides.jp/active_support_core_extensions.html 【5.1 補足】Railsによる言語拡張

Slide 107

Slide 107 text

107 第６章 MVCを理解する 6.1 モデルを生成する記事のデータを表現するためのモデルを作成します。 6.2 データベースマイグレーションデータベースに変更内容を反映します。この章でやること(1/3) 作業タイム

Slide 108

Slide 108 text

108 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ MVC ユーザーがサーバーにリクエストを投げてから画面に表示されるまでの流れやってること ① ユーザーがサーバーにリクエストを投げると、Routeがそれを受け取ります。 ② RouteはURLに応じたControllerを呼び出します。 ③ Controllerは必要に応じてModelに処理を依頼します。 ④ Modelはデータベースとのやり取りを行います。 ⑤ ControllerはModelを参照します。 ⑥ ControllerはViewをもとにHTMLを生成します。 ⑦ Controllerは生成したHTMLをユーザーに返却します。

Slide 109

Slide 109 text

109 第６章 MVCを理解する Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する【6.1 補足】MVCパターンとは

Slide 110

Slide 110 text

110 第６章 MVCを理解する DB(データベース)のスキーマ(構造)の管理は、DBの管理ツールを利用してコマンドや GUIで直接操作することもできます。しかしRailsではそのようなやり方は推奨しておらず、原則マイグレーションだけを使って管理します。マイグレーションを利用することによって以下のようなメリットがあります。 ● 同じスキーマのDBを簡単に作成できるようになる。 ● 特定のDBに依存しない書き方のため、別の DBへの乗り換えが容易になる。 ● 古いスキーマのDBを差分更新できる(最初から作り直さなくて良い)。 ● スキーマの定義をもとに戻すことができる。【6.2 補足】マイグレーションの何が嬉しいのか

Slide 111

Slide 111 text

111 DEMOタイム

Slide 112

Slide 112 text

112 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・モデルを生成する・データベースマイグレーション確認・bin/rails db:migrateを実行して CreateArticles: migrated と表示されたらOK

Slide 113

Slide 113 text

113 第６章 MVCを理解する 6.3 モデルを用いてデータベースとやりとりするデータの作成や表示をやってみます。この章でやること(2/3) 作業タイム

Slide 114

Slide 114 text

114 DEMOタイム

Slide 115

Slide 115 text

115 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・モデルを用いてデータベースとやりとりする確認・railsコンソールでArticle.allを実行して　レコードが1件返ってきたらOK

Slide 116

Slide 116 text

116 第６章 MVCを理解する 6.4 記事のリストを表示するデータベースの内容がアプリケーションに表示されるようにします。この章でやること(3/3) 作業タイム

Slide 117

Slide 117 text

117 DEMOタイム

Slide 118

Slide 118 text

118 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・記事のリストを表示する確認・http://localhost:3000 を表示して・記事一覧が返ってきたら OK！

Slide 119

Slide 119 text

119 休憩タイム

Slide 120

Slide 120 text

120 第７章 CRUDの重要性 7.1 記事を1件表示する記事の詳細ページを作成します。この章でやること(1/5) 作業タイム

Slide 121

Slide 121 text

121 第７章 CRUDの重要性 Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）の略。 Controllerのアクションはこれらのいずれかを担当している。【7.0 補足】CRUDとは名前操作 RESTで言い換えると Create 作成 POST Read 読み取り GET Update 更新 PUT/PATCH Delete 削除 DELETE

Slide 122

Slide 122 text

122 DEMOタイム

Slide 123

Slide 123 text

123 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・記事を1件表示する確認・http://localhost:3000/articles/1 を開いて記事が表示されたら OK

Slide 124

Slide 124 text

124 第７章 CRUDの重要性 7.2 リソースフルルーティング URLのルーティングについて詳しく学びます。この章でやること(2/5) 作業タイム

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

126 第７章 CRUDの重要性一覧ページ【7.2 補足】各アクションの役割 □□□□■□□□□■ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□■□□□□■ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□■□□□□■ 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 □□□□■のブログ index

Slide 127

Slide 127 text

127 第７章 CRUDの重要性記事ページ【7.2 補足】各アクションの役割 □□□□■□□□□■ □□□□■のブログ show 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

Slide 128

Slide 128 text

128 第７章 CRUDの重要性記事投稿ページ【7.2 補足】各アクションの役割新しい記事を投稿するタイトル本文写真投稿する create を呼び出すボタン new

Slide 129

Slide 129 text

129 第７章 CRUDの重要性記事編集ページ【7.2 補足】各アクションの役割新しい記事を投稿するタイトル本文写真更新する update を呼び出すボタン edit 削除する destroy を呼び出すボタン

Slide 130

Slide 130 text

130 DEMOタイム

Slide 131

Slide 131 text

131 作業 5分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・リソースフルルーティング確認・http://localhost:3000/articles/1 を開いて記事が表示されたら OK (挙動に変化はないはずです )

Slide 132

Slide 132 text

132 第７章 CRUDの重要性 7.3 記事を1件作成する記事の作成画面を作ります。この章でやること(3/5) 作業タイム

Slide 133

Slide 133 text

133 第７章 CRUDの重要性【7.3 補足】Strong Parametersの何が嬉しいのか Webアプリケーションはユーザーからの入力を利用することが多いです。 - 例えば会員制サイトでログインを行う場合 - ユーザーからID/パスワードを受け取る - しかしながら、ユーザーは善意のユーザーばかりではない

Slide 134

Slide 134 text

134 第７章 CRUDの重要性たとえば以下のようなテーブルがあったとします。 admin_flagの欄に1が格納されていると管理者向け機能が使えるとします。【7.3 補足】Strong Parametersの何が嬉しいのか id name admin_flag 42 山田太郎 0 admin_flag=1 :管理者 admin_flag=0 :一般ユーザー

Slide 135

Slide 135 text

135 第７章 CRUDの重要性ユーザーの登録画面は以下のような構成です。一般ユーザーが自分の意思でadmin_ﬂagを編集して管理者権限を変更できないよう HTMLを作成します。【7.3 補足】Strong Parametersの何が嬉しいのか山田太郎作成名前ユーザー登録

Slide 136

Slide 136 text

136 第７章 CRUDの重要性 Strong Parametersを使わずにUser.createメソッドにパラメータを渡してみます。どのような問題があるでしょうか。【7.3 補足】Strong Parametersの何が嬉しいのか def create User.create(params[:user]) def

Slide 137

Slide 137 text

137 第７章 CRUDの重要性ユーザーはブラウザ上に表示された HTMLやJavascriptの内容を自由に編集することができます。adminのinputタグを追加されたり、リクエストを細工されると、前ページのソースだと簡単に admin_ﬂag=1に変更できてしまい、管理者権限が奪われてしまいます。 Strong Parameterが設定されていれば、事前に指定された項目以外をフィルタリングをすることができます。ユーザーから送られてくるデータを信用してはいけない

Slide 138

Slide 138 text

138 DEMOタイム

Slide 139

Slide 139 text

139 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・記事を1件作成する確認・http://localhost:3000/articles/new から記事が作成できたら OK

Slide 140

Slide 140 text

140 第７章 CRUDの重要性 7.4 記事を更新する記事の更新画面を作ります。この章でやること(4/5) 作業タイム

Slide 141

Slide 141 text

141 DEMOタイム

Slide 142

Slide 142 text

142 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・記事を更新する確認・http://localhost:3000/articles/1/edit から記事が編集できたら OK

Slide 143

Slide 143 text

143 第７章 CRUDの重要性 7.5 記事を削除する記事の削除機能を実装します。この章でやること(5/5) 作業タイム

Slide 144

Slide 144 text

144 DEMOタイム

Slide 145

Slide 145 text

145 作業 10分後まで各自で作業をしましょう。わからない事があったら、遠慮なく【質問】をつけてコメントしてください。それ以外のコメントも大丈夫です! やること・記事を削除する確認・記事が削除できたら OK

Slide 146

Slide 146 text

146 おわり困ってる人がいたらお手伝いしましょう。それでも手が空いたら、８章以降も挑戦してみましょう。 ※8章は明日の『DB概論』『DB設計・実践』を学んだ後でないと難しいです。　理解するのは後回しでいいかもしれません。 —- 終わったらConohaのサーバーを忘れず削除して下さい。もし早めに終わったら

Slide 147

Slide 147 text

147 おわり今日の演習ではRuby on Railsで表示、登録、更新、削除の機能を持つブログアプリケーションを作りました。世の中にある大半のWebアプリケーションはこれらの操作の組み合わせで出来ています。おつかれさまでした

Slide 148

Slide 148 text

148 以上で講義は終了です Webアプリフレームワーク入門研修は終了です！お疲れ様でした！