Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

448jp | OKI Yoshiya

November 19, 2015
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Programming

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