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

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アプリケーションの実装⼿法

8. None
9. None
10. None
11. None

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. ありがとうございました