GTB2020 Web アプリフレームワーク入門/REST API 入門 スライド/ GTB2020 Web App Framework and REST API Introduction

1. 1 GTB2020 Webアプリフレームワーク入門 REST API 入門
2. 2 GMOペパボ株式会社 EC事業部 グーペグループ 2017年 入社 遠藤 太徳(endu) 趣味 ゲーム、自炊、ピアノ(を最近はじめました!) 講師紹介
3. 3 GMOペパボ株式会社 EC事業部 カラーミーショップグループ 2014年 入社 牧野 弘幸 (kumak1) 趣味 ゲームを作る・絵を描く 講師紹介
4. 4 GMOペパボ株式会社 ホスティング事業部 2018年 入社 高橋 邦彦 (kunit) 趣味 旅行、カメラ 講師紹介
5. 5 GMOペパボ株式会社 ホスティング事業部 2019年 入社 望月 眞喜(mochiko) 趣味 F1観戦、クロマニヨンズ、 カレー（を食べる） 講師紹介
6. 6 GMOペパボ株式会社 ホスティング事業部 2018年 入社 手島 尚人（てっしー／@tosite） 趣味 ドライブ・キャンプ・料理 講師紹介
7. 7 講義の進め方について
8. 8 スケジュールと担当について 講義の進め方について 1日目(2020/05/12 14:00〜19:00) • 座学 2時間30分 (14:00〜16:30) kumak1 • Webについて • ページが表示されるまで • Webアプリケーションについて • Webアプリケーションを作成するにあたって • 開発環境構築 2時間30分 (16:30〜19:00) endu • ConoHa VPSにLaravelを導入する • VSCodeの拡張機能Remote - SSHでConoHa VPSにアクセスする
9. 9 講義の進め方について スケジュールと担当について 2日目(2020/05/12 10:00〜19:00) • Laravelについて 1時間 (11:00〜11:45) kumak1 • Laravelとは? • Laravelの便利機能 • Laravelのディレクトリ構成 • LaravelをMVCパターンで考えてみる • Laravelを使ってAPIを作成する (12:00〜19:00) endu • アプリケーションをセットアップしよう • アプリケーションをブラウザから見てみよう • APIのCRUDを実装しよう • Validationを実装しよう • ORM のよもやま話
10. 10 講義の進め方について 基本はzoomのチャットに書き込んでください。 例 ) 【質問】***と書いてみたのですが、動かないです。 【質問】*** って、どういう意味でしょうか? 【質問】を見てサポート講師が質問にチャット上で答えます。 質問方法について
11. 11 作業パートの進捗を確認する為に皆さんの反応を伺う時があります。その時はzoomの 「手を挙げる」機能でボタンを押してください。反応を確認できたら「手を下ろしてく ださい」と言うので「手を降ろす」ボタンを押してください。 講義をスムーズに進める為、ご協力お願いします。 リアクションについて 講義の進め方について
12. 12 この画像が載っているスライドがある時は10分休憩です。 この講義ではこまめに休憩を入れて進めていきます。 休憩について 講義の進め方について
13. 13 1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。 このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。 手を動かす作業でのスライドについて 講義の進め方について 「作業」がついているスライドは実際に手を動 かしながら行うパートになります。実際にコー ディングをしたり、設定したりする作業で出て きます。 「確認」がついているスライドは動作を確認し たり、返ってきた結果を確認します
14. 14 DEMOスライドの出ている時は、講師が画面見せながら実際にDEMOを行います DEMOスライドと作業スライドについて 講義の進め方について
15. 15 作業スライドが出ている時は、皆さんに手を動かして作業をして貰います。 DEMOスライドと作業スライドについて 講義の進め方について
16. 16 座学
17. 17 講師担当: kumak1 資料作成担当 : kunit
18. 18 Webについて Webについておさらいをしましょう
19. 19 Web の関連技術はとても扱いやすく、様々なところで利用されています。 - Chrome や Edge などのブラウザで企業やサービスのWebページを見る - オーソドックスな使われ方 - PC・スマホ・テレビといった様々なデバイスから見ることができる - スマホのゲームアプリで通信を行いながら協力プレイをする - ブラウザ以外の様々なアプリもデータのやり取りに利用している Webについて(おさらい)
20. 20 クライアントとサーバー サービスを提供する側をサーバー、サービスを受ける側をクライアントと呼びます。 (一般的な言葉になりつつありますね) - クライアントの代表例がブラウザ - Google Chrome - Microsoft Edge、Internet Explorer - Apple Safari - Mozilla Firefox - サーバーとして利用されている代表的なもの - Apache HTTP Server - Nginx (エンジンエックス) - Microsoft IIS (Internet Information Services) - LiteSpeed Web Server
21. 21 URL と HTTP Web では次の2つがとても重要な要素となります。 - URL (Uniform Resource Locator) - 「欲しい情報がどこにあるのか」という場所を明確に示す - HTTP (HyperText Transfer Protocol) - URL で示した場所に対して「情報をどうしたいか」を通信で指示する 上記の2つをこれ以降もう少しだけ深掘りします。
22. 22 URLとは URL を使うことで「どこになにがあるか」を簡単に示すことができます。 - URL がなかったら - あの企業サーバーの◦◦というカテゴリ下の△△というサブカテゴリをみて！ - とても大変 - URL があったら - https://example.co/◦◦/△△/ をみて！ - 場所を指し示すのにシンプルなルールを提供できたので、利用するのがとても 簡単になった
23. 23 プロトコルとは プロトコルとは通信する際の手順や規格を定めた規約のこと。 プロトコルに従うことで、サーバーとクライアントがネットワークを通じてやり取りでき ます。 - クライアントがサーバーに決められた命令 (1つもしくは複数) を送信すると結果が返る - Web では URL で示された場所に対して HTTP というプロトコルでやり取りを行う
24. 24 HTTP の良さ HTTP はそれまであったプロトコルよりかなり単純なものとなっています。 - 以前のプロトコル - SMTP や POP3/IMAP4 (メールで使用) - FTP (ファイル転送で使用) 等 - 複数の命令を組み合わせて目的の動作を行う - HTTP - (基本的に) 1つの命令で目的を果たせる - プロトコルが単純なため、サーバーやクライアントを実装しやすい HTTP を利用したプロダクトや事例が爆発的に増えました。
25. 25 14:25まで休憩
26. 26 ページが表示されるまで Webページが表示されるまでになにが起きているか、説明 していきます。
27. 27 リクエストとレスポンス クライアントとサーバーとのやり取りに対しての用語を説明します。 - リクエスト - クライアントからサーバーに接続し、サービスを提供してもらうための処理を 依頼することを「リクエストを投げる」という - レスポンス - クライアントからのリクエストを受けて、サーバーで処理を行った結果をクラ イアントに渡すことを「レスポンスを返す」という
28. 28 HTTP のやり取り 例えば、Yahoo! JAPAN のページを表示するまでを考えてみましょう。 - ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、 トップページのURL に対してリクエストを投げる - Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして HTML ファイルを返す - ブラウザが HTML ファイルを解析すると、CSS や JavaScript、画像といったファイ ルを追加で取得する必要があることが判明する - ブラウザからWebサーバーに 必要なものをもらうために投げる - サーバーからブラウザにリクエストされたものを返す - 以下これの繰り返し
29. 29 Yahoo! JAPAN のページが見えるまで(その1) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト
30. 30 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
31. 31 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 GET https://www.yahoo.co.jp/ HTTP/1.1
32. 32 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 GET https://www.yahoo.co.jp/ HTTP/1.1 リクエスト メソッド URL HTTPの バージョン
33. 33 リクエストメソッド リクエストメソッドは、URLに対してどのような処理をしたいのかを示したものです。 - GET - 情報を取得 - 副作用はないように - POST - 情報を変更 - PUT - 情報を置換 - PATCH - 情報を一部置換 - DELETE - 情報を削除
34. 34 Yahoo! JAPAN のページが見えるまで(その3) Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 レスポンス
35. 35 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none <!DOCTYPE html><html lang="ja">... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。
36. 36 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none <!DOCTYPE html><html lang="ja">... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 HTTP/1.1 200 OK
37. 37 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none <!DOCTYPE html><html lang="ja">... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 HTTP/1.1 200 OK HTTPの バージョン ステータス コード ステータス テキスト
38. 38 ステータスコード ステータスコードは、サーバーの処理結果を示したものです。 3桁の数値でどのような状態になったかを表します。 - 200番台は処理が成功したことを表す - 200 OK - 201 Created - 300番台は追加の処理が必要であることを表す - 301 Moved Permanently - 302 Found - 307 Temporary Redirect - 308 Permanent Redirect
39. 39 ステータスコード - 400番台はリクエストに問題があったことを表す - 400 Bad Request - 401 Unauthorized - 認証が必要 - 403 Forbidden - 404 Not Found - 500番台はサーバー側に問題があったことを表す - 500 Internal Server Error - 503 Service Unavailable
40. 40 ドキュメントルート Web サーバーに関連する用語の補足説明。 - ドキュメントルート - URL (https://<サーバー名>/) のトップ部分と対応するサーバー上のディレクトリのこと （≒ドキュメントルートにファイルを置くとWebに公開される） - Linux をWebサーバーにセットアップすると /home/www/html がドキュメントルートになる （設定ファイルで変更可能） - レンタルサーバーでは1つのサーバーを複数のお客様が利用するので、お客様のドメイン毎 にドキュメントルートを設定している ドキュメントルートにファイルを無造作に置くと、Webブラウザから簡単にアクセスされてしまう。 このため、見られてはいけないデータは /home/www/data などのドキュメントルート外のディレクトリ に置くようにしましょう。（情報漏えいの一部はドキュメントルートに誤ってファイルを置いたことで発生しま す。）
41. 41 安全な通信をするために リクエストもレスポンスも単なるテキストなので、そのままでは簡単に中身を見られてし まいます。 - TLS (Transport Layer Security) - 通信相手の認証、通信の暗号化を行うプロトコル - 以前は SSL (Secure Sockets Layer) と呼ばれていた - SSL の古いバージョンで使われていた暗号方式が破られてしまったため、 SSL の上位規約として TLS が作られた - SSL と TLS をまとめて SSL と呼ばれることも多い - HTTPS - SSL/TLS プロトコルで接続の上で HTTP 通信を行うこと - SSL/TLS が使われていない状態だとURLは http://〜 - SSL/TLS が使われている状態では https://〜 になる
42. 42 特定の誰かだけ利用させたい 提供するコンテンツによっては、会員だけが使えるとか、特定の人だけが使えるといった 制限をしたいことがよくあります。 - 認証 (Authentication) - 誰であるかを確認して、許可された人以外は許さない - （パスポート持ってるからあなたはNさん。Nさんなら顔パス） - （Twitter へのログインなど） - 認可 (Authorization) - 誰であるかに応じて、どのような権利があるかをコントロールする - （新幹線のチケット持ってるので、乗っていいですよ） - （Twitter 連携アプリの OAuth 2.0 など） 日本語でも似たような用語だし、英語でも両方とも略すと Auth になるので、混同される 事が多いので注意しましょう。
43. 43 14:55まで休憩
44. 44 Webアプリケーションに ついて Webアプリケーションについて、学んでいきましょう
45. 45 Web アプリケーションを分類してみる Web アプリケーションとして提供するものは、大きく分けて次の2つがあります。 - Webページを表示するためのアプリケーション - サーバーからは HTML, JavaScript, CSS, 画像などを返す - 古くから提供されてきたもの - スマホ等から利用されるアプリケーション - スマホアプリ等からアクセスされ、データの取得や更新を行う - 「データをどうやり取りをするか」という決まりをアプリケーション毎に決め て、クライアントとサーバーでやり取りを行う - この決まりのことを API (Application Programming Interface) という 今回の講義ではこの API の実装方法を学びます。
46. 46 RESTful API API の設計方法にはいくつかの流儀があります。（RPC や SOAPなど） - Web API は SOAP (Simple Object Access Protocol) などで提供されていた - システム毎に複雑な仕様書 (XMLの構造など) のやり取りが必要 - 作成するシステムが複雑になりがち - RESTful API - URL が示すものに対して HTTP のメソッドを使って単純にアクセスする - 仕様がシンプルになるので、複数のシステム連携が比較的容易になる 昨今は RESTful API で提供するものが多いです。
47. 47 REST という考え方 Web でシステムを構築するにあたって、どのようにすると効率がいいのかという考え方 が HTTP の規約を策定したメンバーの一人である Roy Fielding によって提唱された。 - REST (REpresentational State Transfer) - 拡張性のある Web システムを構築するためのアーキテクチャスタイル (設計の流儀や様式、作法) - クライアントとサーバーの間を URL と 統一インタフェース (リクエストメソッド) を使って、ステートレス にやり取りすることにより拡張性を高めるようにでき るとした考え - Web および HTTP そのものの原則と言える
48. 48 CRUD という考え方 CRUD とは、データ操作で使う4つの基本機能のそれぞれの頭文字をとったものです。 これを RESTful API にマッピングすると以下の通りです。 - Create - データを生成する - POST <URL> - Read - データを読み取る - GET <URL> - Update - データを更新する - PUT <URL> or PATCH <URL> - Delete - データを削除する - DELETE <URL>
49. 49 返却されるデータの形式 通常のWebアプリケーションでは HTML や JavaScript・CSS などが返却されますが、 API ではそれとは違った形式でデータを返却します。 - パース - プログラムでデータ (文字列) 解析すること - API で扱うデータはプログラムで処理しやすい形式を選ぶ (HTML や単なる複数行テキストはパースしづらい) - パースしやすいデータ形式 - XML (Extensible Markup Language) - データに対して厳密にタグを付与したデータ形式 - JSON (JavaScript Object Notation) - JavaScript でそのまま利用可能で、その他言語でも扱いやすい - 今回の講義では JSON を取り扱う
50. 50 XML サンプルコードで比較 データ形式 HTML <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="text" name="key" value="value"> </form> </body> </html> { "key": "value" } <?xml version="1.0" encoding="utf- 8" ?> <key>value</key> JSON
51. 51 Webアプリケーションを 作成するにあたって Webアプリケーションを作成するにあたって、必要な知識 を説明します。
52. 52 フレームワークとは 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク（Web アプリケーションフレームワーク） - モノを作成する際、0 から全て作るのはとても大変 - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある） ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品
53. 53 パターン プログラムを設計・実装において「誰もが似た事をしているな」ということがしばしば起 こります。 - パターン - 似たアプリケーションを作成する場合、後々拡張・修正しやすい共通のやり方 が出てくる - 手法や手順に名前をつけ、エンジニア間で共通の語彙として会話ができるよう にしたモノ - アンチパターン - パターンは良いモノばかりではない - 「こういう風にすると良くないよ」と注意喚起するもの フレームワークはこのパターンを多く利用しており、その代表例がMVCパターンです。
54. 54 MVCパターン - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする
55. 55 MVCパターンの特徴 - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており、これに従って 実装するので (比較的) 悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある
56. 56 15:30まで休憩
57. 57 開発環境構築
58. 58 講師担当: endu 資料作成担当 : endu
59. 59 このパートで行う事 ①ConoHa VPSにLaravelを導入する ②VSCodeの拡張機能 Remote - SSHでConoHa VPSにアクセスする 開発環境の構築
60. 60 ConoHa VPSにLaravelを 導入する
61. 61 ConoHa VPSにLaravelを導入する https://qiita.com/Fendo181/items/3a6d77c2f4c7ac96c071
62. 62 リモート接続するためのディレクトリとファイルを生成する ※ここからの作業はMacの方はTerminal、Windowsの方はGit for Windowsで作業をしてください cd ~ #ホームディレクトリに移動 mkdir ~/.ssh #ディレクトリを生成する touch ~/.ssh/config #設定ファイルを作成する ls -l ~/.ssh/config 最初にシークレットキーを置いておくディレクトリと、リモートサーバーの接続する際に利用され る設定ファイルも生成しておきます。(※既にある場合はここはスキップして大丈夫です) ConoHa VPSにLaravelを導入する
63. 63 16:50 まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
64. 64 ConoHa VPSの管理画面に戻り「セキュリティ」から「SSH Key」を選択します。 ConoHa VPSにLaravelを導入する
65. 65 ConoHa VPSにLaravelを導入する イメージを作成する前に、最初に「SSH Key」からパブリックキーを登録し、シー クレットキーをダウンロードします。
66. 66 「パブリックキー」を押して登録します。登録されるとシークレットキーのダウンロードを 促すポップアップが出るので、ダウンロードします。 ConoHa VPSにLaravelを導入する
67. 67 シークレットキーをダウンロードしたら、先程作成した「.ssh」ディレクトリに移動させて おいてください。後ほど説明が出てきますが、シークレットキーが置いてある場所のパスを 指定できれば問題ないです。 ConoHa VPSにLaravelを導入する
68. 68 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
69. 69 ConoHa VPSにLaravelを導入する ※rootパスワードは一度設定すると変更ができないので必ずどこかにメモをしてく ださい。また、紛失した際にも確認する術がないため注意してください。
70. 70 ConoHa VPSにLaravelを導入する 先程作成したパブリックキーをオプションで指定してイメージを作成する
71. 71 ConoHa VPSにLaravelを導入する 作成後にConoHa VPSの管理画面に遷移します。 サーバリストに作成したVPSがあるのを確認します。
72. 72 ConoHa VPSにLaravelを導入する (ダッシュボード画面) (詳細画面) ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をクリックしてください。
73. 73 ConoHa VPSにLaravelを導入する
74. 74 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
75. 75 「コンソール」と書かれているボタンをクリックしてコンソールパネルを開きます。 ConoHa VPSにLaravelを導入する
76. 76 loginにはrootを指定してください。 Passwordには先程設定したrootパスワードを入力してください。 ConoHa VPSにLaravelを導入する
77. 77 MySQLのパスワードは後ほど、2日目のハンズオンパートで使うのでメモし ておいてください。 ConoHa VPSにLaravelを導入する
78. 78 ここまでできたら、Laravelがあるディレクトリに移動して、 インストールされているLaravelのバージョンを確認してみましょう。 下のコマンドを実行してConoHa VPSに入っているLaravelのバージョンを確認します。 ※(Vは大文字です) cd /var/www/html/laravel/ php artisan -V ConoHa VPSにLaravelを導入する
79. 79 ConoHa VPSにLaravelを導入する
80. 80 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
81. 81 16:30まで休憩
82. 82 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
83. 83 なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか? エディターを使わない場合 • コンソール画面に入りコマンドラインで操作 する為、手間が発生する • viの知識が必要 • 修正箇所を探すのが大変 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
84. 84 なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか? • GUIで楽に操作できる • 自動でインデントや補完をしてくれるの で、編集が楽 • 拡張機能を入れて自分好みにカスタマイ ズできる エディターを使う場合 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
85. 85 手元のPC環境 ConoHa VPS 上の環境 SSH 接続 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする Remote- SSH
86. 86 これから行う具体的な手順 ① VSCodeにRemote-SSHをインストールする ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する ③ VSCodeからConoHa VPSに接続する ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できるようにする VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
87. 87 ① VSCodeにRemote-SSHをインストールする VSCodeの拡張機能の検索画面(Crt+Shift+X)からRemote-SSHを検索してインストールします。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
88. 88 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールする インストールが完了するとVSCodeの左のアイコン一覧にRemote-SSH用のアイコンが表示されま す。
89. 89 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールする 歯車のアイコンをクリックして「.ssh/config」のパスを指定しましょう
90. 90 ConoHa VPSにLaravelを導入する DEMOを行います。
91. 91 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
92. 92 17:55まで休憩
93. 93 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する Host Conoha HostName {IPアドレス} User root Port 22 IdentityFile {秘密鍵が置いてあるパスを指定する} VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
94. 94 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する ConoHa VPSの管理画面に戻り、ネットワーク情報の【IPアドレス】を見て、設定ファイルに追記 します VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
95. 95 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する .sshディレクトリ配下に置いている場合、IdentityFileで指定するパスは以下のようになります。 IdentityFile ~/.ssh/シークレットキーの名前 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
96. 96 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する Host Conoha HostName {IPアドレス} User root Port 22 IdentityFile {秘密鍵が置いてあるパスを指定する} VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
97. 97 ConoHa VPSにLaravelを導入する DEMOを行います。
98. 98 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
99. 99 ③ VSCodeからConoHa VPSに接続する 設定ファイルを追加後、VSCodeを更新するとHostで指定した名前がRemote-SSHに出てきます。 クリックしてConoHa VPSにアクセスしましょう。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
100. 100 ③ VSCodeからConoHa VPSに接続する VSCodeのエクスプローラーからConoHa VPS上のLaravelがインストールされているディレクトリ を開きます。 コマンドパレットにLaravelがインストールされているパスを指定します。 cd /var/www/html/laravel/ VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
101. 101 ConoHa VPSにLaravelを導入する DEMOを行います。
102. 102 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
103. 103 ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる ようにする 「設定」アイコンから「設定」をクリックし、「Terminal Automation shell Linux」で検索します。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
104. 104 「リモート」を選択してAutomation Shell:Linuxの下にあるsetting.jsonで編集を開いて、bashの パスを指定します。 ConoHa VPSでは/usr/bin/配下にbashがあります。 { "terminal.integrated.shell.linux": "/usr/bin/bash" } VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作でき るようにする
105. 105 この状態で保存をしてターミナルを開くと、ConoHa VPS上に接続した状態でサーバのターミナル を操作する事ができます。 試しにphp artisan -Vで確認してみましょう。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる ようにする
106. 106 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする DEMOを行います。
107. 107 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
108. 108 1日目終了！ お疲れ様でした！
109. 109 2日目 Laravelについて
110. 110 講師担当: kumak1 資料作成担当 : mochiko
111. 111 Laravelとは？ 今回のフレームワークの講義は Laravelを使って進めていきます
112. 112 Laravelの紹介 Laravelとは？ - PHPで書かれたフレームワーク - 公式ドキュメント https://laravel.com/ - 日本語訳まとめサイト https://readouble.com/laravel/ - バージョンについて - v1 は2011年6月提供開始。最新バージョンは 7.X（2020/4 現在） - 半年毎にメジャーバージョンアップ - LTS（Long Term Support）のリリースは2年毎 - バグフィックスは2年間継続 - セキュリティフィックスは3年間継続 今回の講義では Laravel6.X（最新のLTS）を使用します。
113. 113 復習
114. 114 フレームワークとは（復習） 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク（Web アプリケーションフレームワーク） - モノを作成する際、0 から全て作るのはとても大変 - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある） ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品
115. 115 Webアプリケーションフレームワークとは？ Laravelとは？ - Webアプリケーションの開発をサポートするために設計されたもの - よく用いられる機能のためのライブラリを提供 Webアプリケーションに必要な共通機能をあらかじめ用意することで、完成までの手間 を少なくするソフトウェアです。
116. 116 Webアプリケーションに必要な機能とは？ Laravelとは？ - DBと接続・データ取得（MVCのM） - テンプレートエンジン（MVCのV） - ルーティング - ログイン認証処理 - 基本的なセキュリティ - セッション管理 といった機能が必要になります。
117. 117 様々な言語で提供されるフレームワーク Laravelとは？ - CakePHP（PHP） - Ruby on Rails（Ruby） - Django（Python） - Spring Framework（Java） などなど、様々な言語で、多くのフレームワークが用意されています。 それぞれに設計思想や特徴があるので、興味のある人は調べてみましょう。
118. 118 参考：Ruby on Railsが与えた影響 Laravelとは？ - Ruby on Rails (Ruby製のWebアプリケーションフレームワーク) - 2004年に発表されその後人気になった - 簡単にWebアプリケーションが作れる - オブジェクト指向 - MVCアーキテクチャ Webアプリケーションが簡単に作れるようになった これ以降に出てきたフレームワーク（Laravelも含む）は、 Ruby on Railsの影響を大きく受けている
119. 119 参考：Laravelの動静（Google トレンド日本） Laravelとは？ 赤：Ruby on Rails, 青：Laravel
120. 120 参考：Laravelの動静（Google トレンド世界） Laravelとは？ 赤：Ruby on Rails, 青：Laravel
121. 121 フレームワークを使うメリット Laravelとは？ 簡単に、安全に、短く書くことが可能になります。 - 規約が用意されている - 規約に添うことで開発者ごとのコーディングのバラ付きが抑えられる - コードが構造化されている - MVCパターン、リポジトリパターンなど - 保守性向上 - 便利なモノが用意されている - コマンドラインインターフェイス、ORMなど - 開発スピードアップ
122. 122 フレームワークを使うデメリット Laravelとは？ - 学習コストが増える - フレームワークのお作法の習得が必要（言語のお作法と別に） - 例：コマンドラインインターフェイス、ORMの記法、ルーティングなど - フレームワークの知識に偏ってしまう - 細かい仕組みを理解せずにアプリケーションが作れてしまうので、 ブラックボックス化しやすい - カスタマイズしづらい（スクラッチと比べ） - アプリケーションの規模に対して冗長になる場合がある
123. 123 Laravelの便利機能（の例）
124. 124 Artisan について Laravelの便利機能 - Laravelのコマンドラインインターフェイス - https://readouble.com/laravel/6.x/ja/artisan.html - Artisan = 職人という意味 - php artisan ~ という記法で様々なコマンドを実行できる
125. 125 Artisanコマンドの例 コマンド 処理内容 php artisan -v Laravelのバージョンの確認 php artisan list コマンド一覧を確認できる php artisan <実行コマンド> -h コマンドの使い方を確認できる php artisan make:controller FooController Fooコントローラーを作成する php artisan make:model Foo Fooモデルを作成する php artisan make:migration create_tests_table -- create=tests create_tests_table=ファイル名、tests＝テーブル名で マイグレーションファイルを作成する php artisan migrate マイグレーションの実行 php artisan migrate:rollback マイグレーションのロールバック php artisan route:list ルーティングの一覧を表示 php artisan tinker REPLの起動（ちょっとしたデバッグとかに便利）
126. 126 マイグレーションについて Laravelの便利機能 - 移動・移行という意味。(wikipediaより引用) - ここではデータベースマイグレーションのこと - DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更な どを行うための機能 マイグレーションのメリット - SQL文を作成して実行しなくても、簡単にテーブルを定義できる - テーブルの設計をコードで管理できる（マイグレーションファイル） - データベースがバージョンファイルにより管理される - 複数人での開発作業もやりやすくなる
127. 127 .envファイルについて Laravelの便利機能 - アプリケーションで使う各種設定が含まれる - データベースの接続設定 - アプリケーション固有の環境変数（APP_KEYなど） - 開発環境や本番環境の切り替え - リストした値はPHPのスーパーグローバル変数へロードされる - 秘匿情報などを外部からアクセスできない形で保持できる .envファイルはGitHubなどにアップロードしてはいけません
128. 128 .envファイルについて Laravelの便利機能 ファイル内容の例
129. 129 Laravelのディレクトリ構成
130. 130 ディレクトリの構成の一部（Laravel） Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる（諸説ある） - app/Http/Controller Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど（composer による依存パッケージ解決） ※フレームワークによってディレクトリ構成は異なります。
131. 131 Laravelを MVCパターンで考えてみる
132. 132 復習
133. 133 MVCパターン（復習） - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする
134. 134 MVCパターンの特徴（復習） - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており、これに従って 実装するので (比較的) 悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある
135. 135 MVCパターンの特徴（復習） 服の一覧 を見たい
136. 136 MVCパターンの特徴（復習） 服の一覧 を見たい Requet Response GET /clothes 服の一覧ページをレスポンスで返す ECショップから服の一覧データを取得したい場合の例
137. 137 MVCパターンの特徴（復習） 服の一覧 を見たい Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦
138. 138 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ① 「/clothes」を元にControllerに遷移します。 服の一覧 を見たい
139. 139 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ② Controller側で「服の一覧を取得する」処理を呼び出します。 服の一覧 を見たい
140. 140 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ③DBからデータを取得したいので、Modelに遷移します。 服の一覧 を見たい
141. 141 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ④DBから必要なデータをModel経由で取得します。 服の一覧 を見たい
142. 142 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑤受け取ったデータをControllerに返します。 服の一覧 を見たい
143. 143 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑥受け取ったデータをViewに渡してレスポンスで返す形に加工します。 服の一覧 を見たい
144. 144 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑦Controller側からレスポンスをクライアントに返す。 服の一覧 を見たい 服の一覧ページをレスポンスで返す
145. 145 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ
146. 146 ディレクトリの構成の一部（Laravel） Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる（諸説ある） - app/Http/Controller Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど（composer による依存パッケージ解決） ※フレームワークによってディレクトリ構成は異なります。
147. 147 MVCパターンの特徴（復習） routes/ app/Http/Controller app/ DB app/resources/views ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい
148. 148 いろいろできる！ 便利そう！！ 今のところは、こう思ってもらえたら十分です 次から実際にアプリケーションを作っていきます！
149. 149 11:50まで休憩
150. 150 2日目 Laravelを使ってAPIを作成す る
151. 151 講師担当: endu 資料作成担当 : tosite + endu + kumak1
152. 152 1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。 このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。 手を動かす作業でのスライドについて 講義の進め方について 「作業」がついているスライドは実際に手を動 かしながら行うパートになります。実際にコー ディングをしたり、設定したりする作業で出て きます。 「確認」がついているスライドは動作を確認し たり、返ってきた結果を確認します
153. 153 ハンズオンパート講義中のターミナルについて 講義の進め方について この講義で出てくるターミナルで実行する環境は、全てremote sshで接続している状態 でのVSCodeのターミナルです。手元のPCのターミナルではないです。
154. 154 ターミナルでよく使うコマンド 講義の進め方について ターミナル上でディレクトリを移動したりします。 そのために知っておくべきコマンドを載せておきます。 他にもオプションなどありますが、基本はこの4つのコマンドを使うと覚えておいてくだ さい cd # ディレクトリ移動 cd .. # 1つ上のディレクトリ階層に戻る ls # ファイル一覧を表示 pwd # 現在のディレクトリを表示
155. 155 アプリケーションを セットアップしよう
156. 156 ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう git をインストール sudo yum -y install git git --version git version 1.8.3.1 git がインストールされているか確認
157. 157 cd /var/www/html ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう git clone https://github.com/tosite0345/gtb2020-laravel.git 教材をダウンロード ディレクトリを移動・確認 cd /var/www/html/gtb2020-laravel pwd /var/www/html/gtb2020-laravel ディレクトリ移動
158. 158 ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう sh init.sh セットアップ実行 php artisan -V Laravel Framework 6.18.3 バージョン確認
159. 159 VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう アプリケーションをセットアップしよう VSCode側で「ファイル」→「Open」を選択してください 「/var/www/html/gtn2020-laravel」入力してOKを入れてださい
160. 160 VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう アプリケーションをセットアップしよう ディレクトリが変わっている事を確認します
161. 161 DEMOを行います。 アプリケーションをセットアップしよう
162. 162 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
163. 163 マイグレーションを行い、アプリケーションで必要 なテーブルを作成しよう アプリケーションをセットアップしよう ① MariaDBにログインしてDatabaseを作成 ② .envにMySQLのパスワードを追加 ③ マイグレーションを実行する ④ ホストURLにアクセスする
164. 164 アプリケーションをセットアップしよう ①MariaDBにログインしてDatabaseを作成 mysql -uroot -p Enter password: # laravelという名前のDBを作成する CREATE DATABASE laravel; # DBがちゃんと作られているか確認 SHOW DATABASES; # mysqlから抜ける exit; DBの名前はlaravelでつくります。
165. 165 アプリケーションをセットアップしよう DEMOを行います。
166. 166 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
167. 167 アプリケーションをセットアップしよう ②.envにMySQLのパスワードを追加 /var/www/gtb2020-laravel/.env
168. 168 アプリケーションをセットアップしよう ②.envにMySQLのパスワードを追加 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD={MySQLのパスワード追加} /var/www/gtb2020-laravel/.env
169. 169 アプリケーションをセットアップしよう DEMOを行います。
170. 170 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
171. 171 アプリケーションをセットアップしよう ③マイグレーションを実行する pwd /var/www/html/gtb2020-laravel #これが表示される事を確認してください。 # ディレクトリ確認 # マイグレーションを実行する php artisan migrate Migration table created successfully. Migrating: 2020_04_13_024636_create_comments_table Migrated: 2020_04_13_024636_create_comments_table (0.05 seconds)
172. 172 アプリケーションをセットアップしよう ③マイグレーションを実行する USE laravel; SHOW TABLES; # MariaDBログイン（初日にメモしておいたMySQLのパスワードを使います） mysql -uroot -p Enter password: # tableを確認
173. 173 アプリケーションをセットアップしよう DEMOを行います。
174. 174 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
175. 175 ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をコピーしてブ ラウザで確認する。 (ダッシュボード画面) (詳細画面) アプリケーションをセットアップしよう ④ホストにアクセスする
176. 176 アプリケーションをセットアップしよう アクセスしたら問題なく「API Tester」が表示されるのを確認してください。
177. 177 アプリケーションをセットアップしよう DEMOを行います。
178. 178 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
179. 179 API Testerを使ってみよう
180. 180 API Testerを使ってみよう API画面 ここで主に作成したAPIの動作検証を行います。Resultにレスポンスが返ってきます。
181. 181 API Testerを使ってみよう Routes画面 ルーティングとコントローラーの対応を見る事ができます。
182. 182 API Testerを使ってみよう Logs画面 エラーログを見る事ができます。
183. 183 データを全表示 API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters なし
184. 184 API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters なし 200 （データ表示に成功） データを全表示
185. 185 DEMOを行います。 API Testerを使ってみよう
186. 186 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
187. 187 API Testerを使ってみよう Parametersのkeyは「name」と「content」を追加してください
188. 188 データを追加してPOSTでリクエストすると失敗するか確認しよう API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method post Uri /api/comments Parameters name: 自由 content: 自由
189. 189 API Testerを使ってみよう 画面入力 SUBMIT をクリック 405 エラー データを追加してPOSTでリクエストすると失敗するか確認しよう Selected Method post Uri /api/comments Parameters name: 自由 content: 自由
190. 190 DEMOを行います。 API Testerを使ってみよう
191. 191 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
192. 192 14:50まで休憩
193. 193 APIのCRUDを実装しよう 前半 (Create,Read)
194. 194 Create
195. 195 CRUD の C(reate)。ルーティングに追加 APIのCRUDを実装しよう <?php use Illuminate¥Http¥Request; Route::middleware('api')->group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); }); routes/api.php を VSCodeで開いてみよう
196. 196 CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method post Uri /api/comments Parameters name: 自由 content: 自由
197. 197 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック 200 （ルーティングに成功） CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 Selected Method post Uri /api/comments Parameters name: 自由 content: 自由
198. 198 APIのCRUDを実装しよう CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 「422」が返ってきた場合は「value」になんらかの値を入力して試してください 422 エラー
199. 199 DEMOを行います。 APIのCRUDを実装しよう
200. 200 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
201. 201 Model を artisan コマンドで作成 APIのCRUDを実装しよう pwd /var/www/html/gtb2020-laravel #これが表示される事を確認してください。 php artisan make:model Comment # 成功 Model created successfully. ターミナルで下記のコマンドを実行しよう
202. 202 Model を artisan コマンドで作成 APIのCRUDを実装しよう
203. 203 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ
204. 204 APIのCRUDを実装しよう <?php namespace App; use Illuminate¥Database¥Eloquent¥Model; class Comment extends Model { protected $fillable = [ 'name', 'content', ]; } app/Comment.php をVSCodeで開いてみよう Model に $fillable を追加して、nameとcontentを追加する
205. 205 CRUD の C(reate)。Controller に store の処理を追加 APIのCRUDを実装しよう public function store(¥App¥Http¥Requests¥Comments¥Post $request) { $comment = Comment::create([ 'name' => $request->input('name'), 'content' => $request->input('content'), ]); return response()->json($comment, 201); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
206. 206 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 201 （DBにレコード追加）
207. 207 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 id を控えておく
208. 208 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 id を控えておく
209. 209 DEMOを行います。 APIのCRUDを実装しよう
210. 210 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
211. 211 Read
212. 212 CRUD の R(ead)。ルーティングに追加 APIのCRUDを実装しよう <?php use Illuminate¥Http¥Request; Route::middleware('api')->group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); }); routes/api.php を VSCodeで開いてみよう
213. 213 CRUD の R(ead)。Controller に show の処理を追加 APIのCRUDを実装しよう public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
214. 214 画面入力 SUBMIT をクリック CRUD の R(ead)。実行 APIのCRUDを実装しよう Selected Method get Uri /api/comments/{id の番号} Parameters
215. 215 画面入力 SUBMIT をクリック CRUD の R(ead)。実行 APIのCRUDを実装しよう Selected Method get Uri /api/comments/{id の番号} Parameters create したデータが表示
216. 216 DEMOを行います。 APIのCRUDを実装しよう
217. 217 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
218. 218 16:10まで休憩
219. 219 ORMのよもやま話
220. 220 ORMについて簡単に紹介 ORMのよもやま話 ORMとはObject-Relational Mappingの略称です。 LaravelではEloquentと呼ばれるORMが使われています。RailsではActive Recordが使われています。 public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう ここでは Comment クラスがORMの役割を果たしています。 参考資料:「Eloquent:利用の開始」https://readouble.com/laravel/7.x/ja/eloquent.html
221. 221 ORMの利点について紹介 ORMのよもやま話 1.SQLを書かず直感的にDBを操作する事ができる。 2.リレーションを使った操作が楽に書ける。 3.SQLインジェクションなどの攻撃に対して自動で防いでくれる 4.取得したデータがオブジェクトなので編集がしやすい
222. 222 SQLを書かず直感的にDBを操作する事ができる。 ORMのよもやま話 SQL ORM App¥Comment::all(); App¥Comment::where(‘id’, 1)->get(); SELECT * FROM comments; SELECT * FROM comments where id = 1; データを取得する場合の例(SELECT)
223. 223 SQLを書かず直感的にDBを操作する事ができる。 ORMのよもやま話 SQL ORM (new Comments())->fill($request->input())->save(); INSERT INTO comments VALUE ( name = ‘tosite’, content = ’body text’, email = ’sample@example.com’ ); データを保存する場合の例(INSERT)
224. 224 findOrFail ORMのよもやま話 public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう findOrFailメソッドは該当するレコードが見つからない時、自動で404HTTP レスポンスを返してくれます。なのでこのメソッドを使用すればわざわざ明 確に404レスポンスを返すコードを書く必要はありません。 この場合はAPI Testerで存在しないIDを指定してリクエストをすると自動で 404が返ってきます。
225. 225 findOrFail ORMのよもやま話
226. 226 リレーションを使った操作が楽 class Comment extends Model { public function user() { return $this->hasOne('App¥User'); } } hasOne = 1:1 hasMany = 1:N belongTo = N:1 belongsToMany = N:N ORMのよもやま話 CommentモデルとUserモデルが1対1の関係になっている (※commentsテーブル内にuser_idを保持している場合)
227. 227 ORMのよもやま話 Comment::user->name; SELECT user.name FROM comments LEFT JOIN user ON comments.user_id = user.id SQL ORM リレーションを使った操作が楽
228. 228 セキュリティ対策 ORMのよもやま話 SQL + PHP ORM (new Comments())->fill($request->input())->save(); $res = pg_query_params( $dbconn, 'UPDATE comments SET name = $1 WHERE content = $2', array(‘tosite’, ‘body text’) );
229. 229 Q. ORMを積極的に使った方がいいのか？ ORMのよもやま話
230. 230 A. 場合による。ORMが使わない方が良い場合も当然ある。 ORMのよもやま話 (1)複数のtabelをまたぐ処理をORMで実装をしようとすると、実装が難しく なるケースがある (2)ORMの裏側で発行しているSQLが意図せずN+1問題を引き起こすケース もある
231. 231 N+1問題を引き起こすケースもある ORMのよもやま話 $comments = Comment::all(); foreach ($comments as $ comment) { echo $comment->user } class Comment extends Model { public function user() { return $this->hasMany('App¥User'); } } ORM
232. 232 N+1問題を引き起こすケースもある ORMのよもやま話 select * from comments; select * from users where id = 1; select * from users where id = 2; select * from users where id = 3; . . SQL $comments = Comment::with('user')->get(); foreach ($comments as $ comment) { echo $comment->user } ※ORM側で対策は可能 $comments->user が実行される度にSQLが発行されてしまい、処理が重くなってしまいます。
233. 233 ORMを使った方法だけを理解するのではなく、裏側で発行される SQLの意味を理解するためにも、素のSQLをしっかり書けるように 学びましょう! ORMのよもやま話
234. 234 16:45まで休憩
235. 235 APIのCRUDを実装しよう 後半 (Update,Delete,Index)
236. 236 Update
237. 237 CRUD の U(pdate)。ルーティングに追加 APIのCRUDを実装しよう <?php use Illuminate¥Http¥Request; Route::middleware('api')->group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); Route::put('comments/{comment}', 'CommentController@update'); }); routes/api.php をVSCodeで開いてみよう
238. 238 CRUD の U(pdate)。Controller に update の処理を追加 APIのCRUDを実装しよう public function update(¥App¥Http¥Requests¥Comments¥Put $request, $id) { $comment = Comment::findOrFail($id); $comment->update([ 'name' => $request->input('name') ?: $comment->name, 'content' => $request->input('content') ?: $comment->content, ]); return response()->json($comment, 200); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
239. 239 CRUD の U(pdate)。 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method put/patch Uri /api/comments/ Parameters name: 自由
240. 240 CRUD の U(pdate)。Update Controller を追加 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method put/patch Uri /api/comments/ Parameters name: 自由 200 name が更新される
241. 241 DEMOを行います。 APIのCRUDを実装しよう
242. 242 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
243. 243 Delete
244. 244 CRUD の D(elete)。ルーティングに追加 APIのCRUDを実装しよう <?php use Illuminate¥Http¥Request; Route::middleware('api')->group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); Route::put('comments/{comment}', 'CommentController@update'); Route::delete('comments/{comment}', 'CommentController@destroy'); }); routes/api.php をVSCodeで開いてみよう
245. 245 CRUD の D(elete)。Controller に destroy の処理を追加 APIのCRUDを実装しよう public function destroy($id) { Comment::findOrFail($id)->delete(); return response()->noContent(); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
246. 246 CRUD の D(elete)。Delete Controller を追加 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method delete Uri /api/comments/34 Parameters
247. 247 DEMOを行います。 APIのCRUDを実装しよう
248. 248 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
249. 249 Index
250. 250 CRUD の R(ead)。Controller に show の処理を追加 APIのCRUDを実装しよう public function index() { return [ ['name' => 'tom', 'content' => 'hello'], ['name' => 'sam', 'content' => 'world'], ]; return Comment::all(); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
251. 251 API 実行してみよう - データを全表示 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters
252. 252 API 実行してみよう - データを全表示 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters 200 （データ表示に成功）
253. 253 DEMOを行います。 APIのCRUDを実装しよう
254. 254 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
255. 255 18:05まで休憩
256. 256 Validationを実装しよう
257. 257 Validation を実装しよう 利用者の 個人情報 悪意のある攻撃 正常なリクエスト だと勘違いして、 レスポンスを返し てしまう Validationなしの場合
258. 258 Validation を実装しよう Validationありの場合 利用者の 個人情報 悪意のある攻撃 悪意のある攻撃を 事前に防ぐように する
259. 259 画面入力 SUBMIT をクリック Validation に引っかかるようにAPIを実行してみよう Validation を実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content:
260. 260 画面入力 SUBMIT をクリック Validation に引っかかるようにAPIを実行してみよう Validation を実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 422 The content field is required.
261. 261 今のValidation の実装をみてみよう Validation を実装しよう public function rules() { return [ 'name' => 'required', // nameパラメータは必須 'content' => 'required', // contentパラメータは必須 ]; } app/Http/Request/Comments/Post.php をVSCodeで開いてみよう
262. 262 Validation のドキュメントをみてルール追加しよう Validation を実装しよう public function rules() { return [ 'name' => 'required|min:5|max:10', 'content' => 'required', ]; } min:値 = フィールドが最小値として指定された値以下であることをバリデートします。 max:値 = フィールドが最小値として指定された値以上であることをバリデートします。 参考資料バリデーションについて https://readouble.com/laravel/7.x/ja/validation.html
263. 263 画面入力 SUBMIT をクリック nameに4文字または11文字の文字列入れて失敗するのを確認し てください Validation を実装しよう Selected Method post Uri /api/comments Parameters name:aaaa or aaaaaaaaaaa content: 自由 422 The content field is required.
264. 264 DEMOを行います。 Validation を実装しよう
265. 265 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!
266. 266 2日目終了〜！ Webアプリフレームワーク入門 REST API 入門 研修は終了です！ お疲れ様でした！
267. 267 トラブルシューティング
268. 268 ハンズオンで接続できない方がいたので、問題切り分けして挑みましょう。 確認 : CUI で ConoHa に ssh 接続できますか？ - できる (VS Code のセットアップの問題かも) - Remote-SSH を一旦アンインストール・インストールしよう - VS Code を一旦アンインストール・インストールしよう - できない (ConoHa のセットアップの問題かも) - 公開鍵をサーバーに登録しよう - 秘密鍵を改めてChromeでダウンロードしよう (原因確率は低) VS Code で Remote-SSH で ConoHa に接続できない
269. 269 確認 : CUI で ConoHa に ssh 接続できますか？ VS Code で Remote-SSH で ConoHa に接続できない ssh Conoha .ssh/config の設定は皆できましたね。 Mac の方は Terminal 、 Windows の方は Git Bash で ssh できるか確認しましょう。 実行するコマンド (.ssh/config に登録した Hostname が Conoha の場合) 実行結果 （接続できた場合）
270. 270 コマンドを実行して公開鍵を登録します。事前に以下の3つを確認しましょう。 - 秘密鍵のPath (.ssh/config に書いてあるよ) - ConoHaのIP (.ssh/config に書いてあるよ) - ConoHaのrootパスワード 秘密鍵が利用でき、公開鍵を生成できるか確認するコマンド 公開鍵をサーバーに登録しよう VS Code で Remote-SSH で ConoHa に接続できない ssh-keygen -y -f <秘密鍵のPath>
271. 271 公開鍵を生成できることを確認したら、ConoHa に登録しましょう。 実行するコマンド 実行したらrootパスワードを聞かれるので、入力してEnterキーを押します。 問題なさそうであれば、再びConoHaにssh接続してみよう 公開鍵をサーバーに登録しよう VS Code で Remote-SSH で ConoHa に接続できない ssh-keygen -y -f <秘密鍵のPath> | ssh root@<ConoHaのIP> 'cat >> .ssh/authorized_keys'