第19回 HTML5+JS勉強会発表資料
オレオレフロントエンド開発環境~際限なき修正を攻略せよ!~2015.11.19 (Thu)沖 良矢(世路庵)第19回 HTML5+JS 勉強会@ 代々木TechBuzzSpace
View Slide
自己紹介沖 良矢(OKI Yoshiya)• 世路庵(せろあん)• インタラクションデザイナー• フリーランス8年目KAMABOKO ROAD TO 1000(2015)lynda.com 日本語版トレーナー (2015)Web Designing 連載(2009~2015)
話すこと1. フロントエンドを取り巻く状況と課題2. 改善の手法
フロントエンドを取り巻く状況と課題The situation & issues of frontend1.
みなさんのことをお聞かせくださいPlease tell me your context.引用:eviloars CC BY-NC 2.0https://www.flickr.com/photos/29513210@N00/4837529409//
私の活動領域広告 コーポレート ECサイネージ アプリ 執筆・講演
フロントエンドに関する職能• ビジュアルデザイン• グラフィックデザイン• Webデザイン• UIデザイン• ユーザービリティ• アクセシビリティ• IA• マーケティング• SEO• SEM• セキュリティ• データベース• API• 写真• 映像• アニメーション• 3DCG• 音楽• 効果音• ライティング• 電子書籍などなどただし、実装技術(HTMLとか)を除く
職能と技術• ビジュアルデザイン• Webデザイン• マーケティング• SEO• SEM• API+実装技術• 写真• 映像• アニメーション• 3DCG• 音楽• ライティング
ここで思い出話をひとつ
Flashを使っていますか?83.451.721.401020304050607080901002009年 2012年 2014年引用:Webデザイナー白書(マイナビ)
近いうちに習得したいものは?2009年• Flash• AIR2012年• HTML5• JavaScript• PHP• WordPress2014年• JavaScript• PHP• WordPress引用:Webデザイナー白書(マイナビ)※ベスト10から技術的なものを抜粋
現代で要求される実装技術(例)
単純に時間がかかるIt's simple, very time consuming.引用:tom_bennett CC BY-NC 2.0https://www.flickr.com/photos/67721596@N00/2298433461/
度重なる修正や急な対応を際限なく求められることが多く、実はかなり被拘束力が高い。裁量権があるようでない仕事です週刊SPA!引用:https://instagram.com/p/8e-xaMJnMN/?taken-by=daishiro
主な原因対象デバイスの増加(スマートフォン、タブレット)ファイルサイズパフォーマンスデバッグ工程上の問題技術革新のスピード
改善の手法Methods of improvement2.
みなさんのことをお聞かせくださいPlease tell me your context.自分でコントロールできることを改善していくImprove that you can control yourself.
環境から見た改善IDE:IntelliJ IDEAコーディング:Pixelapse、Extractデバッグ:Charles、Remote TestKit、BrowserStackAPI:API Blueprint
言語から見た改善HTML:Emmet + Assemble (Handlebars)CSS:SassJavaScript:CoffeeScript + Browserifyビルド:Grunt
整理整頓は、人生の半分であるドイツのことわざ
オススメ書籍『無印良品は、仕組みが9割』松井 忠三(角川書店)
マニュアル作りのポイントDRY(Don't repeat yourself)ググれば分かることも明文化現場の自分たちで作るしかない権威主義、属人主義を捨てるマニュアルをアップデートし続ける「どのように行動するか」だけでなく、「何のために作業をするか」も。
まとめ知識を蓄積し、共有しよう銀の弾丸はない技術は目的を達成する手段
http://ceroan.jp/2015.11.19 (Thu)