Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Futoshi Endo

May 28, 2020
Tweet

More Decks by Futoshi Endo

Other Decks in Programming

Transcript

  1. 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にアクセスする
  2. 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 のよもやま話
  3. 19 Web の関連技術はとても扱いやすく、様々なところで利用されています。 - Chrome や Edge などのブラウザで企業やサービスのWebページを見る - オーソドックスな使われ方

    - PC・スマホ・テレビといった様々なデバイスから見ることができる - スマホのゲームアプリで通信を行いながら協力プレイをする - ブラウザ以外の様々なアプリもデータのやり取りに利用している Webについて(おさらい)
  4. 20 クライアントとサーバー サービスを提供する側をサーバー、サービスを受ける側をクライアントと呼びます。 (一般的な言葉になりつつありますね) - クライアントの代表例がブラウザ - Google Chrome -

    Microsoft Edge、Internet Explorer - Apple Safari - Mozilla Firefox - サーバーとして利用されている代表的なもの - Apache HTTP Server - Nginx (エンジンエックス) - Microsoft IIS (Internet Information Services) - LiteSpeed Web Server
  5. 21 URL と HTTP Web では次の2つがとても重要な要素となります。 - URL (Uniform Resource

    Locator) - 「欲しい情報がどこにあるのか」という場所を明確に示す - HTTP (HyperText Transfer Protocol) - URL で示した場所に対して「情報をどうしたいか」を通信で指示する 上記の2つをこれ以降もう少しだけ深掘りします。
  6. 22 URLとは URL を使うことで「どこになにがあるか」を簡単に示すことができます。 - URL がなかったら - あの企業サーバーの◦◦というカテゴリ下の△△というサブカテゴリをみて! -

    とても大変 - URL があったら - https://example.co/◦◦/△△/ をみて! - 場所を指し示すのにシンプルなルールを提供できたので、利用するのがとても 簡単になった
  7. 24 HTTP の良さ HTTP はそれまであったプロトコルよりかなり単純なものとなっています。 - 以前のプロトコル - SMTP や

    POP3/IMAP4 (メールで使用) - FTP (ファイル転送で使用) 等 - 複数の命令を組み合わせて目的の動作を行う - HTTP - (基本的に) 1つの命令で目的を果たせる - プロトコルが単純なため、サーバーやクライアントを実装しやすい HTTP を利用したプロダクトや事例が爆発的に増えました。
  8. 28 HTTP のやり取り 例えば、Yahoo! JAPAN のページを表示するまでを考えてみましょう。 - ブラウザから Yahoo! JAPAN

    のWebサーバーにトップページの情報をもらうために、 トップページのURL に対してリクエストを投げる - Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして HTML ファイルを返す - ブラウザが HTML ファイルを解析すると、CSS や JavaScript、画像といったファイ ルを追加で取得する必要があることが判明する - ブラウザからWebサーバーに 必要なものをもらうために投げる - サーバーからブラウザにリクエストされたものを返す - 以下これの繰り返し
  9. 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
  10. 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
  11. 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の バージョン
  12. 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 ファイルを返し ます。
  13. 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
  14. 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の バージョン ステータス コード ステータス テキスト
  15. 39 ステータスコード - 400番台はリクエストに問題があったことを表す - 400 Bad Request - 401

    Unauthorized - 認証が必要 - 403 Forbidden - 404 Not Found - 500番台はサーバー側に問題があったことを表す - 500 Internal Server Error - 503 Service Unavailable
  16. 40 ドキュメントルート Web サーバーに関連する用語の補足説明。 - ドキュメントルート - URL (https://<サーバー名>/) のトップ部分と対応するサーバー上のディレクトリのこと

    (≒ドキュメントルートにファイルを置くとWebに公開される) - Linux をWebサーバーにセットアップすると /home/www/html がドキュメントルートになる (設定ファイルで変更可能) - レンタルサーバーでは1つのサーバーを複数のお客様が利用するので、お客様のドメイン毎 にドキュメントルートを設定している ドキュメントルートにファイルを無造作に置くと、Webブラウザから簡単にアクセスされてしまう。 このため、見られてはいけないデータは /home/www/data などのドキュメントルート外のディレクトリ に置くようにしましょう。(情報漏えいの一部はドキュメントルートに誤ってファイルを置いたことで発生しま す。)
  17. 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://〜 になる
  18. 42 特定の誰かだけ利用させたい 提供するコンテンツによっては、会員だけが使えるとか、特定の人だけが使えるといった 制限をしたいことがよくあります。 - 認証 (Authentication) - 誰であるかを確認して、許可された人以外は許さない -

    (パスポート持ってるからあなたはNさん。Nさんなら顔パス) - (Twitter へのログインなど) - 認可 (Authorization) - 誰であるかに応じて、どのような権利があるかをコントロールする - (新幹線のチケット持ってるので、乗っていいですよ) - (Twitter 連携アプリの OAuth 2.0 など) 日本語でも似たような用語だし、英語でも両方とも略すと Auth になるので、混同される 事が多いので注意しましょう。
  19. 45 Web アプリケーションを分類してみる Web アプリケーションとして提供するものは、大きく分けて次の2つがあります。 - Webページを表示するためのアプリケーション - サーバーからは HTML,

    JavaScript, CSS, 画像などを返す - 古くから提供されてきたもの - スマホ等から利用されるアプリケーション - スマホアプリ等からアクセスされ、データの取得や更新を行う - 「データをどうやり取りをするか」という決まりをアプリケーション毎に決め て、クライアントとサーバーでやり取りを行う - この決まりのことを API (Application Programming Interface) という 今回の講義ではこの API の実装方法を学びます。
  20. 46 RESTful API API の設計方法にはいくつかの流儀があります。(RPC や SOAPなど) - Web API

    は SOAP (Simple Object Access Protocol) などで提供されていた - システム毎に複雑な仕様書 (XMLの構造など) のやり取りが必要 - 作成するシステムが複雑になりがち - RESTful API - URL が示すものに対して HTTP のメソッドを使って単純にアクセスする - 仕様がシンプルになるので、複数のシステム連携が比較的容易になる 昨今は RESTful API で提供するものが多いです。
  21. 47 REST という考え方 Web でシステムを構築するにあたって、どのようにすると効率がいいのかという考え方 が HTTP の規約を策定したメンバーの一人である Roy Fielding

    によって提唱された。 - REST (REpresentational State Transfer) - 拡張性のある Web システムを構築するためのアーキテクチャスタイル (設計の流儀や様式、作法) - クライアントとサーバーの間を URL と 統一インタフェース (リクエストメソッド) を使って、ステートレス にやり取りすることにより拡張性を高めるようにでき るとした考え - Web および HTTP そのものの原則と言える
  22. 48 CRUD という考え方 CRUD とは、データ操作で使う4つの基本機能のそれぞれの頭文字をとったものです。 これを RESTful API にマッピングすると以下の通りです。 -

    Create - データを生成する - POST <URL> - Read - データを読み取る - GET <URL> - Update - データを更新する - PUT <URL> or PATCH <URL> - Delete - データを削除する - DELETE <URL>
  23. 49 返却されるデータの形式 通常のWebアプリケーションでは HTML や JavaScript・CSS などが返却されますが、 API ではそれとは違った形式でデータを返却します。 -

    パース - プログラムでデータ (文字列) 解析すること - API で扱うデータはプログラムで処理しやすい形式を選ぶ (HTML や単なる複数行テキストはパースしづらい) - パースしやすいデータ形式 - XML (Extensible Markup Language) - データに対して厳密にタグを付与したデータ形式 - JSON (JavaScript Object Notation) - JavaScript でそのまま利用可能で、その他言語でも扱いやすい - 今回の講義では JSON を取り扱う
  24. 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
  25. 52 フレームワークとは 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク(Web アプリケーションフレームワーク) - モノを作成する際、0 から全て作るのはとても大変 -

    土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる(逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある) ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品
  26. 53 パターン プログラムを設計・実装において「誰もが似た事をしているな」ということがしばしば起 こります。 - パターン - 似たアプリケーションを作成する場合、後々拡張・修正しやすい共通のやり方 が出てくる -

    手法や手順に名前をつけ、エンジニア間で共通の語彙として会話ができるよう にしたモノ - アンチパターン - パターンは良いモノばかりではない - 「こういう風にすると良くないよ」と注意喚起するもの フレームワークはこのパターンを多く利用しており、その代表例がMVCパターンです。
  27. 54 MVCパターン - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 -

    Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする
  28. 55 MVCパターンの特徴 - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい -

    ディレクトリ構成(どこに何を置くか)は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており、これに従って 実装するので (比較的) 悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある
  29. 62 リモート接続するためのディレクトリとファイルを生成する ※ここからの作業はMacの方はTerminal、Windowsの方はGit for Windowsで作業をしてください cd ~ #ホームディレクトリに移動 mkdir ~/.ssh

    #ディレクトリを生成する touch ~/.ssh/config #設定ファイルを作成する ls -l ~/.ssh/config 最初にシークレットキーを置いておくディレクトリと、リモートサーバーの接続する際に利用され る設定ファイルも生成しておきます。(※既にある場合はここはスキップして大丈夫です) ConoHa VPSにLaravelを導入する
  30. 86 これから行う具体的な手順 ① VSCodeにRemote-SSHをインストールする ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する ③ VSCodeからConoHa VPSに接続する

    ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できるようにする VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
  31. 93 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する Host Conoha HostName {IPアドレス} User root

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

    Port 22 IdentityFile {秘密鍵が置いてあるパスを指定する} VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする
  33. 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上でコマンドライン操作でき るようにする
  34. 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)を使用します。
  35. 114 フレームワークとは(復習) 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク(Web アプリケーションフレームワーク) - モノを作成する際、0 から全て作るのはとても大変 -

    土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる(逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある) ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品
  36. 116 Webアプリケーションに必要な機能とは? Laravelとは? - DBと接続・データ取得(MVCのM) - テンプレートエンジン(MVCのV) - ルーティング -

    ログイン認証処理 - 基本的なセキュリティ - セッション管理 といった機能が必要になります。
  37. 117 様々な言語で提供されるフレームワーク Laravelとは? - CakePHP(PHP) - Ruby on Rails(Ruby) -

    Django(Python) - Spring Framework(Java) などなど、様々な言語で、多くのフレームワークが用意されています。 それぞれに設計思想や特徴があるので、興味のある人は調べてみましょう。
  38. 118 参考:Ruby on Railsが与えた影響 Laravelとは? - Ruby on Rails (Ruby製のWebアプリケーションフレームワーク)

    - 2004年に発表されその後人気になった - 簡単にWebアプリケーションが作れる - オブジェクト指向 - MVCアーキテクチャ Webアプリケーションが簡単に作れるようになった これ以降に出てきたフレームワーク(Laravelも含む)は、 Ruby on Railsの影響を大きく受けている
  39. 121 フレームワークを使うメリット Laravelとは? 簡単に、安全に、短く書くことが可能になります。 - 規約が用意されている - 規約に添うことで開発者ごとのコーディングのバラ付きが抑えられる - コードが構造化されている

    - MVCパターン、リポジトリパターンなど - 保守性向上 - 便利なモノが用意されている - コマンドラインインターフェイス、ORMなど - 開発スピードアップ
  40. 122 フレームワークを使うデメリット Laravelとは? - 学習コストが増える - フレームワークのお作法の習得が必要(言語のお作法と別に) - 例:コマンドラインインターフェイス、ORMの記法、ルーティングなど -

    フレームワークの知識に偏ってしまう - 細かい仕組みを理解せずにアプリケーションが作れてしまうので、 ブラックボックス化しやすい - カスタマイズしづらい(スクラッチと比べ) - アプリケーションの規模に対して冗長になる場合がある
  41. 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の起動(ちょっとしたデバッグとかに便利)
  42. 126 マイグレーションについて Laravelの便利機能 - 移動・移行という意味。(wikipediaより引用) - ここではデータベースマイグレーションのこと - DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更な どを行うための機能

    マイグレーションのメリット - SQL文を作成して実行しなくても、簡単にテーブルを定義できる - テーブルの設計をコードで管理できる(マイグレーションファイル) - データベースがバージョンファイルにより管理される - 複数人での開発作業もやりやすくなる
  43. 127 .envファイルについて Laravelの便利機能 - アプリケーションで使う各種設定が含まれる - データベースの接続設定 - アプリケーション固有の環境変数(APP_KEYなど) -

    開発環境や本番環境の切り替え - リストした値はPHPのスーパーグローバル変数へロードされる - 秘匿情報などを外部からアクセスできない形で保持できる .envファイルはGitHubなどにアップロードしてはいけません
  44. 130 ディレクトリの構成の一部(Laravel) Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる(諸説ある) - app/Http/Controller

    Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど(composer による依存パッケージ解決) ※フレームワークによってディレクトリ構成は異なります。
  45. 133 MVCパターン(復習) - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 -

    Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする
  46. 134 MVCパターンの特徴(復習) - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい -

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

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

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

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

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

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

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

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

    ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ
  55. 146 ディレクトリの構成の一部(Laravel) Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる(諸説ある) - app/Http/Controller

    Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど(composer による依存パッケージ解決) ※フレームワークによってディレクトリ構成は異なります。
  56. 164 アプリケーションをセットアップしよう ①MariaDBにログインしてDatabaseを作成 mysql -uroot -p Enter password: # laravelという名前のDBを作成する

    CREATE DATABASE laravel; # DBがちゃんと作られているか確認 SHOW DATABASES; # mysqlから抜ける exit; DBの名前はlaravelでつくります。
  57. 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)
  58. 184 API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method get Uri

    /api/comments Parameters なし 200 (データ表示に成功) データを全表示
  59. 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で開いてみよう
  60. 197 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック 200 (ルーティングに成功) CRUD の C(reate)

    ルーティングに追加してレスポンスが返ってくるか確認 Selected Method post Uri /api/comments Parameters name: 自由 content: 自由
  61. 201 Model を artisan コマンドで作成 APIのCRUDを実装しよう pwd /var/www/html/gtb2020-laravel #これが表示される事を確認してください。 php

    artisan make:model Comment # 成功 Model created successfully. ターミナルで下記のコマンドを実行しよう
  62. 203 MVCパターンの特徴(復習) Route Controller Model DB View ① ② ③

    ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ
  63. 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を追加する
  64. 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で開いてみよう
  65. 206 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method

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

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

    post Uri /api/comments Parameters name: 自分 content: 自由 id を控えておく
  68. 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で開いてみよう
  69. 213 CRUD の R(ead)。Controller に show の処理を追加 APIのCRUDを実装しよう public function

    show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう
  70. 215 画面入力 SUBMIT をクリック CRUD の R(ead)。実行 APIのCRUDを実装しよう Selected Method

    get Uri /api/comments/{id の番号} Parameters create したデータが表示
  71. 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
  72. 224 findOrFail ORMのよもやま話 public function show($id) { return Comment::findOrFail($id); }

    app/Http/Controllers/CommentController.php をVSCodeで開いてみよう findOrFailメソッドは該当するレコードが見つからない時、自動で404HTTP レスポンスを返してくれます。なのでこのメソッドを使用すればわざわざ明 確に404レスポンスを返すコードを書く必要はありません。 この場合はAPI Testerで存在しないIDを指定してリクエストをすると自動で 404が返ってきます。
  73. 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を保持している場合)
  74. 227 ORMのよもやま話 Comment::user->name; SELECT user.name FROM comments LEFT JOIN user

    ON comments.user_id = user.id SQL ORM リレーションを使った操作が楽
  75. 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’) );
  76. 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
  77. 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が発行されてしまい、処理が重くなってしまいます。
  78. 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で開いてみよう
  79. 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で開いてみよう
  80. 240 CRUD の U(pdate)。Update Controller を追加 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック

    Selected Method put/patch Uri /api/comments/ Parameters name: 自由 200 name が更新される
  81. 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で開いてみよう
  82. 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で開いてみよう
  83. 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で開いてみよう
  84. 261 今のValidation の実装をみてみよう Validation を実装しよう public function rules() { return

    [ 'name' => 'required', // nameパラメータは必須 'content' => 'required', // contentパラメータは必須 ]; } app/Http/Request/Comments/Post.php をVSCodeで開いてみよう
  85. 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
  86. 268 ハンズオンで接続できない方がいたので、問題切り分けして挑みましょう。 確認 : CUI で ConoHa に ssh 接続できますか?

    - できる (VS Code のセットアップの問題かも) - Remote-SSH を一旦アンインストール・インストールしよう - VS Code を一旦アンインストール・インストールしよう - できない (ConoHa のセットアップの問題かも) - 公開鍵をサーバーに登録しよう - 秘密鍵を改めてChromeでダウンロードしよう (原因確率は低) VS Code で Remote-SSH で ConoHa に接続できない
  87. 269 確認 : CUI で ConoHa に ssh 接続できますか? VS

    Code で Remote-SSH で ConoHa に接続できない ssh Conoha .ssh/config の設定は皆できましたね。 Mac の方は Terminal 、 Windows の方は Git Bash で ssh できるか確認しましょう。 実行するコマンド (.ssh/config に登録した Hostname が Conoha の場合) 実行結果 (接続できた場合)
  88. 270 コマンドを実行して公開鍵を登録します。事前に以下の3つを確認しましょう。 - 秘密鍵のPath (.ssh/config に書いてあるよ) - ConoHaのIP (.ssh/config に書いてあるよ)

    - ConoHaのrootパスワード 秘密鍵が利用でき、公開鍵を生成できるか確認するコマンド 公開鍵をサーバーに登録しよう VS Code で Remote-SSH で ConoHa に接続できない ssh-keygen -y -f <秘密鍵のPath>