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
690
これからはじめるシングルページアプリケーション
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
800
writer.appを支える技術
yuhiisk
0
890
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
390
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.8k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
640
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9k
Porting a visionOS App to Android XR
akkeylab
0
860
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
240
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
650
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
16k
Jakarta EE Meets AI
ivargrimstad
0
160
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
200
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
490
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
101
38k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
Embracing the Ebb and Flow
colly
86
4.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
350
Scaling GitHub
holman
460
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Writing Fast Ruby
sferik
628
62k
Speed Design
sergeychernyshev
32
1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Being A Developer After 40
akosma
90
590k
Site-Speed That Sticks
csswizardry
10
710
BBQ
matthewcrist
89
9.7k
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/
ありがとうございました