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
448jp | OKI Yoshiya
November 19, 2015
Programming
1
230
オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~
第19回 HTML5+JS勉強会発表資料
448jp | OKI Yoshiya
November 19, 2015
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
2
75
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
合意形成のためのFigma活用術
448jp
0
65
書く・即・DONEな仕組みをNuxtで作る
448jp
0
330
神速でワイヤーフレームを作るためのライブラリ
448jp
1
800
Figmaで神速ドキュメント作成術
448jp
3
2.2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
380
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
720
Other Decks in Programming
See All in Programming
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
530
CI改善もDatadogとともに
taumu
0
120
Spring gRPC について / About Spring gRPC
mackey0225
0
220
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
48
17k
ARA Ansible for the teams
kksat
0
150
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.1k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
330
color-scheme: light dark; を完全に理解する
uhyo
5
390
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
120
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
GitHub's CSS Performance
jonrohan
1030
460k
The Language of Interfaces
destraynor
156
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
A Philosophy of Restraint
colly
203
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Your Own Lightsaber
phodgson
104
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Site-Speed That Sticks
csswizardry
4
380
Transcript
オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~ 2015.11.19 (Thu) 沖 良矢(世路庵) 第19回 HTML5+JS 勉強会@ 代々木TechBuzzSpace
自己紹介 沖 良矢(OKI Yoshiya) • 世路庵(せろあん) • インタラクションデザイナー • フリーランス8年目
KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009~2015)
話すこと 1. フロントエンドを取り巻く状況と課題 2. 改善の手法
フロントエンドを取り巻く状況と課題 The situation & issues of frontend 1.
みなさんのことをお聞かせください Please tell me your context. 引用:eviloars CC BY-NC 2.0
https://www.flickr.com/photos/29513210@N00/4837529409//
私の活動領域 広告 コーポレート EC サイネージ アプリ 執筆・講演
フロントエンドに関する職能 • ビジュアルデザイン • グラフィックデザイン • Webデザイン • UIデザイン •
ユーザービリティ • アクセシビリティ • IA • マーケティング • SEO • SEM • セキュリティ • データベース • API • 写真 • 映像 • アニメーション • 3DCG • 音楽 • 効果音 • ライティング • 電子書籍 などなど ただし、実装技術(HTMLとか)を除く
職能と技術 • ビジュアルデザイン • Webデザイン • マーケティング • SEO •
SEM • API +実装技術 • 写真 • 映像 • アニメーション • 3DCG • 音楽 • ライティング
ここで思い出話をひとつ
Flashを使っていますか? 83.4 51.7 21.4 0 10 20 30 40 50
60 70 80 90 100 2009年 2012年 2014年 引用:Webデザイナー白書(マイナビ)
近いうちに習得したいものは? 2009年 • Flash • AIR 2012年 • HTML5 •
JavaScript • PHP • WordPress 2014年 • JavaScript • PHP • WordPress 引用:Webデザイナー白書(マイナビ) ※ベスト10から技術的なものを抜粋
現代で要求される実装技術(例)
単純に時間がかかる It's simple, very time consuming. 引用:tom_bennett CC BY-NC 2.0
https://www.flickr.com/photos/67721596@N00/2298433461/
None
度重なる修正や急な対応を際 限なく求められることが多く、 実はかなり被拘束力が高い。 裁量権があるようでない仕事 です 週刊SPA! 引用:https://instagram.com/p/8e- xaMJnMN/?taken-by=daishiro
主な原因 対象デバイスの増加(スマートフォン、タブレット) ファイルサイズ パフォーマンス デバッグ 工程上の問題 技術革新のスピード
改善の手法 Methods of improvement 2.
みなさんのことをお聞かせください Please tell me your context. 自分でコントロールできることを 改善していく Improve that
you can control yourself.
環境から見た改善 IDE:IntelliJ IDEA コーディング:Pixelapse、Extract デバッグ:Charles、Remote TestKit、BrowserStack API:API Blueprint
言語から見た改善 HTML:Emmet + Assemble (Handlebars) CSS:Sass JavaScript:CoffeeScript + Browserify ビルド:Grunt
整理整頓は、 人生の半分である ドイツのことわざ
オススメ書籍 『無印良品は、仕組みが9割』松井 忠三(角川書店)
マニュアル作りのポイント DRY(Don't repeat yourself) ググれば分かることも明文化 現場の自分たちで作るしかない 権威主義、属人主義を捨てる マニュアルをアップデートし続ける 「どのように行動するか」だけでなく、 「何のために作業をするか」も。
まとめ 知識を蓄積し、共有しよう 銀の弾丸はない 技術は目的を達成する手段
http://ceroan.jp/ 2015.11.19 (Thu)