これからはじめるシングルページアプリケーション

2018/07/14 NEM #8

Transcript

1. これからはじめる シングルページアプリケーション 五⼗川 洋平 (POPCORN) 2018.07.14 NEM#8 
2. ⾃⼰紹介 • 五⼗川 洋平（イソップ）
 - 上越市在住のフリーランスエンジニア
 - ⽷⿂川市出⾝ • 趣味：ヨーヨー、バス釣り • Twitter：@yuhiisk • http://blog.yuhiisk.com
3. アジェンダ • シングルページアプリケーション（SPA）とは何か
4. アジェンダ • シングルページアプリケーション（SPA）とは何か • 事例から⾒るSPA
5. アジェンダ • シングルページアプリケーション（SPA）とは何か • 事例から⾒るSPA • フロントエンド実装の概要
6. シングルページアプリケーション （Single Page Application）
7. ⼀度ページを表⽰したら ページ遷移（再読込）をせずに ページの⼀部のみを更新する Webアプリケーションの実装⼿法
12. 毎回読み込み直すと時間がかかるから、
 必要な部分だけ更新する。
13. 毎回読み込み直すと時間がかかるから、
 必要な部分だけ更新する。 → ページの更新が速く、   ユーザー体験の向上が⾒込める
14. アプリケーション上のデータの扱い
 （保存・取得・変更・削除）

15. アプリケーション上のデータの扱い
 （保存・取得・変更・削除）
 → ブラウザ側からサーバーAPIを経由して⾏う
16. 従来のフォーム送信
17. HTMLフォームからデータを送信 従来のフォーム送信
18. サーバーはHTMLを返す 従来のフォーム送信
19. SPAの場合
20. クライアントからAjaxでリクエスト SPAの場合
21. サーバーからはレスポンスとして JSONデータを返す SPAの場合
22. フロントではシームレスなインターフェイスを提供。 
 サーバーではビジネスロジック、API実装に集中。
23. シングルページアプリケーション のメリット・デメリット
24. SPAのメリット
25. SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。  
 

26. SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 
 

27. SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。
 

28. SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。
 → ネイティブアプリと同等の機能を提供可能
 （アプリのキャッシュ、オフライン機能、Push通知など）
29. SPAのデメリット      

30. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
        

31. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
 → 遅延読み込みで対応      
  
32. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
 → 遅延読み込みで対応 • 実装コストが掛かる。    
  
33. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。  
  
34. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 • SEOに弱い。
  
35. SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 • SEOに弱い。
 → サーバーサイドレンダリングで解決
36. シングルページアプリケーション の事例
37. Googleのサービス
38. Gmail
39. Google Drive
40. Google Map
41. チャットサービス
42. Slack
43. Chatwork
44. データ表⽰がメインのサービス
45. SNSサービス
46. 仮想通貨取引所
47. SPAが向いているケース
48. SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション  
49. SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など
50. SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など • ユーザー⾃⾝が操作するツール系サービス、
 業務アプリケーションなど。
51. SPAが向いていないケース
52. SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト  
 
 
 

53. SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
 
 
 

54. SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
 → 情報を載せるだけの構成の場合、
   本当にSPAにする必要があるか？ 
 

55. SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
 → 情報を載せるだけの構成の場合、
   本当にSPAにする必要があるか？ • ゲーム開発
 

56. SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
 → 情報を載せるだけの構成の場合、
   本当にSPAにする必要があるか？ • ゲーム開発
 → リアルタイム性が求められる⾼速な描画処理が苦⼿。
   ゲーム⽤ライブラリを検討するのが無難。
57. というのを踏まえての採⽤基準
58. SPAの採⽤基準
59. SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
 
 
 
 
 

60. SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
 → SPAに向いているか？（メリットはあるか？）
 → ⼯数的に余裕があるか？ 
 
 
 

61. SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
 → SPAに向いているか？（メリットはあるか？）
 → ⼯数的に余裕があるか？ • 開発体制が確保できるか。
 
 
 

62. SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
 → SPAに向いているか？（メリットはあるか？）
 → ⼯数的に余裕があるか？ • 開発体制が確保できるか。
 → 開発作業の全てを⼀⼈で対応するのは難しい。
 → フロントヘビーな開発なので、
   実装できるフロントエンジニアを確保できるか。

63. SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
 → SPAに向いているか？（メリットはあるか？）
 → ⼯数的に余裕があるか？ • 開発体制が確保できるか。
 → 開発作業の全てを⼀⼈で対応するのは難しい。
 → フロントヘビーな開発なので、
   実装できるフロントエンジニアを確保できるか。
 → サーバーAPIを実装できる⼈がいるか。
64. シングルページアプリケーション の開発構成
65. 全体の構成 フロントエンド開発 サーバー開発
66. 全体の構成 フロントエンド開発 サーバー開発
67. フロントエンド開発
68. フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 

69. フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを
 利⽤するのが⼀般的。
70. フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを
 利⽤するのが⼀般的。 • 今何かと話題のやつ…！
71. フロントエンド開発
72. フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。
73. フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。 • 仕組みについては後ほど。
74. 全体の構成 フロントエンド開発 サーバー開発
75. サーバー開発
76. サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。
77. サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
78. サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。 • 最近はクラウドでのサーバーレス構成も⼈気。
79. サーバー開発 正直なところ、APIが⽤意できればなんでもいい。 
 WordPressのREST APIや 公開されているWeb APIでも要件を満たせていればOK。
80. 全体の構成 フロントエンド サーバー
81. 全体の構成 フロントエンド サーバー 組み合わせは⾃由。
82. 実際のプロダクトでの例 • React + Django • React + CakePHP3 • Angular + Firebase + Google Cloud Platform
 （Cloud Storage, Cloud Functions)
83. SPA開発の技術選定 • まずはチームで慣れている・やりやすい⾔語や技術を
 選ぼう。
84. シングルページアプリケーション のフロントエンド開発⼿法
85. フロントエンド開発の第⼀歩は JSフレームワークと仲良くなる
86. の前に、✋
87. 今回はフレームワーク間で共通する話を
88. フレームワークどれがいいの問題 • 今回は語りきれないので、以前作成したスライドを参照く ださい。
 
 https://speakerdeck.com/yuhiisk/spashi-zhuang-zui- qian-xian-jin-dokifalsejshuremuwakuxuan-bi
89. コンポーネント指向
90. コンポーネントとは？ コンポーネントとは、 状態・機能を持ったページを構成する部品
91. コンポーネントとは？
92. コンポーネントとは？
93. コンポーネントとは？
94. コンポーネントとは？
95. コンポーネント指向とは？
96. コンポーネント指向とは？ 積み⽊のようにコンポーネントを組み合わせる
97. コンポーネントだと何がいい？
98. コンポーネントだと何がいい？ • 再利⽤可能
99. コンポーネントだと何がいい？ • 再利⽤可能
100. コンポーネントだと何がいい？ • 再利⽤可能
101. コンポーネントだと何がいい？ • 再利⽤可能
102. コンポーネントだと何がいい？ • 外からデータや処理を与えることができる。
103. コンポーネントだと何がいい？ • 外からデータや処理を与えることができる。 ダイアログコンポーネント • දࣔ͢Δจষ • ϘλϯͷςΩετ • ϘλϯΛΫϦοΫͨ࣌͠ͷڍಈ
104. コンポーネントだと何がいい？ • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる 

105. コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる
106. コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる
107. コンポーネントだと何がいい？ • コンポーネント⾃⾝が状態を持てる { isActive: true } { isActive: false }
108. コンポーネントだと何がいい？ • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる • コードの影響範囲をカプセル化
 （個々にメソッドを実装したり、独⾃CSSを適⽤できる）
109. コンポーネントだと何がいい？ • コードの影響範囲をカプセル化 B A C
110. コンポーネントだと何がいい？ • コードの影響範囲をカプセル化 B A C 他のコンポーネントに影響しない
111. 全てコンポーネント指向
112. コンポーネント指向を念頭に
 チュートリアルをやってみる • 各フレームワークではチュートリアルが⽤意されているので、 まずはチュートリアルで雰囲気を掴む。 • React: https://reactjs.org/tutorial/tutorial.html • Angular: https://angular.jp/tutorial • Vue.js: https://jp.vuejs.org/v2/guide/
113. コンポーネント指向を念頭に
 何か作ってみる
114. コンポーネント指向を念頭に
 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 

115. コンポーネント指向を念頭に
 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。
116. コンポーネント指向を念頭に
 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。 3. フォローできるようにしてみる。
117. コンポーネント指向を念頭に
 まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。
118. コンポーネント指向を念頭に
 まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。 • ⾃分のアイデアをもとに⼿を動かしてみましょう。
119. 今⽇のまとめ
120. SPAまとめ
121. SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 

122. SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。
123. SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。 • サイト滞在時間の⻑いツール系のサービスに向いている。
124. SPAまとめ • 規模に応じて実装者を確保すること。
125. SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。
126. SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。 • フロントエンド開発はコンポーネント指向を意識する。
127. 【宣伝】Angularの⼊⾨動画を作りました https://www.udemy.com/angular-ja/
128. ありがとうございました