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

Transcript

1. 1
   GTB2020
   Webアプリフレームワーク入門
   REST API 入門
   

   View Slide

2. 2
   GMOペパボ株式会社
   EC事業部 グーペグループ
   2017年 入社
   遠藤 太徳(endu)
   趣味
   ゲーム、自炊、ピアノ(を最近はじめました!)
   講師紹介
   

   View Slide

3. 3
   GMOペパボ株式会社
   EC事業部 カラーミーショップグループ
   2014年 入社
   牧野 弘幸 (kumak1)
   趣味
   ゲームを作る・絵を描く
   講師紹介
   

   View Slide

4. 4
   GMOペパボ株式会社
   ホスティング事業部
   2018年 入社
   高橋 邦彦 (kunit)
   趣味
   旅行、カメラ
   講師紹介
   

   View Slide

5. 5
   GMOペパボ株式会社
   ホスティング事業部
   2019年 入社
   望月 眞喜(mochiko)
   趣味
   F1観戦、クロマニヨンズ、
   カレー（を食べる）
   講師紹介
   

   View Slide

6. 6
   GMOペパボ株式会社
   ホスティング事業部
   2018年 入社
   手島 尚人（てっしー／@tosite）
   趣味
   ドライブ・キャンプ・料理
   講師紹介
   

   View Slide

7. 7
   講義の進め方について
   

   View Slide

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にアクセスする
   

   View Slide

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 のよもやま話
   

   View Slide

10. 10
    講義の進め方について
    基本はzoomのチャットに書き込んでください。
    例 )
    【質問】***と書いてみたのですが、動かないです。
    【質問】*** って、どういう意味でしょうか?
    【質問】を見てサポート講師が質問にチャット上で答えます。
    質問方法について
    

    View Slide

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

    View Slide

12. 12
    この画像が載っているスライドがある時は10分休憩です。
    この講義ではこまめに休憩を入れて進めていきます。
    休憩について
    講義の進め方について
    

    View Slide

13. 13
    1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。
    このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。
    手を動かす作業でのスライドについて
    講義の進め方について
    「作業」がついているスライドは実際に手を動
    かしながら行うパートになります。実際にコー
    ディングをしたり、設定したりする作業で出て
    きます。
    「確認」がついているスライドは動作を確認し
    たり、返ってきた結果を確認します
    

    View Slide

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

    View Slide

15. 15
    作業スライドが出ている時は、皆さんに手を動かして作業をして貰います。
    DEMOスライドと作業スライドについて
    講義の進め方について
    

    View Slide

16. 16
    座学
    

    View Slide

17. 17
    講師担当: kumak1
    資料作成担当 : kunit
    

    View Slide

18. 18
    Webについて
    Webについておさらいをしましょう
    

    View Slide

19. 19
    Web の関連技術はとても扱いやすく、様々なところで利用されています。
    - Chrome や Edge などのブラウザで企業やサービスのWebページを見る
    - オーソドックスな使われ方
    - PC・スマホ・テレビといった様々なデバイスから見ることができる
    - スマホのゲームアプリで通信を行いながら協力プレイをする
    - ブラウザ以外の様々なアプリもデータのやり取りに利用している
    Webについて(おさらい)
    

    View Slide

20. 20
    クライアントとサーバー
    サービスを提供する側をサーバー、サービスを受ける側をクライアントと呼びます。
    (一般的な言葉になりつつありますね)
    - クライアントの代表例がブラウザ
    - Google Chrome
    - Microsoft Edge、Internet Explorer
    - Apple Safari
    - Mozilla Firefox
    - サーバーとして利用されている代表的なもの
    - Apache HTTP Server
    - Nginx (エンジンエックス)
    - Microsoft IIS (Internet Information Services)
    - LiteSpeed Web Server
    

    View Slide

21. 21
    URL と HTTP
    Web では次の2つがとても重要な要素となります。
    - URL (Uniform Resource Locator)
    - 「欲しい情報がどこにあるのか」という場所を明確に示す
    - HTTP (HyperText Transfer Protocol)
    - URL で示した場所に対して「情報をどうしたいか」を通信で指示する
    上記の2つをこれ以降もう少しだけ深掘りします。
    

    View Slide

22. 22
    URLとは
    URL を使うことで「どこになにがあるか」を簡単に示すことができます。
    - URL がなかったら
    - あの企業サーバーの○○というカテゴリ下の△△というサブカテゴリをみて！
    - とても大変
    - URL があったら
    - https://example.co/○○/△△/ をみて！
    - 場所を指し示すのにシンプルなルールを提供できたので、利用するのがとても
    簡単になった
    

    View Slide

23. 23
    プロトコルとは
    プロトコルとは通信する際の手順や規格を定めた規約のこと。
    プロトコルに従うことで、サーバーとクライアントがネットワークを通じてやり取りでき
    ます。
    - クライアントがサーバーに決められた命令 (1つもしくは複数) を送信すると結果が返る
    - Web では URL で示された場所に対して HTTP というプロトコルでやり取りを行う
    

    View Slide

24. 24
    HTTP の良さ
    HTTP はそれまであったプロトコルよりかなり単純なものとなっています。
    - 以前のプロトコル
    - SMTP や POP3/IMAP4 (メールで使用)
    - FTP (ファイル転送で使用) 等
    - 複数の命令を組み合わせて目的の動作を行う
    - HTTP
    - (基本的に) 1つの命令で目的を果たせる
    - プロトコルが単純なため、サーバーやクライアントを実装しやすい
    HTTP を利用したプロダクトや事例が爆発的に増えました。
    

    View Slide

25. 25
    14:25まで休憩
    

    View Slide

26. 26
    ページが表示されるまで
    Webページが表示されるまでになにが起きているか、説明
    していきます。
    

    View Slide

27. 27
    リクエストとレスポンス
    クライアントとサーバーとのやり取りに対しての用語を説明します。
    - リクエスト
    - クライアントからサーバーに接続し、サービスを提供してもらうための処理を
    依頼することを「リクエストを投げる」という
    - レスポンス
    - クライアントからのリクエストを受けて、サーバーで処理を行った結果をクラ
    イアントに渡すことを「レスポンスを返す」という
    

    View Slide

28. 28
    HTTP のやり取り
    例えば、Yahoo! JAPAN のページを表示するまでを考えてみましょう。
    - ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、
    トップページのURL に対してリクエストを投げる
    - Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして
    HTML ファイルを返す
    - ブラウザが HTML ファイルを解析すると、CSS や JavaScript、画像といったファイ
    ルを追加で取得する必要があることが判明する
    - ブラウザからWebサーバーに 必要なものをもらうために投げる
    - サーバーからブラウザにリクエストされたものを返す
    - 以下これの繰り返し
    

    View Slide

29. 29
    Yahoo! JAPAN のページが見えるまで(その1)
    ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの
    URL に対してリクエストを投げます。
    リクエスト
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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の
    バージョン
    

    View Slide

33. 33
    リクエストメソッド
    リクエストメソッドは、URLに対してどのような処理をしたいのかを示したものです。
    - GET
    - 情報を取得
    - 副作用はないように
    - POST
    - 情報を変更
    - PUT
    - 情報を置換
    - PATCH
    - 情報を一部置換
    - DELETE
    - 情報を削除
    

    View Slide

34. 34
    Yahoo! JAPAN のページが見えるまで(その3)
    Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し
    ます。
    レスポンス
    

    View Slide

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
    ...
    Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し
    ます。
    

    View Slide

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
    ...
    Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し
    ます。
    HTTP/1.1 200 OK
    

    View Slide

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
    ...
    Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し
    ます。
    HTTP/1.1 200 OK
    HTTPの
    バージョン
    ステータス
    コード
    ステータス
    テキスト
    

    View Slide

38. 38
    ステータスコード
    ステータスコードは、サーバーの処理結果を示したものです。
    3桁の数値でどのような状態になったかを表します。
    - 200番台は処理が成功したことを表す
    - 200 OK
    - 201 Created
    - 300番台は追加の処理が必要であることを表す
    - 301 Moved Permanently
    - 302 Found
    - 307 Temporary Redirect
    - 308 Permanent Redirect
    

    View Slide

39. 39
    ステータスコード
    - 400番台はリクエストに問題があったことを表す
    - 400 Bad Request
    - 401 Unauthorized
    - 認証が必要
    - 403 Forbidden
    - 404 Not Found
    - 500番台はサーバー側に問題があったことを表す
    - 500 Internal Server Error
    - 503 Service Unavailable
    

    View Slide

40. 40
    ドキュメントルート
    Web サーバーに関連する用語の補足説明。
    - ドキュメントルート
    - URL (https:///) のトップ部分と対応するサーバー上のディレクトリのこと
    （≒ドキュメントルートにファイルを置くとWebに公開される）
    - Linux をWebサーバーにセットアップすると /home/www/html がドキュメントルートになる
    （設定ファイルで変更可能）
    - レンタルサーバーでは1つのサーバーを複数のお客様が利用するので、お客様のドメイン毎
    にドキュメントルートを設定している
    ドキュメントルートにファイルを無造作に置くと、Webブラウザから簡単にアクセスされてしまう。
    このため、見られてはいけないデータは /home/www/data などのドキュメントルート外のディレクトリ
    に置くようにしましょう。（情報漏えいの一部はドキュメントルートに誤ってファイルを置いたことで発生しま
    す。）
    

    View Slide

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://〜 になる
    

    View Slide

42. 42
    特定の誰かだけ利用させたい
    提供するコンテンツによっては、会員だけが使えるとか、特定の人だけが使えるといった
    制限をしたいことがよくあります。
    - 認証 (Authentication)
    - 誰であるかを確認して、許可された人以外は許さない
    - （パスポート持ってるからあなたはNさん。Nさんなら顔パス）
    - （Twitter へのログインなど）
    - 認可 (Authorization)
    - 誰であるかに応じて、どのような権利があるかをコントロールする
    - （新幹線のチケット持ってるので、乗っていいですよ）
    - （Twitter 連携アプリの OAuth 2.0 など）
    日本語でも似たような用語だし、英語でも両方とも略すと Auth になるので、混同される
    事が多いので注意しましょう。
    

    View Slide

43. 43
    14:55まで休憩
    

    View Slide

44. 44
    Webアプリケーションに
    ついて
    Webアプリケーションについて、学んでいきましょう
    

    View Slide

45. 45
    Web アプリケーションを分類してみる
    Web アプリケーションとして提供するものは、大きく分けて次の2つがあります。
    - Webページを表示するためのアプリケーション
    - サーバーからは HTML, JavaScript, CSS, 画像などを返す
    - 古くから提供されてきたもの
    - スマホ等から利用されるアプリケーション
    - スマホアプリ等からアクセスされ、データの取得や更新を行う
    - 「データをどうやり取りをするか」という決まりをアプリケーション毎に決め
    て、クライアントとサーバーでやり取りを行う
    - この決まりのことを API (Application Programming Interface) という
    今回の講義ではこの API の実装方法を学びます。
    

    View Slide

46. 46
    RESTful API
    API の設計方法にはいくつかの流儀があります。（RPC や SOAPなど）
    - Web API は SOAP (Simple Object Access Protocol) などで提供されていた
    - システム毎に複雑な仕様書 (XMLの構造など) のやり取りが必要
    - 作成するシステムが複雑になりがち
    - RESTful API
    - URL が示すものに対して HTTP のメソッドを使って単純にアクセスする
    - 仕様がシンプルになるので、複数のシステム連携が比較的容易になる
    昨今は RESTful API で提供するものが多いです。
    

    View Slide

47. 47
    REST という考え方
    Web でシステムを構築するにあたって、どのようにすると効率がいいのかという考え方
    が HTTP の規約を策定したメンバーの一人である Roy Fielding によって提唱された。
    - REST (REpresentational State Transfer)
    - 拡張性のある Web システムを構築するためのアーキテクチャスタイル
    (設計の流儀や様式、作法)
    - クライアントとサーバーの間を URL と 統一インタフェース (リクエストメソッド)
    を使って、ステートレス にやり取りすることにより拡張性を高めるようにでき
    るとした考え
    - Web および HTTP そのものの原則と言える
    

    View Slide

48. 48
    CRUD という考え方
    CRUD とは、データ操作で使う4つの基本機能のそれぞれの頭文字をとったものです。
    これを RESTful API にマッピングすると以下の通りです。
    - Create
    - データを生成する
    - POST
    - Read
    - データを読み取る
    - GET
    - Update
    - データを更新する
    - PUT or PATCH
    - Delete
    - データを削除する
    - DELETE
    

    View Slide

49. 49
    返却されるデータの形式
    通常のWebアプリケーションでは HTML や JavaScript・CSS などが返却されますが、
    API ではそれとは違った形式でデータを返却します。
    - パース
    - プログラムでデータ (文字列) 解析すること
    - API で扱うデータはプログラムで処理しやすい形式を選ぶ
    (HTML や単なる複数行テキストはパースしづらい)
    - パースしやすいデータ形式
    - XML (Extensible Markup Language)
    - データに対して厳密にタグを付与したデータ形式
    - JSON (JavaScript Object Notation)
    - JavaScript でそのまま利用可能で、その他言語でも扱いやすい
    - 今回の講義では JSON を取り扱う
    

    View Slide

50. 50
    XML
    サンプルコードで比較
    データ形式
    HTML
    
    
    
    
    
    
    
    type="text"
    name="key"
    value="value">
    
    
    
    {
    "key": "value"
    }
    8" ?>
    value
    JSON
    

    View Slide

51. 51
    Webアプリケーションを
    作成するにあたって
    Webアプリケーションを作成するにあたって、必要な知識
    を説明します。
    

    View Slide

52. 52
    フレームワークとは
    明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。
    - フレームワーク（Web アプリケーションフレームワーク）
    - モノを作成する際、0 から全て作るのはとても大変
    - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー
    ション完成までの手間を少なくするソフトウェア
    - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ
    ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある）
    ライブラリとの違い
    - ライブラリは自分が作成するプログラム から 利用する部品
    - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける
    - フレームワークは自分が作成するプログラム が 利用される部品
    

    View Slide

53. 53
    パターン
    プログラムを設計・実装において「誰もが似た事をしているな」ということがしばしば起
    こります。
    - パターン
    - 似たアプリケーションを作成する場合、後々拡張・修正しやすい共通のやり方
    が出てくる
    - 手法や手順に名前をつけ、エンジニア間で共通の語彙として会話ができるよう
    にしたモノ
    - アンチパターン
    - パターンは良いモノばかりではない
    - 「こういう風にすると良くないよ」と注意喚起するもの
    フレームワークはこのパターンを多く利用しており、その代表例がMVCパターンです。
    

    View Slide

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

    View Slide

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

    View Slide

56. 56
    15:30まで休憩
    

    View Slide

57. 57
    開発環境構築
    

    View Slide

58. 58
    講師担当: endu
    資料作成担当 : endu
    

    View Slide

59. 59
    このパートで行う事
    ①ConoHa VPSにLaravelを導入する
    ②VSCodeの拡張機能 Remote - SSHでConoHa VPSにアクセスする
    開発環境の構築
    

    View Slide

60. 60
    ConoHa VPSにLaravelを
    導入する
    

    View Slide

61. 61
    ConoHa VPSにLaravelを導入する
    https://qiita.com/Fendo181/items/3a6d77c2f4c7ac96c071
    

    View Slide

62. 62
    リモート接続するためのディレクトリとファイルを生成する
    ※ここからの作業はMacの方はTerminal、Windowsの方はGit for Windowsで作業をしてください
    cd ~ #ホームディレクトリに移動
    mkdir ~/.ssh #ディレクトリを生成する
    touch ~/.ssh/config #設定ファイルを作成する
    ls -l ~/.ssh/config
    最初にシークレットキーを置いておくディレクトリと、リモートサーバーの接続する際に利用され
    る設定ファイルも生成しておきます。(※既にある場合はここはスキップして大丈夫です)
    ConoHa VPSにLaravelを導入する
    

    View Slide

63. 63
    16:50 まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

64. 64
    ConoHa VPSの管理画面に戻り「セキュリティ」から「SSH Key」を選択します。
    ConoHa VPSにLaravelを導入する
    

    View Slide

65. 65
    ConoHa VPSにLaravelを導入する
    イメージを作成する前に、最初に「SSH Key」からパブリックキーを登録し、シー
    クレットキーをダウンロードします。
    

    View Slide

66. 66
    「パブリックキー」を押して登録します。登録されるとシークレットキーのダウンロードを
    促すポップアップが出るので、ダウンロードします。
    ConoHa VPSにLaravelを導入する
    

    View Slide

67. 67
    シークレットキーをダウンロードしたら、先程作成した「.ssh」ディレクトリに移動させて
    おいてください。後ほど説明が出てきますが、シークレットキーが置いてある場所のパスを
    指定できれば問題ないです。
    ConoHa VPSにLaravelを導入する
    

    View Slide

68. 68
    **:** まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

69. 69
    ConoHa VPSにLaravelを導入する
    ※rootパスワードは一度設定すると変更ができないので必ずどこかにメモをしてく
    ださい。また、紛失した際にも確認する術がないため注意してください。
    

    View Slide

70. 70
    ConoHa VPSにLaravelを導入する
    先程作成したパブリックキーをオプションで指定してイメージを作成する
    

    View Slide

71. 71
    ConoHa VPSにLaravelを導入する
    作成後にConoHa VPSの管理画面に遷移します。
    サーバリストに作成したVPSがあるのを確認します。
    

    View Slide

72. 72
    ConoHa VPSにLaravelを導入する
    (ダッシュボード画面)
    (詳細画面)
    ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をクリックしてください。
    

    View Slide

73. 73
    ConoHa VPSにLaravelを導入する
    

    View Slide

74. 74
    **:** まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

75. 75
    「コンソール」と書かれているボタンをクリックしてコンソールパネルを開きます。
    ConoHa VPSにLaravelを導入する
    

    View Slide

76. 76
    loginにはrootを指定してください。
    Passwordには先程設定したrootパスワードを入力してください。
    ConoHa VPSにLaravelを導入する
    

    View Slide

77. 77
    MySQLのパスワードは後ほど、2日目のハンズオンパートで使うのでメモし
    ておいてください。
    ConoHa VPSにLaravelを導入する
    

    View Slide

78. 78
    ここまでできたら、Laravelがあるディレクトリに移動して、
    インストールされているLaravelのバージョンを確認してみましょう。
    下のコマンドを実行してConoHa VPSに入っているLaravelのバージョンを確認します。
    ※(Vは大文字です)
    cd /var/www/html/laravel/
    php artisan -V
    ConoHa VPSにLaravelを導入する
    

    View Slide

79. 79
    ConoHa VPSにLaravelを導入する
    

    View Slide

80. 80
    **:** まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

81. 81
    16:30まで休憩
    

    View Slide

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

    View Slide

83. 83
    なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか?
    エディターを使わない場合
    ● コンソール画面に入りコマンドラインで操作
    する為、手間が発生する
    ● viの知識が必要
    ● 修正箇所を探すのが大変
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

84. 84
    なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか?
    ● GUIで楽に操作できる
    ● 自動でインデントや補完をしてくれるの
    で、編集が楽
    ● 拡張機能を入れて自分好みにカスタマイ
    ズできる
    エディターを使う場合
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

85. 85
    手元のPC環境
    ConoHa VPS 上の環境
    SSH 接続
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    Remote-
    SSH
    

    View Slide

86. 86
    これから行う具体的な手順
    ① VSCodeにRemote-SSHをインストールする
    ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する
    ③ VSCodeからConoHa VPSに接続する
    ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できるようにする
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

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

    View Slide

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

    View Slide

89. 89
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    ① VSCodeにRemote-SSHをインストールする
    歯車のアイコンをクリックして「.ssh/config」のパスを指定しましょう
    

    View Slide

90. 90
    ConoHa VPSにLaravelを導入する
    DEMOを行います。
    

    View Slide

91. 91
    **:** まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

92. 92
    17:55まで休憩
    

    View Slide

93. 93
    ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する
    Host Conoha
    HostName {IPアドレス}
    User root
    Port 22
    IdentityFile {秘密鍵が置いてあるパスを指定する}
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

94. 94
    ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する
    ConoHa VPSの管理画面に戻り、ネットワーク情報の【IPアドレス】を見て、設定ファイルに追記
    します
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

95. 95
    ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する
    .sshディレクトリ配下に置いている場合、IdentityFileで指定するパスは以下のようになります。
    IdentityFile ~/.ssh/シークレットキーの名前
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

96. 96
    ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する
    Host Conoha
    HostName {IPアドレス}
    User root
    Port 22
    IdentityFile {秘密鍵が置いてあるパスを指定する}
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

97. 97
    ConoHa VPSにLaravelを導入する
    DEMOを行います。
    

    View Slide

98. 98
    **:** まで各自で作業をしましょう。
    わからない事があったら、遠慮なくzoomのチャットに
    【質問】をつけてコメントしてください。
    それ以外のコメントも大丈夫です!
    

    View Slide

99. 99
    ③ VSCodeからConoHa VPSに接続する
    設定ファイルを追加後、VSCodeを更新するとHostで指定した名前がRemote-SSHに出てきます。
    クリックしてConoHa VPSにアクセスしましょう。
    VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
    

    View Slide

100. 100
     ③ VSCodeからConoHa VPSに接続する
     VSCodeのエクスプローラーからConoHa VPS上のLaravelがインストールされているディレクトリ
     を開きます。 コマンドパレットにLaravelがインストールされているパスを指定します。
     cd /var/www/html/laravel/
     VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
     

     View Slide

101. 101
     ConoHa VPSにLaravelを導入する
     DEMOを行います。
     

     View Slide

102. 102
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

103. 103
     ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる
     ようにする
     「設定」アイコンから「設定」をクリックし、「Terminal Automation shell Linux」で検索します。
     VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
     

     View Slide

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上でコマンドライン操作でき
     るようにする
     

     View Slide

105. 105
     この状態で保存をしてターミナルを開くと、ConoHa VPS上に接続した状態でサーバのターミナル
     を操作する事ができます。 試しにphp artisan -Vで確認してみましょう。
     VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
     ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる
     ようにする
     

     View Slide

106. 106
     VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
     DEMOを行います。
     

     View Slide

107. 107
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

108. 108
     1日目終了！
     お疲れ様でした！
     

     View Slide

109. 109
     2日目
     Laravelについて
     

     View Slide

110. 110
     講師担当: kumak1
     資料作成担当 : mochiko
     

     View Slide

111. 111
     Laravelとは？
     今回のフレームワークの講義は
     Laravelを使って進めていきます
     

     View Slide

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）を使用します。
     

     View Slide

113. 113
     復習
     

     View Slide

114. 114
     フレームワークとは（復習）
     明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。
     - フレームワーク（Web アプリケーションフレームワーク）
     - モノを作成する際、0 から全て作るのはとても大変
     - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー
     ション完成までの手間を少なくするソフトウェア
     - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ
     ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある）
     ライブラリとの違い
     - ライブラリは自分が作成するプログラム から 利用する部品
     - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける
     - フレームワークは自分が作成するプログラム が 利用される部品
     

     View Slide

115. 115
     Webアプリケーションフレームワークとは？
     Laravelとは？
     - Webアプリケーションの開発をサポートするために設計されたもの
     - よく用いられる機能のためのライブラリを提供
     Webアプリケーションに必要な共通機能をあらかじめ用意することで、完成までの手間
     を少なくするソフトウェアです。
     

     View Slide

116. 116
     Webアプリケーションに必要な機能とは？
     Laravelとは？
     - DBと接続・データ取得（MVCのM）
     - テンプレートエンジン（MVCのV）
     - ルーティング
     - ログイン認証処理
     - 基本的なセキュリティ
     - セッション管理
     といった機能が必要になります。
     

     View Slide

117. 117
     様々な言語で提供されるフレームワーク
     Laravelとは？
     - CakePHP（PHP）
     - Ruby on Rails（Ruby）
     - Django（Python）
     - Spring Framework（Java）
     などなど、様々な言語で、多くのフレームワークが用意されています。
     それぞれに設計思想や特徴があるので、興味のある人は調べてみましょう。
     

     View Slide

118. 118
     参考：Ruby on Railsが与えた影響
     Laravelとは？
     - Ruby on Rails (Ruby製のWebアプリケーションフレームワーク)
     - 2004年に発表されその後人気になった
     - 簡単にWebアプリケーションが作れる
     - オブジェクト指向
     - MVCアーキテクチャ
     Webアプリケーションが簡単に作れるようになった
     これ以降に出てきたフレームワーク（Laravelも含む）は、
     Ruby on Railsの影響を大きく受けている
     

     View Slide

119. 119
     参考：Laravelの動静（Google トレンド日本）
     Laravelとは？
     赤：Ruby on Rails, 青：Laravel
     

     View Slide

120. 120
     参考：Laravelの動静（Google トレンド世界）
     Laravelとは？
     赤：Ruby on Rails, 青：Laravel
     

     View Slide

121. 121
     フレームワークを使うメリット
     Laravelとは？
     簡単に、安全に、短く書くことが可能になります。
     - 規約が用意されている
     - 規約に添うことで開発者ごとのコーディングのバラ付きが抑えられる
     - コードが構造化されている
     - MVCパターン、リポジトリパターンなど
     - 保守性向上
     - 便利なモノが用意されている
     - コマンドラインインターフェイス、ORMなど
     - 開発スピードアップ
     

     View Slide

122. 122
     フレームワークを使うデメリット
     Laravelとは？
     - 学習コストが増える
     - フレームワークのお作法の習得が必要（言語のお作法と別に）
     - 例：コマンドラインインターフェイス、ORMの記法、ルーティングなど
     - フレームワークの知識に偏ってしまう
     - 細かい仕組みを理解せずにアプリケーションが作れてしまうので、
     ブラックボックス化しやすい
     - カスタマイズしづらい（スクラッチと比べ）
     - アプリケーションの規模に対して冗長になる場合がある
     

     View Slide

123. 123
     Laravelの便利機能（の例）
     

     View Slide

124. 124
     Artisan について
     Laravelの便利機能
     - Laravelのコマンドラインインターフェイス
     - https://readouble.com/laravel/6.x/ja/artisan.html
     - Artisan = 職人という意味
     - php artisan ~ という記法で様々なコマンドを実行できる
     

     View Slide

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の起動（ちょっとしたデバッグとかに便利）
     

     View Slide

126. 126
     マイグレーションについて
     Laravelの便利機能
     - 移動・移行という意味。(wikipediaより引用)
     - ここではデータベースマイグレーションのこと
     - DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更な
     どを行うための機能
     マイグレーションのメリット
     - SQL文を作成して実行しなくても、簡単にテーブルを定義できる
     - テーブルの設計をコードで管理できる（マイグレーションファイル）
     - データベースがバージョンファイルにより管理される
     - 複数人での開発作業もやりやすくなる
     

     View Slide

127. 127
     .envファイルについて
     Laravelの便利機能
     - アプリケーションで使う各種設定が含まれる
     - データベースの接続設定
     - アプリケーション固有の環境変数（APP_KEYなど）
     - 開発環境や本番環境の切り替え
     - リストした値はPHPのスーパーグローバル変数へロードされる
     - 秘匿情報などを外部からアクセスできない形で保持できる
     .envファイルはGitHubなどにアップロードしてはいけません
     

     View Slide

128. 128
     .envファイルについて
     Laravelの便利機能
     ファイル内容の例
     

     View Slide

129. 129
     Laravelのディレクトリ構成
     

     View Slide

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 による依存パッケージ解決）
     ※フレームワークによってディレクトリ構成は異なります。
     

     View Slide

131. 131
     Laravelを
     MVCパターンで考えてみる
     

     View Slide

132. 132
     復習
     

     View Slide

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

     View Slide

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

     View Slide

135. 135
     MVCパターンの特徴（復習）
     服の一覧
     を見たい
     

     View Slide

136. 136
     MVCパターンの特徴（復習）
     服の一覧
     を見たい
     Requet
     Response
     GET /clothes
     服の一覧ページをレスポンスで返す
     ECショップから服の一覧データを取得したい場合の例
     

     View Slide

137. 137
     MVCパターンの特徴（復習）
     服の一覧
     を見たい
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     

     View Slide

138. 138
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ① 「/clothes」を元にControllerに遷移します。
     服の一覧
     を見たい
     

     View Slide

139. 139
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ② Controller側で「服の一覧を取得する」処理を呼び出します。
     服の一覧
     を見たい
     

     View Slide

140. 140
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ③DBからデータを取得したいので、Modelに遷移します。
     服の一覧
     を見たい
     

     View Slide

141. 141
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ④DBから必要なデータをModel経由で取得します。
     服の一覧
     を見たい
     

     View Slide

142. 142
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ⑤受け取ったデータをControllerに返します。
     服の一覧
     を見たい
     

     View Slide

143. 143
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ⑥受け取ったデータをViewに渡してレスポンスで返す形に加工します。
     服の一覧
     を見たい
     

     View Slide

144. 144
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     GET /clothes
     ⑦Controller側からレスポンスをクライアントに返す。
     服の一覧
     を見たい
     服の一覧ページをレスポンスで返す
     

     View Slide

145. 145
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     服の一覧
     を見たい
     MVCパターンの流れ
     

     View Slide

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 による依存パッケージ解決）
     ※フレームワークによってディレクトリ構成は異なります。
     

     View Slide

147. 147
     MVCパターンの特徴（復習）
     routes/
     app/Http/Controller
     app/
     DB
     app/resources/views
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     服の一覧
     を見たい
     

     View Slide

148. 148
     いろいろできる！
     便利そう！！
     今のところは、こう思ってもらえたら十分です
     次から実際にアプリケーションを作っていきます！
     

     View Slide

149. 149
     11:50まで休憩
     

     View Slide

150. 150
     2日目
     Laravelを使ってAPIを作成す
     る
     

     View Slide

151. 151
     講師担当: endu
     資料作成担当 : tosite
     + endu
     + kumak1
     

     View Slide

152. 152
     1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。
     このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。
     手を動かす作業でのスライドについて
     講義の進め方について
     「作業」がついているスライドは実際に手を動
     かしながら行うパートになります。実際にコー
     ディングをしたり、設定したりする作業で出て
     きます。
     「確認」がついているスライドは動作を確認し
     たり、返ってきた結果を確認します
     

     View Slide

153. 153
     ハンズオンパート講義中のターミナルについて
     講義の進め方について
     この講義で出てくるターミナルで実行する環境は、全てremote sshで接続している状態
     でのVSCodeのターミナルです。手元のPCのターミナルではないです。
     

     View Slide

154. 154
     ターミナルでよく使うコマンド
     講義の進め方について
     ターミナル上でディレクトリを移動したりします。
     そのために知っておくべきコマンドを載せておきます。
     他にもオプションなどありますが、基本はこの4つのコマンドを使うと覚えておいてくだ
     さい
     cd # ディレクトリ移動
     cd .. # 1つ上のディレクトリ階層に戻る
     ls # ファイル一覧を表示
     pwd # 現在のディレクトリを表示
     

     View Slide

155. 155
     アプリケーションを
     セットアップしよう
     

     View Slide

156. 156
     ConoHa VPSに教材をダウンロードしよう
     アプリケーションをセットアップしよう
     git をインストール
     sudo yum -y install git
     git --version
     git version 1.8.3.1
     git がインストールされているか確認
     

     View Slide

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
     ディレクトリ移動
     

     View Slide

158. 158
     ConoHa VPSに教材をダウンロードしよう
     アプリケーションをセットアップしよう
     sh init.sh
     セットアップ実行
     php artisan -V
     Laravel Framework 6.18.3
     バージョン確認
     

     View Slide

159. 159
     VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう
     アプリケーションをセットアップしよう
     VSCode側で「ファイル」→「Open」を選択してください
     「/var/www/html/gtn2020-laravel」入力してOKを入れてださい
     

     View Slide

160. 160
     VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう
     アプリケーションをセットアップしよう
     ディレクトリが変わっている事を確認します
     

     View Slide

161. 161
     DEMOを行います。
     アプリケーションをセットアップしよう
     

     View Slide

162. 162
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

163. 163
     マイグレーションを行い、アプリケーションで必要
     なテーブルを作成しよう
     アプリケーションをセットアップしよう
     ① MariaDBにログインしてDatabaseを作成
     ② .envにMySQLのパスワードを追加
     ③ マイグレーションを実行する
     ④ ホストURLにアクセスする
     

     View Slide

164. 164
     アプリケーションをセットアップしよう
     ①MariaDBにログインしてDatabaseを作成
     mysql -uroot -p
     Enter password:
     # laravelという名前のDBを作成する
     CREATE DATABASE laravel;
     # DBがちゃんと作られているか確認
     SHOW DATABASES;
     # mysqlから抜ける
     exit;
     DBの名前はlaravelでつくります。
     

     View Slide

165. 165
     アプリケーションをセットアップしよう
     DEMOを行います。
     

     View Slide

166. 166
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

167. 167
     アプリケーションをセットアップしよう
     ②.envにMySQLのパスワードを追加
     /var/www/gtb2020-laravel/.env
     

     View Slide

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
     

     View Slide

169. 169
     アプリケーションをセットアップしよう
     DEMOを行います。
     

     View Slide

170. 170
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

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)
     

     View Slide

172. 172
     アプリケーションをセットアップしよう
     ③マイグレーションを実行する
     USE laravel;
     SHOW TABLES;
     # MariaDBログイン（初日にメモしておいたMySQLのパスワードを使います）
     mysql -uroot -p
     Enter password:
     # tableを確認
     

     View Slide

173. 173
     アプリケーションをセットアップしよう
     DEMOを行います。
     

     View Slide

174. 174
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

175. 175
     ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をコピーしてブ
     ラウザで確認する。
     (ダッシュボード画面)
     (詳細画面)
     アプリケーションをセットアップしよう
     ④ホストにアクセスする
     

     View Slide

176. 176
     アプリケーションをセットアップしよう
     アクセスしたら問題なく「API Tester」が表示されるのを確認してください。
     

     View Slide

177. 177
     アプリケーションをセットアップしよう
     DEMOを行います。
     

     View Slide

178. 178
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

179. 179
     API Testerを使ってみよう
     

     View Slide

180. 180
     API Testerを使ってみよう
     API画面
     ここで主に作成したAPIの動作検証を行います。Resultにレスポンスが返ってきます。
     

     View Slide

181. 181
     API Testerを使ってみよう
     Routes画面
     ルーティングとコントローラーの対応を見る事ができます。
     

     View Slide

182. 182
     API Testerを使ってみよう
     Logs画面
     エラーログを見る事ができます。
     

     View Slide

183. 183
     データを全表示
     API Testerを使ってみよう
     画面入力
     SUBMIT をクリック
     Selected Method get
     Uri /api/comments
     Parameters なし
     

     View Slide

184. 184
     API Testerを使ってみよう
     画面入力
     SUBMIT をクリック
     Selected Method get
     Uri /api/comments
     Parameters なし
     200
     （データ表示に成功）
     データを全表示
     

     View Slide

185. 185
     DEMOを行います。
     API Testerを使ってみよう
     

     View Slide

186. 186
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

187. 187
     API Testerを使ってみよう
     Parametersのkeyは「name」と「content」を追加してください
     

     View Slide

188. 188
     データを追加してPOSTでリクエストすると失敗するか確認しよう
     API Testerを使ってみよう
     画面入力
     SUBMIT をクリック
     Selected Method post
     Uri /api/comments
     Parameters name: 自由
     content: 自由
     

     View Slide

189. 189
     API Testerを使ってみよう
     画面入力
     SUBMIT をクリック
     405 エラー
     データを追加してPOSTでリクエストすると失敗するか確認しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自由
     content: 自由
     

     View Slide

190. 190
     DEMOを行います。
     API Testerを使ってみよう
     

     View Slide

191. 191
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

192. 192
     14:50まで休憩
     

     View Slide

193. 193
     APIのCRUDを実装しよう
     前半
     (Create,Read)
     

     View Slide

194. 194
     Create
     

     View Slide

195. 195
     CRUD の C(reate)。ルーティングに追加
     APIのCRUDを実装しよう
     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で開いてみよう
     

     View Slide

196. 196
     CRUD の C(reate)
     ルーティングに追加してレスポンスが返ってくるか確認
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method post
     Uri /api/comments
     Parameters name: 自由
     content: 自由
     

     View Slide

197. 197
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     200
     （ルーティングに成功）
     CRUD の C(reate)
     ルーティングに追加してレスポンスが返ってくるか確認
     Selected Method post
     Uri /api/comments
     Parameters name: 自由
     content: 自由
     

     View Slide

198. 198
     APIのCRUDを実装しよう
     CRUD の C(reate)
     ルーティングに追加してレスポンスが返ってくるか確認
     「422」が返ってきた場合は「value」になんらかの値を入力して試してください
     422 エラー
     

     View Slide

199. 199
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

200. 200
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

201. 201
     Model を artisan コマンドで作成
     APIのCRUDを実装しよう
     pwd
     /var/www/html/gtb2020-laravel #これが表示される事を確認してください。
     php artisan make:model Comment
     # 成功
     Model created successfully.
     ターミナルで下記のコマンドを実行しよう
     

     View Slide

202. 202
     Model を artisan コマンドで作成
     APIのCRUDを実装しよう
     

     View Slide

203. 203
     MVCパターンの特徴（復習）
     Route
     Controller Model
     DB
     View
     ①
     ②
     ③
     ④
     ⑤
     ⑥
     ⑦
     服の一覧
     を見たい
     MVCパターンの流れ
     

     View Slide

204. 204
     APIのCRUDを実装しよう
     namespace App;
     use Illuminate¥Database¥Eloquent¥Model;
     class Comment extends Model
     {
     protected $fillable = [
     'name',
     'content',
     ];
     }
     app/Comment.php をVSCodeで開いてみよう
     Model に $fillable を追加して、nameとcontentを追加する
     

     View Slide

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で開いてみよう
     

     View Slide

206. 206
     画面入力
     SUBMIT をクリック
     CRUD の C(reate)。再実行
     APIのCRUDを実装しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自分
     content: 自由
     201
     （DBにレコード追加）
     

     View Slide

207. 207
     画面入力
     SUBMIT をクリック
     CRUD の C(reate)。再実行
     APIのCRUDを実装しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自分
     content: 自由
     id を控えておく
     

     View Slide

208. 208
     画面入力
     SUBMIT をクリック
     CRUD の C(reate)。再実行
     APIのCRUDを実装しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自分
     content: 自由
     id を控えておく
     

     View Slide

209. 209
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

210. 210
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

211. 211
     Read
     

     View Slide

212. 212
     CRUD の R(ead)。ルーティングに追加
     APIのCRUDを実装しよう
     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で開いてみよう
     

     View Slide

213. 213
     CRUD の R(ead)。Controller に show の処理を追加
     APIのCRUDを実装しよう
     public function show($id)
     {
     return Comment::findOrFail($id);
     }
     app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
     

     View Slide

214. 214
     画面入力
     SUBMIT をクリック
     CRUD の R(ead)。実行
     APIのCRUDを実装しよう
     Selected Method get
     Uri /api/comments/{id
     の番号}
     Parameters
     

     View Slide

215. 215
     画面入力
     SUBMIT をクリック
     CRUD の R(ead)。実行
     APIのCRUDを実装しよう
     Selected Method get
     Uri /api/comments/{id
     の番号}
     Parameters create したデータが表示
     

     View Slide

216. 216
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

217. 217
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

218. 218
     16:10まで休憩
     

     View Slide

219. 219
     ORMのよもやま話
     

     View Slide

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
     

     View Slide

221. 221
     ORMの利点について紹介
     ORMのよもやま話
     1.SQLを書かず直感的にDBを操作する事ができる。
     2.リレーションを使った操作が楽に書ける。
     3.SQLインジェクションなどの攻撃に対して自動で防いでくれる
     4.取得したデータがオブジェクトなので編集がしやすい
     

     View Slide

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)
     

     View Slide

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)
     

     View Slide

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が返ってきます。
     

     View Slide

225. 225
     findOrFail
     ORMのよもやま話
     

     View Slide

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を保持している場合)
     

     View Slide

227. 227
     ORMのよもやま話
     Comment::user->name;
     SELECT user.name
     FROM comments
     LEFT JOIN user ON comments.user_id = user.id
     SQL
     ORM
     リレーションを使った操作が楽
     

     View Slide

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’)
     );
     

     View Slide

229. 229
     Q. ORMを積極的に使った方がいいのか？
     ORMのよもやま話
     

     View Slide

230. 230
     A. 場合による。ORMが使わない方が良い場合も当然ある。
     ORMのよもやま話
     (1)複数のtabelをまたぐ処理をORMで実装をしようとすると、実装が難しく
     なるケースがある
     (2)ORMの裏側で発行しているSQLが意図せずN+1問題を引き起こすケース
     もある
     

     View Slide

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
     

     View Slide

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が発行されてしまい、処理が重くなってしまいます。
     

     View Slide

233. 233
     ORMを使った方法だけを理解するのではなく、裏側で発行される
     SQLの意味を理解するためにも、素のSQLをしっかり書けるように
     学びましょう!
     ORMのよもやま話
     

     View Slide

234. 234
     16:45まで休憩
     

     View Slide

235. 235
     APIのCRUDを実装しよう
     後半
     (Update,Delete,Index)
     

     View Slide

236. 236
     Update
     

     View Slide

237. 237
     CRUD の U(pdate)。ルーティングに追加
     APIのCRUDを実装しよう
     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で開いてみよう
     

     View Slide

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で開いてみよう
     

     View Slide

239. 239
     CRUD の U(pdate)。
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method put/patch
     Uri /api/comments/
     Parameters name: 自由
     

     View Slide

240. 240
     CRUD の U(pdate)。Update Controller を追加
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method put/patch
     Uri /api/comments/
     Parameters name: 自由
     200
     name が更新される
     

     View Slide

241. 241
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

242. 242
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

243. 243
     Delete
     

     View Slide

244. 244
     CRUD の D(elete)。ルーティングに追加
     APIのCRUDを実装しよう
     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で開いてみよう
     

     View Slide

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で開いてみよう
     

     View Slide

246. 246
     CRUD の D(elete)。Delete Controller を追加
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method delete
     Uri /api/comments/34
     Parameters
     

     View Slide

247. 247
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

248. 248
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

249. 249
     Index
     

     View Slide

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で開いてみよう
     

     View Slide

251. 251
     API 実行してみよう - データを全表示
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method get
     Uri /api/comments
     Parameters
     

     View Slide

252. 252
     API 実行してみよう - データを全表示
     APIのCRUDを実装しよう
     画面入力
     SUBMIT をクリック
     Selected Method get
     Uri /api/comments
     Parameters
     200
     （データ表示に成功）
     

     View Slide

253. 253
     DEMOを行います。
     APIのCRUDを実装しよう
     

     View Slide

254. 254
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

255. 255
     18:05まで休憩
     

     View Slide

256. 256
     Validationを実装しよう
     

     View Slide

257. 257
     Validation を実装しよう
     利用者の
     個人情報
     悪意のある攻撃
     正常なリクエスト
     だと勘違いして、
     レスポンスを返し
     てしまう
     Validationなしの場合
     

     View Slide

258. 258
     Validation を実装しよう
     Validationありの場合
     利用者の
     個人情報
     悪意のある攻撃
     悪意のある攻撃を
     事前に防ぐように
     する
     

     View Slide

259. 259
     画面入力
     SUBMIT をクリック
     Validation に引っかかるようにAPIを実行してみよう
     Validation を実装しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自分
     content:
     

     View Slide

260. 260
     画面入力
     SUBMIT をクリック
     Validation に引っかかるようにAPIを実行してみよう
     Validation を実装しよう
     Selected Method post
     Uri /api/comments
     Parameters name: 自分
     content:
     422
     The content field is
     required.
     

     View Slide

261. 261
     今のValidation の実装をみてみよう
     Validation を実装しよう
     public function rules()
     {
     return [
     'name' => 'required', // nameパラメータは必須
     'content' => 'required', // contentパラメータは必須
     ];
     }
     app/Http/Request/Comments/Post.php をVSCodeで開いてみよう
     

     View Slide

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
     

     View Slide

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.
     

     View Slide

264. 264
     DEMOを行います。
     Validation を実装しよう
     

     View Slide

265. 265
     **:** まで各自で作業をしましょう。
     わからない事があったら、遠慮なくzoomのチャットに
     【質問】をつけてコメントしてください。
     それ以外のコメントも大丈夫です!
     

     View Slide

266. 266
     2日目終了〜！
     Webアプリフレームワーク入門
     REST API 入門
     研修は終了です！
     お疲れ様でした！
     

     View Slide

267. 267
     トラブルシューティング
     

     View Slide

268. 268
     ハンズオンで接続できない方がいたので、問題切り分けして挑みましょう。
     確認 : CUI で ConoHa に ssh 接続できますか？
     - できる (VS Code のセットアップの問題かも)
     - Remote-SSH を一旦アンインストール・インストールしよう
     - VS Code を一旦アンインストール・インストールしよう
     - できない (ConoHa のセットアップの問題かも)
     - 公開鍵をサーバーに登録しよう
     - 秘密鍵を改めてChromeでダウンロードしよう (原因確率は低)
     VS Code で Remote-SSH で ConoHa に接続できない
     

     View Slide

269. 269
     確認 : CUI で ConoHa に ssh 接続できますか？
     VS Code で Remote-SSH で ConoHa に接続できない
     ssh Conoha
     .ssh/config の設定は皆できましたね。
     Mac の方は Terminal 、 Windows の方は Git Bash で ssh できるか確認しましょう。
     実行するコマンド (.ssh/config に登録した Hostname が Conoha の場合)
     実行結果 （接続できた場合）
     

     View Slide

270. 270
     コマンドを実行して公開鍵を登録します。事前に以下の3つを確認しましょう。
     - 秘密鍵のPath (.ssh/config に書いてあるよ)
     - ConoHaのIP (.ssh/config に書いてあるよ)
     - ConoHaのrootパスワード
     秘密鍵が利用でき、公開鍵を生成できるか確認するコマンド
     公開鍵をサーバーに登録しよう
     VS Code で Remote-SSH で ConoHa に接続できない
     ssh-keygen -y -f
     

     View Slide

271. 271
     公開鍵を生成できることを確認したら、ConoHa に登録しましょう。
     実行するコマンド
     実行したらrootパスワードを聞かれるので、入力してEnterキーを押します。
     問題なさそうであれば、再びConoHaにssh接続してみよう
     公開鍵をサーバーに登録しよう
     VS Code で Remote-SSH で ConoHa に接続できない
     ssh-keygen -y -f | ssh root@ 'cat >> .ssh/authorized_keys'
     

     View Slide