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
mikakane
November 24, 2018
Programming
1
1.2k
フロントエンドで作る理由
FRONTEND CONFERENCE 2018 での登壇資料です。
mikakane
November 24, 2018
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.3k
コーディングがわからない
mikakane
0
130
Web制作現場のディレクションを支えるGitHub
mikakane
0
540
nuxt.js で plugins を作る
mikakane
0
770
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.9k
Laravel Package Development
mikakane
16
6.4k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2.1k
Firebase で作る Web アプリケーション
mikakane
1
150
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
690
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Is Xcode slowly dying out in 2025?
uetyo
1
260
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
77
25k
PipeCDのプラグイン化で目指すところ
warashi
1
270
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
2.5k
Hack Claude Code with Claude Code
choplin
3
960
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Embracing the Ebb and Flow
colly
86
4.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Designing for Performance
lara
610
69k
Typedesign – Prime Four
hannesfritz
42
2.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Unsuck your backbone
ammeep
671
58k
What's in a price? How to price your products and services
michaelherold
246
12k
Music & Morning Musume
bryan
46
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
フロントエンドで作る理由 後藤 知宏 フロントエンドで作る理由
フロントエンドで作る理由 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
フロントエンドで作る理由 フロントエンドしてますか? フロントできない… 興味はあるけど SPA は… といった声をまだまだ耳にします。
フロントエンドで作る理由 フロントできない理由 バックエンド脳 SPA案件が無い まだ時期じゃない
フロントエンドで作る理由 フロントできない理由 バックエンド脳 バックエンドでも十分だから… SPA案件が無い お客さんから言われることがないので… まだ時期じゃない フロントの技術は複雑で選定が難しいから…
フロントエンドで作る理由 まだ時期じゃない? フロントエンドはどんどん簡単になっている。 バックエンドでも出来るから… は言い訳にならない
フロントエンドで作る理由 Vue.js HTML/JS ベースでシンプルに導入可能 とっつきやすさ、学びやすさは最高レベル データバインディングやコンポーネントなど モダンフロントに必要な機能は一通り完備 極論、JSできなくても Vue.js 出来る
jQuery 並みの感覚で使えるツール
フロントエンドで作る理由 Nuxt.js ファイル置くだけで自動でルート作成 SPA 構築がここまで簡単になった。 Vue.js の使いやすさはそのままに、 プリレンダリングで SEO や
OGP のニーズにも対応 モジュールを利用して、 画像のレイジーロードや PWA 化も簡単に
フロントエンドで作る理由 vue-cli プロジェクトのスケルトンを生成するツール コマンドで簡単にプロジェクトの初期セットアップが可能 複雑な Webpack 設定を自動で構築 もう面倒な webpack.config.js の構築で悩まなくていい
lint の設定やテスト設定なども自動化 out of box で使えるセットアップツール
フロントエンドで作る理由 Hosting 静的ファイル構成のメリットの一つに 高速なホスティングが利用できる点が Firebase Hosting に加え、 Netlifyなら Github 連携での自動デプロイも
S3 を自前で用意して CI 経由で自動デプロイ構築する… みたいな面倒な時代はもう終わった
フロントエンドで作る理由 Jest / ava 複雑な設定が必要だった mocha のテストから テストツールは Zero Configuration
の時代に Firebase Hosting に加え、 Netlifyなら Github 連携での自動デプロイも S3 を自前で用意して CI 経由で自動デプロイ構築する… みたいな面倒な時代はもう終わった
フロントエンドで作る理由 SPA はより身近に、簡単に 数年前と比べるとフロント制作の地盤は大きく安定 なんならPWAも夢じゃない
フロントエンドで作る理由 技術選定の基準 実務で使える(安定性) みんなが使える(学習コスト) 効率化出来る(メリット) <- OK! <- OK!
フロントエンドで作る理由 わかりやすさは正義 私が使える ≠ 現場で使える 保守性と教育コストとのバランス勘定を
フロントエンドで作る理由 技術選定の基準 実務で使える(安定性) みんなが使える(学習コスト) 効率化出来る(メリット) <- OK! <- OK! <-
What?
フロントエンドで作る理由 Why SPA ? バックエンドでも出来るのに… SPAで制作することのメリットは
フロントエンドで作る理由 よくある例 SPA のページ遷移がぬるぬるで気持ちいいのは分かるけど 業務ツールでそれって必要? フロントって大変そう。SPA とか作りなれてない 非同期とか E2Eとか大変そう API
設計もなれていないので大変… 抽象的で汎用的なAPI ? 画面からコールする API の本数がやばい …
フロントエンドで作る理由 SPA制作 - フロント設計 ページ遷移が容易になるので、 一つの画面になんでも詰め込まなくても済む様に。 適切なナビゲーションを添えてシンプルな画面デザインに E2E なんかははじめから無理に頑張ら無くていい。 正解が見つけにくいフロント周りは、
リリースサイクルを早く回して検証を続けるのがBEST コーディングにせよ、デザインにせよ、品質管理にせよ、 SPA には SPA のやり方。慣れの問題。
フロントエンドで作る理由 SPA制作 - API 設計 無理に抽象化的なAPIを作成する必要はない。 特にGET周りはフォームと割り切る手も API の受け入れテストは簡単に作れるし、 品質管理上でもとても重要。
最悪ドキュメントとして兼用する手もある。 バックエンド(機能) をAPI 化することで 品質を担保 守りたい データ資産の安全性がフロントと分離され、 より挑戦的なフロント改善を促進する
フロントエンドで作る理由 変わる制作プロセス SPAにはSPAの制作フロー 作り方が変われば要件定義も変わる
フロントエンドで作る理由 これまでの制作フロー 大きな複機能を一度に進めるのはとても大変 機能1 機能2 機能3
フロントエンドで作る理由 SPA時代の制作フロー 大きな案件から、スケジュール単位の小さな案件に 機能1 機能2 機能3
フロントエンドで作る理由 SPA の案件は「作る」 お客さんからのリクエストを待つのではなく、 よりよい制作フローのために SPA を提案
フロントエンドで作る理由 怖くないフロントエンド 「バックエンドでもできる」の概念を捨てて、 「フロントでつくるとどうなる?」への挑戦 とりあえずやってみる。 良いところを取り入れ、悪いところには改善方法を 作り方の変化を、制作フロー全体に反映させていく
フロントエンドで作る理由 強くてニューゲーム バックエンド経験の上にフロントを積むのではなく、 ニューゲーム感覚で、新しい気持ちで挑めば
フロントエンドで作る理由 フロントに親しむ 数をこなしてフロント制作になれれば、 フロント制作が当たり前に フロントと切り離されていない、 テスト不十分なバックエンドは開発不安が大きい セッション、ほんとにしんどい フロントページ遷移におけるもっさり感 DOM のコンポーネント化もしんどい
フロントエンドで作る理由 フロントエンドを当たり前に フロントを当たり前に
フロントエンドで作る理由 Enjoy Frontend ! フロントを当たり前に
フロントエンドで作る理由 「何事にも先達はあらまほしきことかな」 徒然草 仁和寺のとある法師
フロントエンドで作る理由 lec cafe 気軽に学べるWeb 制作講座
フロントエンドで作る理由
フロントエンドで作る理由 技術顧問 中から改善できないなら、 外から改善してくれる、頼れる誰かに相談しよう
フロントエンドで作る理由 技術顧問 頼れる誰かに相談しよう 餅は餅屋 技術は技術屋に
フロントエンドで作る理由 Thanks!