Pro Yearly is on sale from $80 to $50! »

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

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

第19回 HTML5+JS勉強会発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

November 19, 2015
Tweet

Transcript

  1. オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~ 2015.11.19 (Thu) 沖 良矢(世路庵) 第19回 HTML5+JS 勉強会@ 代々木TechBuzzSpace

  2. 自己紹介 沖 良矢(OKI Yoshiya) • 世路庵(せろあん) • インタラクションデザイナー • フリーランス8年目

    KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009~2015)
  3. 話すこと 1. フロントエンドを取り巻く状況と課題 2. 改善の手法

  4. フロントエンドを取り巻く状況と課題 The situation & issues of frontend 1.

  5. みなさんのことをお聞かせください Please tell me your context. 引用:eviloars CC BY-NC 2.0

    https://www.flickr.com/photos/29513210@N00/4837529409//
  6. 私の活動領域 広告 コーポレート EC サイネージ アプリ 執筆・講演

  7. フロントエンドに関する職能 • ビジュアルデザイン • グラフィックデザイン • Webデザイン • UIデザイン •

    ユーザービリティ • アクセシビリティ • IA • マーケティング • SEO • SEM • セキュリティ • データベース • API • 写真 • 映像 • アニメーション • 3DCG • 音楽 • 効果音 • ライティング • 電子書籍 などなど ただし、実装技術(HTMLとか)を除く
  8. 職能と技術 • ビジュアルデザイン • Webデザイン • マーケティング • SEO •

    SEM • API +実装技術 • 写真 • 映像 • アニメーション • 3DCG • 音楽 • ライティング
  9. ここで思い出話をひとつ

  10. Flashを使っていますか? 83.4 51.7 21.4 0 10 20 30 40 50

    60 70 80 90 100 2009年 2012年 2014年 引用:Webデザイナー白書(マイナビ)
  11. 近いうちに習得したいものは? 2009年 • Flash • AIR 2012年 • HTML5 •

    JavaScript • PHP • WordPress 2014年 • JavaScript • PHP • WordPress 引用:Webデザイナー白書(マイナビ) ※ベスト10から技術的なものを抜粋
  12. 現代で要求される実装技術(例)

  13. 単純に時間がかかる It's simple, very time consuming. 引用:tom_bennett CC BY-NC 2.0

    https://www.flickr.com/photos/67721596@N00/2298433461/
  14. None
  15. 度重なる修正や急な対応を際 限なく求められることが多く、 実はかなり被拘束力が高い。 裁量権があるようでない仕事 です 週刊SPA! 引用:https://instagram.com/p/8e- xaMJnMN/?taken-by=daishiro

  16. 主な原因 対象デバイスの増加(スマートフォン、タブレット) ファイルサイズ パフォーマンス デバッグ 工程上の問題 技術革新のスピード

  17. 改善の手法 Methods of improvement 2.

  18. みなさんのことをお聞かせください Please tell me your context. 自分でコントロールできることを 改善していく Improve that

    you can control yourself.
  19. 環境から見た改善 IDE:IntelliJ IDEA コーディング:Pixelapse、Extract デバッグ:Charles、Remote TestKit、BrowserStack API:API Blueprint

  20. 言語から見た改善 HTML:Emmet + Assemble (Handlebars) CSS:Sass JavaScript:CoffeeScript + Browserify ビルド:Grunt

  21. 整理整頓は、 人生の半分である ドイツのことわざ

  22. オススメ書籍 『無印良品は、仕組みが9割』松井 忠三(角川書店)

  23. マニュアル作りのポイント DRY(Don't repeat yourself) ググれば分かることも明文化 現場の自分たちで作るしかない 権威主義、属人主義を捨てる マニュアルをアップデートし続ける 「どのように行動するか」だけでなく、 「何のために作業をするか」も。

  24. まとめ 知識を蓄積し、共有しよう 銀の弾丸はない 技術は目的を達成する手段

  25. http://ceroan.jp/ 2015.11.19 (Thu)