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

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

2018/07/14 NEM #8

2e2bdab232daaf7ae69abbce41e5a969?s=128

Yohei Isokawa

July 14, 2018
Tweet

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