Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これからはじめるシングルページアプリケーション
Search
Yohei Isokawa
July 14, 2018
Programming
0
680
これからはじめるシングルページアプリケーション
2018/07/14 NEM #8
Yohei Isokawa
July 14, 2018
Tweet
Share
More Decks by Yohei Isokawa
See All by Yohei Isokawa
今どきのWebアニメーション実装
yuhiisk
0
780
writer.appを支える技術
yuhiisk
0
880
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
390
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.8k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
Passkeys for Java Developers
ynojima
3
880
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
360
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
120
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
200
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
150
カクヨムAndroidアプリのリブート
numeroanddev
0
430
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
640
XSLTで作るBrainfuck処理系
makki_d
0
210
関数型まつりレポート for JuliaTokai #22
antimon2
0
130
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Bash Introduction
62gerente
614
210k
Typedesign – Prime Four
hannesfritz
42
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A better future with KSS
kneath
239
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Transcript
これからはじめる シングルページアプリケーション 五⼗川 洋平 (POPCORN) 2018.07.14 NEM#8
⾃⼰紹介 • 五⼗川 洋平(イソップ) - 上越市在住のフリーランスエンジニア - ⽷⿂川市出⾝ • 趣味:ヨーヨー、バス釣り
• Twitter:@yuhiisk • http://blog.yuhiisk.com
アジェンダ • シングルページアプリケーション(SPA)とは何か
アジェンダ • シングルページアプリケーション(SPA)とは何か • 事例から⾒るSPA
アジェンダ • シングルページアプリケーション(SPA)とは何か • 事例から⾒るSPA • フロントエンド実装の概要
シングルページアプリケーション (Single Page Application)
⼀度ページを表⽰したら ページ遷移(再読込)をせずに ページの⼀部のみを更新する Webアプリケーションの実装⼿法
None
None
None
None
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。 → ページの更新が速く、 ユーザー体験の向上が⾒込める
アプリケーション上のデータの扱い (保存・取得・変更・削除)
アプリケーション上のデータの扱い (保存・取得・変更・削除) → ブラウザ側からサーバーAPIを経由して⾏う
従来のフォーム送信
HTMLフォームからデータを送信 従来のフォーム送信
サーバーはHTMLを返す 従来のフォーム送信
SPAの場合
クライアントからAjaxでリクエスト SPAの場合
サーバーからはレスポンスとして JSONデータを返す SPAの場合
フロントではシームレスなインターフェイスを提供。 サーバーではビジネスロジック、API実装に集中。
シングルページアプリケーション のメリット・デメリット
SPAのメリット
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。 → ネイティブアプリと同等の機能を提供可能 (アプリのキャッシュ、オフライン機能、Push通知など)
SPAのデメリット
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 •
SEOに弱い。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 •
SEOに弱い。 → サーバーサイドレンダリングで解決
シングルページアプリケーション の事例
Googleのサービス
Gmail
Google Drive
Google Map
チャットサービス
Slack
Chatwork
データ表⽰がメインのサービス
SNSサービス
仮想通貨取引所
SPAが向いているケース
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など • ユーザー⾃⾝が操作するツール系サービス、 業務アプリケーションなど。
SPAが向いていないケース
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか?
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか? •
ゲーム開発
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか? •
ゲーム開発 → リアルタイム性が求められる⾼速な描画処理が苦⼿。 ゲーム⽤ライブラリを検討するのが無難。
というのを踏まえての採⽤基準
SPAの採⽤基準
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか?
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。 →
開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。 →
開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。 → サーバーAPIを実装できる⼈がいるか。
シングルページアプリケーション の開発構成
全体の構成 フロントエンド開発 サーバー開発
全体の構成 フロントエンド開発 サーバー開発
フロントエンド開発
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。 • 今何かと話題のやつ…!
フロントエンド開発
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。 • 仕組みについては後ほど。
全体の構成 フロントエンド開発 サーバー開発
サーバー開発
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
• 最近はクラウドでのサーバーレス構成も⼈気。
サーバー開発 正直なところ、APIが⽤意できればなんでもいい。 WordPressのREST APIや 公開されているWeb APIでも要件を満たせていればOK。
全体の構成 フロントエンド サーバー
全体の構成 フロントエンド サーバー 組み合わせは⾃由。
実際のプロダクトでの例 • React + Django • React + CakePHP3 •
Angular + Firebase + Google Cloud Platform (Cloud Storage, Cloud Functions)
SPA開発の技術選定 • まずはチームで慣れている・やりやすい⾔語や技術を 選ぼう。
シングルページアプリケーション のフロントエンド開発⼿法
フロントエンド開発の第⼀歩は JSフレームワークと仲良くなる
の前に、✋
今回はフレームワーク間で共通する話を
フレームワークどれがいいの問題 • 今回は語りきれないので、以前作成したスライドを参照く ださい。 https://speakerdeck.com/yuhiisk/spashi-zhuang-zui- qian-xian-jin-dokifalsejshuremuwakuxuan-bi
コンポーネント指向
コンポーネントとは? コンポーネントとは、 状態・機能を持ったページを構成する部品
コンポーネントとは?
コンポーネントとは?
コンポーネントとは?
コンポーネントとは?
コンポーネント指向とは?
コンポーネント指向とは? 積み⽊のようにコンポーネントを組み合わせる
コンポーネントだと何がいい?
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 外からデータや処理を与えることができる。
コンポーネントだと何がいい? • 外からデータや処理を与えることができる。 ダイアログコンポーネント • දࣔ͢Δจষ • ϘλϯͷςΩετ • ϘλϯΛΫϦοΫͨ࣌͠ͷڍಈ
コンポーネントだと何がいい? • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる { isActive: true } { isActive: false
}
コンポーネントだと何がいい? • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる • コードの影響範囲をカプセル化 (個々にメソッドを実装したり、独⾃CSSを適⽤できる)
コンポーネントだと何がいい? • コードの影響範囲をカプセル化 B A C
コンポーネントだと何がいい? • コードの影響範囲をカプセル化 B A C 他のコンポーネントに影響しない
全てコンポーネント指向
コンポーネント指向を念頭に チュートリアルをやってみる • 各フレームワークではチュートリアルが⽤意されているので、 まずはチュートリアルで雰囲気を掴む。 • React: https://reactjs.org/tutorial/tutorial.html • Angular:
https://angular.jp/tutorial • Vue.js: https://jp.vuejs.org/v2/guide/
コンポーネント指向を念頭に 何か作ってみる
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。 3. フォローできるようにしてみる。
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。 • ⾃分のアイデアをもとに⼿を動かしてみましょう。
今⽇のまとめ
SPAまとめ
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。 • サイト滞在時間の⻑いツール系のサービスに向いている。
SPAまとめ • 規模に応じて実装者を確保すること。
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。 • フロントエンド開発はコンポーネント指向を意識する。
【宣伝】Angularの⼊⾨動画を作りました https://www.udemy.com/angular-ja/
ありがとうございました