オレオレフロントエンド開発環境～際限なき修正を攻略せよ！～

オレオレフロントエンド開発環境～際限なき修正を攻略せよ！～ 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/[email protected]/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/[email protected]/2298433461/

度重なる修正や急な対応を際限なく求められることが多く、実はかなり被拘束力が高い。裁量権があるようでない仕事です週刊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)

オレオレフロントエンド開発環境～際限なき修正を攻略せよ！～

オレオレフロントエンド開発環境～際限なき修正を攻略せよ！～

448jp | OKI Yoshiya

More Decks by 448jp | OKI Yoshiya

Other Decks in Programming

Featured

Transcript