Soumettre la recherche
Mettre en ligne
フロントエンド初学者がSPAに手を出してみた
•
39 j'aime
•
73,010 vues
Kei Yagi
Suivre
シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 16
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
Contenu connexe
Tendances
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Single-page application
Single-page application
Fumio SAGAWA
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後
Narami Kiyokura
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
MyBatis を利用した web application 開発についてのご紹介
MyBatis を利用した web application 開発についてのご紹介
Tokuhiro Matsuno
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
How do you like knockout?
How do you like knockout?
Narami Kiyokura
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
Narami Kiyokura
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
Takahiro Moteki
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
Angular2
Angular2
Kenichi Kanai
20150531 phpcon kansai
20150531 phpcon kansai
kumamidori
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
Tendances
(20)
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Single-page application
Single-page application
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後
Flux react現状確認会
Flux react現状確認会
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
MyBatis を利用した web application 開発についてのご紹介
MyBatis を利用した web application 開発についてのご紹介
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
How do you like knockout?
How do you like knockout?
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Angular2
Angular2
20150531 phpcon kansai
20150531 phpcon kansai
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
En vedette
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
SPAのルーティングの話
SPAのルーティングの話
ushiboy
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
Akira Kubo
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
Takuma Hanatani
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
Mariko Hayashi
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
En vedette
(12)
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
React を導入したフロントエンド開発
React を導入したフロントエンド開発
今からでも遅くない! React事始め
今からでも遅くない! React事始め
SPAのルーティングの話
SPAのルーティングの話
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Similaire à フロントエンド初学者がSPAに手を出してみた
Webデザインにおける「見えづらい」こだわりハック
Webデザインにおける「見えづらい」こだわりハック
Flavor Bright
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
Wataru Sakashita
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
真一 藤川
地域情報アプリ
地域情報アプリ
yohei iwakura
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
Tomoki Hasegawa
Jquery 140522
Jquery 140522
Akihiro Sugiyama
もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
Chloe Takahashi
自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール
Rikiya Suzuki
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
KinkumaDesign
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
React way at_eight
React way at_eight
Hideharu Okuma
Web開発の 今までとこれから
Web開発の 今までとこれから
Shinichi Takahashi
Bracketsについて
Bracketsについて
Shuichi Takaya
Dspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告について
Kazuya.Naraoka
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
モバイルWebアプリケーションを複数端末で動かすために注意すること
モバイルWebアプリケーションを複数端末で動かすために注意すること
dsuke Takaoka
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
Similaire à フロントエンド初学者がSPAに手を出してみた
(20)
Webデザインにおける「見えづらい」こだわりハック
Webデザインにおける「見えづらい」こだわりハック
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
地域情報アプリ
地域情報アプリ
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
Jquery 140522
Jquery 140522
もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
通常の3倍の速度でプログラミング!?「 Emacsキーバインドのすすめ」
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
React way at_eight
React way at_eight
Web開発の 今までとこれから
Web開発の 今までとこれから
Bracketsについて
Bracketsについて
Dspを活用したアプリ向けリターゲティング広告について
Dspを活用したアプリ向けリターゲティング広告について
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
モバイルWebアプリケーションを複数端末で動かすために注意すること
モバイルWebアプリケーションを複数端末で動かすために注意すること
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Plus de Kei Yagi
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
Vue.js Outline
Vue.js Outline
Kei Yagi
GPUインスタンシングとAnimation Texture Baker
GPUインスタンシングとAnimation Texture Baker
Kei Yagi
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
はじめてのVue.js
はじめてのVue.js
Kei Yagi
iOS11について本気出して考えてみた
iOS11について本気出して考えてみた
Kei Yagi
Structure synth
Structure synth
Kei Yagi
Context free
Context free
Kei Yagi
Plus de Kei Yagi
(9)
Vue Router + Vuex
Vue Router + Vuex
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Vue.js Outline
Vue.js Outline
GPUインスタンシングとAnimation Texture Baker
GPUインスタンシングとAnimation Texture Baker
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
はじめてのVue.js
はじめてのVue.js
iOS11について本気出して考えてみた
iOS11について本気出して考えてみた
Structure synth
Structure synth
Context free
Context free
Dernier
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 03 CTEA
2024 03 CTEA
arts yokohama
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
Dernier
(12)
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 04 minnanoito
2024 04 minnanoito
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 03 CTEA
2024 03 CTEA
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
フロントエンド初学者がSPAに手を出してみた
1.
フロントエンド初学者が SPAに手を出してみた 2014/
9/ 8
2.
自己紹介 八木 啓太 (やぎ
けいた) ! SI企業に勤務、Webへの関心から 2011年デジタルハリウッドスクールに入学。 現在は株式会社Art&Strategyの ディレクターとして従事。 ! twitter: @shafflife https://twitter.com/shafflife
3.
シングルページWebアプリケーション(SPA)とは? ・単一Webページで構成 !
・サーバーが行う処理の大半をクライアント側に移行 ! ・ページ遷移、画面全体の更新を行わず、 部分的な更新が行える
4.
SPA = 最近の技術?
古くはJava, Flashを使ったアプリケーションがあった →現在はJavascript(JS)を使った開発が注目 http://games.whomwah.com/spacelander.html
5.
SPA = シングルページデザイン?
1枚ページで完結するWebページと仕組みがちょっと違う http://bohemiancoding.com/sketch/
6.
従来のWebページ html css
HTTP Request (初回) HTTP Response クライアントサーバー js 各種ファイル HTTP Request (2回目以降) … HTTPプロトコルで指定のファイルを取得、リフレッシュ
7.
SPAの仕組み HTTP Request
(初回) html クライアントサーバー css js HTTP Response HTTP Request (2回目以降) … Ajax HTTPで初回に読み込んだファイルをDOM操作、 必要な部分をAjaxで取得
8.
SPAの実装例(1/4) http://engineer.typemag.jp/article/spa-dev http://www.hulu.jp
9.
SPAの実装例(2/4) http://qz.com/
10.
SPAの実装例(3/4) https://www.getcloudapp.com/
11.
SPAの実装例(4/4) https://trello.com/
12.
SPAを構築するには https://angularjs.org/ http://knockoutjs.com/
http://backbonejs.org/ http://www.sencha.com/ http://emberjs.com/ 主にJavascriptフレームワークを使って開発
13.
DEMO http://emberjs.com/
14.
SPAまとめ メリット ・単一Webページで構成
→ ページのメンテナンスをJSでコントロール ! ・サーバーが行う処理の大半をクライアント側に移行 → サーバー側にかかる処理・負荷を減らせる ! ・ページ遷移、画面全体の更新を行わず、部分的な更新が行える → 画面遷移が早い ! ⇒動的コンテンツのあるWebサービス構築に強い デスクトップアプリケーションのような軽快さ、UX
15.
SPAまとめ デメリット ・単一Webページで構成
→ JSの書き方次第でパフォーマンスに影響、敷居が高い (逆にJSをレベルアップするチャンス?) ! ・サーバーが行う処理の大半をクライアント側に移行 → サーバー自体の性能は変わらず、そちらは別対策が必要(Node.js等) ! ・ページ遷移、画面全体の更新を行わず、部分的な更新が行える → SEO対策が苦手 ! ⇒静的コンテンツの多いサイト制作に不向き
16.
ご清聴ありがとうございました
Télécharger maintenant