Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
これからはじめる シングルページアプリケーション 五⼗川 洋平 (POPCORN) 2018.07.14 NEM#8
Slide 2
Slide 2 text
⾃⼰紹介 • 五⼗川 洋平（イソップ） - 上越市在住のフリーランスエンジニア - ⽷⿂川市出⾝ • 趣味：ヨーヨー、バス釣り • Twitter：@yuhiisk • http://blog.yuhiisk.com
Slide 3
Slide 3 text
アジェンダ • シングルページアプリケーション（SPA）とは何か
Slide 4
Slide 4 text
アジェンダ • シングルページアプリケーション（SPA）とは何か • 事例から⾒るSPA
Slide 5
Slide 5 text
アジェンダ • シングルページアプリケーション（SPA）とは何か • 事例から⾒るSPA • フロントエンド実装の概要
Slide 6
Slide 6 text
シングルページアプリケーション （Single Page Application）
Slide 7
Slide 7 text
⼀度ページを表⽰したら ページ遷移（再読込）をせずに ページの⼀部のみを更新する Webアプリケーションの実装⼿法
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。
Slide 13
Slide 13 text
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。 → ページの更新が速く、 ユーザー体験の向上が⾒込める
Slide 14
Slide 14 text
アプリケーション上のデータの扱い （保存・取得・変更・削除）
Slide 15
Slide 15 text
アプリケーション上のデータの扱い （保存・取得・変更・削除） → ブラウザ側からサーバーAPIを経由して⾏う
Slide 16
Slide 16 text
従来のフォーム送信
Slide 17
Slide 17 text
HTMLフォームからデータを送信 従来のフォーム送信
Slide 18
Slide 18 text
サーバーはHTMLを返す 従来のフォーム送信
Slide 19
Slide 19 text
SPAの場合
Slide 20
Slide 20 text
クライアントからAjaxでリクエスト SPAの場合
Slide 21
Slide 21 text
サーバーからはレスポンスとして JSONデータを返す SPAの場合
Slide 22
Slide 22 text
フロントではシームレスなインターフェイスを提供。 サーバーではビジネスロジック、API実装に集中。
Slide 23
Slide 23 text
シングルページアプリケーション のメリット・デメリット
Slide 24
Slide 24 text
SPAのメリット
Slide 25
Slide 25 text
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。
Slide 26
Slide 26 text
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。
Slide 27
Slide 27 text
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。
Slide 28
Slide 28 text
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。 → ネイティブアプリと同等の機能を提供可能 （アプリのキャッシュ、オフライン機能、Push通知など）
Slide 29
Slide 29 text
SPAのデメリット
Slide 30
Slide 30 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
Slide 31
Slide 31 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応
Slide 32
Slide 32 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。
Slide 33
Slide 33 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。
Slide 34
Slide 34 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 • SEOに弱い。
Slide 35
Slide 35 text
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 • SEOに弱い。 → サーバーサイドレンダリングで解決
Slide 36
Slide 36 text
シングルページアプリケーション の事例
Slide 37
Slide 37 text
Googleのサービス
Slide 38
Slide 38 text
Gmail
Slide 39
Slide 39 text
Google Drive
Slide 40
Slide 40 text
Google Map
Slide 41
Slide 41 text
チャットサービス
Slide 42
Slide 42 text
Slack
Slide 43
Slide 43 text
Chatwork
Slide 44
Slide 44 text
データ表⽰がメインのサービス
Slide 45
Slide 45 text
SNSサービス
Slide 46
Slide 46 text
仮想通貨取引所
Slide 47
Slide 47 text
SPAが向いているケース
Slide 48
Slide 48 text
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション
Slide 49
Slide 49 text
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など
Slide 50
Slide 50 text
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など • ユーザー⾃⾝が操作するツール系サービス、 業務アプリケーションなど。
Slide 51
Slide 51 text
SPAが向いていないケース
Slide 52
Slide 52 text
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト
Slide 53
Slide 53 text
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
Slide 54
Slide 54 text
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか？
Slide 55
Slide 55 text
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか？ • ゲーム開発
Slide 56
Slide 56 text
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか？ • ゲーム開発 → リアルタイム性が求められる⾼速な描画処理が苦⼿。 ゲーム⽤ライブラリを検討するのが無難。
Slide 57
Slide 57 text
というのを踏まえての採⽤基準
Slide 58
Slide 58 text
SPAの採⽤基準
Slide 59
Slide 59 text
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
Slide 60
Slide 60 text
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか？（メリットはあるか？） → ⼯数的に余裕があるか？
Slide 61
Slide 61 text
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか？（メリットはあるか？） → ⼯数的に余裕があるか？ • 開発体制が確保できるか。
Slide 62
Slide 62 text
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか？（メリットはあるか？） → ⼯数的に余裕があるか？ • 開発体制が確保できるか。 → 開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。
Slide 63
Slide 63 text
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか？（メリットはあるか？） → ⼯数的に余裕があるか？ • 開発体制が確保できるか。 → 開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。 → サーバーAPIを実装できる⼈がいるか。
Slide 64
Slide 64 text
シングルページアプリケーション の開発構成
Slide 65
Slide 65 text
全体の構成 フロントエンド開発 サーバー開発
Slide 66
Slide 66 text
全体の構成 フロントエンド開発 サーバー開発
Slide 67
Slide 67 text
フロントエンド開発
Slide 68
Slide 68 text
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。
Slide 69
Slide 69 text
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。
Slide 70
Slide 70 text
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。 • 今何かと話題のやつ…！
Slide 71
Slide 71 text
フロントエンド開発
Slide 72
Slide 72 text
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。
Slide 73
Slide 73 text
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。 • 仕組みについては後ほど。
Slide 74
Slide 74 text
全体の構成 フロントエンド開発 サーバー開発
Slide 75
Slide 75 text
サーバー開発
Slide 76
Slide 76 text
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。
Slide 77
Slide 77 text
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
Slide 78
Slide 78 text
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。 • 最近はクラウドでのサーバーレス構成も⼈気。
Slide 79
Slide 79 text
サーバー開発 正直なところ、APIが⽤意できればなんでもいい。 WordPressのREST APIや 公開されているWeb APIでも要件を満たせていればOK。
Slide 80
Slide 80 text
全体の構成 フロントエンド サーバー
Slide 81
Slide 81 text
全体の構成 フロントエンド サーバー 組み合わせは⾃由。
Slide 82
Slide 82 text
実際のプロダクトでの例 • React + Django • React + CakePHP3 • Angular + Firebase + Google Cloud Platform （Cloud Storage, Cloud Functions)
Slide 83
Slide 83 text
SPA開発の技術選定 • まずはチームで慣れている・やりやすい⾔語や技術を 選ぼう。
Slide 84
Slide 84 text
シングルページアプリケーション のフロントエンド開発⼿法
Slide 85
Slide 85 text
フロントエンド開発の第⼀歩は JSフレームワークと仲良くなる
Slide 86
Slide 86 text
の前に、✋
Slide 87
Slide 87 text
今回はフレームワーク間で共通する話を
Slide 88
Slide 88 text
フレームワークどれがいいの問題 • 今回は語りきれないので、以前作成したスライドを参照く ださい。 https://speakerdeck.com/yuhiisk/spashi-zhuang-zui- qian-xian-jin-dokifalsejshuremuwakuxuan-bi
Slide 89
Slide 89 text
コンポーネント指向
Slide 90
Slide 90 text
コンポーネントとは？ コンポーネントとは、 状態・機能を持ったページを構成する部品
Slide 91
Slide 91 text
コンポーネントとは？
Slide 92
Slide 92 text
コンポーネントとは？
Slide 93
Slide 93 text
コンポーネントとは？
Slide 94
Slide 94 text
コンポーネントとは？
Slide 95
Slide 95 text
コンポーネント指向とは？
Slide 96
Slide 96 text
コンポーネント指向とは？ 積み⽊のようにコンポーネントを組み合わせる
Slide 97
Slide 97 text
コンポーネントだと何がいい？
Slide 98
Slide 98 text
コンポーネントだと何がいい？ • 再利⽤可能
Slide 99
Slide 99 text
コンポーネントだと何がいい？ • 再利⽤可能
Slide 100
Slide 100 text
コンポーネントだと何がいい？ • 再利⽤可能
Slide 101
Slide 101 text
コンポーネントだと何がいい？ • 再利⽤可能
Slide 102
Slide 102 text
コンポーネントだと何がいい？ • 外からデータや処理を与えることができる。
Slide 103
Slide 103 text
コンポーネントだと何がいい？ • 外からデータや処理を与えることができる。 ダイアログコンポーネント • දࣔ͢Δจষ • ϘλϯͷςΩετ • ϘλϯΛΫϦοΫͨ࣌͠ͷڍಈ
Slide 104
Slide 104 text
コンポーネントだと何がいい？ • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる
Slide 105
Slide 105 text
コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる
Slide 106
Slide 106 text
コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる
Slide 107
Slide 107 text
コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる { isActive: true } { isActive: false }
Slide 108
Slide 108 text
コンポーネントだと何がいい？ • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる • コードの影響範囲をカプセル化 （個々にメソッドを実装したり、独⾃CSSを適⽤できる）
Slide 109
Slide 109 text
コンポーネントだと何がいい？ • コードの影響範囲をカプセル化 B A C
Slide 110
Slide 110 text
コンポーネントだと何がいい？ • コードの影響範囲をカプセル化 B A C 他のコンポーネントに影響しない
Slide 111
Slide 111 text
全てコンポーネント指向
Slide 112
Slide 112 text
コンポーネント指向を念頭に チュートリアルをやってみる • 各フレームワークではチュートリアルが⽤意されているので、 まずはチュートリアルで雰囲気を掴む。 • React: https://reactjs.org/tutorial/tutorial.html • Angular: https://angular.jp/tutorial • Vue.js: https://jp.vuejs.org/v2/guide/
Slide 113
Slide 113 text
コンポーネント指向を念頭に 何か作ってみる
Slide 114
Slide 114 text
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ
Slide 115
Slide 115 text
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。
Slide 116
Slide 116 text
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。 3. フォローできるようにしてみる。
Slide 117
Slide 117 text
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。
Slide 118
Slide 118 text
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。 • ⾃分のアイデアをもとに⼿を動かしてみましょう。
Slide 119
Slide 119 text
今⽇のまとめ
Slide 120
Slide 120 text
SPAまとめ
Slide 121
Slide 121 text
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。
Slide 122
Slide 122 text
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。
Slide 123
Slide 123 text
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。 • サイト滞在時間の⻑いツール系のサービスに向いている。
Slide 124
Slide 124 text
SPAまとめ • 規模に応じて実装者を確保すること。
Slide 125
Slide 125 text
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。
Slide 126
Slide 126 text
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。 • フロントエンド開発はコンポーネント指向を意識する。
Slide 127
Slide 127 text
【宣伝】Angularの⼊⾨動画を作りました https://www.udemy.com/angular-ja/
Slide 128
Slide 128 text
ありがとうございました