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

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

Transcript

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

   View Slide

2. 自己紹介
   沖 良矢（OKI Yoshiya）
   • 世路庵（せろあん）
   • インタラクションデザイナー
   • フリーランス8年目
   KAMABOKO ROAD TO 1000
   (2015)
   lynda.com 日本語版
   トレーナー (2015)
   Web Designing 連載
   (2009～2015)
   

   View Slide

3. 話すこと
   1. フロントエンドを取り巻く状況と課題
   2. 改善の手法
   

   View Slide

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

   View Slide

5. みなさんのことをお聞かせください
   Please tell me your context.
   引用：eviloars CC BY-NC 2.0
   https://www.flickr.com/photos/29513210@N00/4837529409//
   

   View Slide

6. 私の活動領域
   広告 コーポレート EC
   サイネージ アプリ 執筆・講演
   

   View Slide

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

   View Slide

8. 職能と技術
   • ビジュアルデザイン
   • Webデザイン
   • マーケティング
   • SEO
   • SEM
   • API
   ＋実装技術
   • 写真
   • 映像
   • アニメーション
   • 3DCG
   • 音楽
   • ライティング
   

   View Slide

9. ここで思い出話をひとつ
   

   View Slide

10. Flashを使っていますか？
    83.4
    51.7
    21.4
    0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    100
    2009年 2012年 2014年
    引用：Webデザイナー白書（マイナビ）
    

    View Slide

11. 近いうちに習得したいものは？
    2009年
    • Flash
    • AIR
    2012年
    • HTML5
    • JavaScript
    • PHP
    • WordPress
    2014年
    • JavaScript
    • PHP
    • WordPress
    引用：Webデザイナー白書（マイナビ）
    ※ベスト10から技術的なものを抜粋
    

    View Slide

12. 現代で要求される実装技術（例）
    

    View Slide

13. 単純に時間がかかる
    It's simple, very time consuming.
    引用：tom_bennett CC BY-NC 2.0
    https://www.flickr.com/photos/67721596@N00/2298433461/
    

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide