Download as PDF, PPTX
Uploaded byHoriguchi Seito
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
- 1.
- 2. Profile @seito_horiguchi Front-End-Engineer 最近twitter始めました @seito_horiguchi
- 3.
- 4.
- 5. 1st gulp ・神ツール。できることが超広がります。 （Sass,ectのコンパイル、html,css,js,画像圧縮、複数デバイスでの同時チェッ ク,SVGアイコン画像のwebフォント化、スプライト化など） ・GruntJSよりカスタマイズしやすかった ・綺麗な書き方するのは難しい（ベストプラクティスがまだ見つかりませぬ） @seito_horiguchi
- 6.
- 7. CSS設計 OOCSS @seito_horiguchi 2nd ・拡張性、保守性を意識したCSSの構成。書き方 ・SMACSS,OOCSSはオススメ。どんな案件にも使えそう。 ・BEMは周囲の環境によりけり。（独特かつ厳格なルールなので、社内やチー ムで浸透させづらい。）
- 8.
- 9. スタイルガイドジェネレーター @seito_horiguchi 3rd ・モジュールの一覧。ボタンとか見出しとか。 ・あるとチームメンバーへの共有や運用フェーズで役に立つ。 ・Grunt,gulpがあればとっても使いやすい。 ・作るのに手間がちょいかかるため、CSS書くスピードは落ちる。
- 10.
- 11. ECT ECT @seito_horiguchi 4th ・PHPやJSのようにHTMLが書けるテンプレートエンジン。 ・爆速でhtmlが書け、後からくる修正対応もなんのその。 ・jade,ejsと比較して、最もコンパイルが速いって言ってるブログがあった けどURLは忘れました
- 12.
- 13. アイコンWebフォント化 @seito_horiguchi 5th ・今までは実装が超面倒だったけど、gulp導入で障壁ががくんと下がった。 （Terminalでコマンド１つ叩くだけ） ・ここ最近の解像度の乱立化により、使うメリットがでかくなってきたかも ・IE11,Android4.2など、モダン環境でバグが少しあるのが難点 ・実装する際にはキックオフでデザイナーに相談しておく必要あり。PSDが 出揃ってからだとキツい
- 14.
- 15. 内部SEO対策（厳しめ） @seito_horiguchi 6th ・HTML5ではh1が複数使えるようになったらしいですが、使いません。 （参考http://html5experts.jp/tsuj/2333/） ・各ページのh1はユニークに。 ・そのページで”本当に重要なもの”だけに重要なタグを使い、重要性を高め た（サイドバーとかフッターの見出しなんてpタグでええやん）
- 16.
- 17. PhpStorm @seito_horiguchi 7th ・最近バージョン8になって、機能的には完全にsublimeText3を抜いちゃっ た気がする ・学習コスト低いです。sublimeText2,3使ってた人なら半日で十分 ・SCのoption + cmd + Oが強力。（試してみてね！） ・ただし有料です…。でも無料トライアル2ヶ月あります。
- 18.
- 19. Google インドアビュー @seito_horiguchi 8th ・設置の仕方がGoogleMap同様、iframeかJS。JSだと自由度高いけど情 報が少なくて辛い。 ・ただ建物内を撮影するだけじゃなく、アイデア次第で面白いことが色々で きそう。（弊社の場合は写真内にお面をかぶせたCTOを立たせるなどしま した。） ・お値段は3~9万円くらい（内容次第）
- 20.