もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 に参加してきました

以下のイベントに行ってきました。

SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜
http://scripty.connpass.com/event/8340/

紳士かどうかはわからんですが、Yahooで使われているフロントエンドまわりの技術についての勉強会です。以下、セッション毎の感想、まとめ。

「本当にあった怖いCSS 〜BEMのすすめ〜」
  • BEMとは。CSS命名規則。Block, Elemennt, Modifierから成る。詳しくはggr
  • カオスになりがちなCSSの設計をオブジェクト指向的に表現出来る。かなり素敵な印象。
  • 調べればわかるけど、その規則上、クラス名が長くなりがち。だけど慣れますwとのこと。確かに超長い。
  • Bootstrapとかフレームワーク使う時はケースバイケース
  • idはJS用に抑えておいてclassにBEMをベースに実装してけばいい感じ。とりあえず自分で個人的にやってるサイトを書き換えてみよーかと。
「backbone.js 光と闇」
  • 複雑なクライアントロジックに耐えられる
  • backbone自体がjqueryで作られているので今までのjQueryベースが生かせる
  • backboneはあくまで仕切りなのでシンプル
  • yahooではmarionette.jsも使ってる
  • 最初からMarionette使えたら使う方が良いよ。
  • Angularは学習コストが高め。
「Angular.jsとThree.jsを一緒に使った時の話」
  • Angular.jsとThree.jsを使ってWebGL感満載のサイトをYahooの社内ベンチャーみたいな取り組みで作ってみたという話。ちなみにJSはトータルで9000ステップくらい。Angular入れてここまで減らしたとのこと。
「コードデザインの解剖 Polymer 編」
  • Polymer.jsの話。Web Componentsが使えないブラウザ向けのライブラリ。例によってGoogle先生謹製。最近、名前はよく聞くなあ。
  • 先生が提唱しているマテリアルデザインとも密に関係している。マテリアルデザインを実現するコンポーネントをPolymerで提供する事でみんなGoogle先生が目指す世界に近づけるよ!みたいな。
  • ただ、まあまだ不安定なのでYahooは思想だけ参考にしたライブラリを作ったよ
  • ビジュアルデザインのコード化という思想。雰囲気見た目を揃えましょうみたいなガイドラインではなく、コードベースでデザインを統一化する。これも素敵。
  • Polymerは名前こそ結構浸透してるものの実際取り入れているところは少ない印象。でもカスタムコンポーネント作ってそれを組み合わせるだけでページが作れたら素敵。先行投資として今から勉強しといた方がいいすな。
マイナーブラウザとのつき合い方
  • ログ見て自分のサイトにあった対応を考えな!で終わると寂しいので考え方の話。
  • 全てのブラウザに同じ機能・見た目を提供するのは無理。以下の2パターンでアプローチするといいが、これからは2の方で進めるべき

1. プログレッシブ・エンハンスメント(一般的環境を基準にし、進んだ環境には+@で進んだものを提供)
2. グレースフル・デグラデーション(最近の環境を基準にし、古い環境にはレベルを落とす)

  • 新しすぎるブラウザへの対応は
  • Web標準の流れをちゃんと追いかけるのは重要
  • CSSは定期的にメンテナンスする。標準化の流れを追いかけるのが重要。
「突撃!隣のgruntfile!」
  • フロントエンドまわりのツールではbowerやらyeomen使ってたり、htmlテンプレートとしてjade使ってたり。でもyeomenはWindowsでバグある。
  • Jadeは個人的にも使ってるけど結構好き。
「ライブコーディングのすゝめ」
  • Node.jsのライブコーディング。20分くらいでcanvas使って書かれた画像をサーバー側に保存するサイト作ってた。
  • コーディングしてる人がパーフェクトJavaScript書いた人で思わぬところで神に遭遇する。
  • まあEmacsなんすよ。。。
  • Atomは注目してるよ!とは言われた。

簡単な感想

Yahooのフロントで実際に使われている技術の一端を知る事ができたのはよかったです。フロント周りは進化が早いので追っかけて行くのは大変だけど大事なことだなーと再認識。自分の仕事で色々取り入れて行きたいけど、そもそもフロント周りのトレンドに興味がある人が少なそうなので難しい。。。前は一人でgrunt入れようとしたりSassで書き換えようとしたりしたけど、結局自分だけの書けるようになっても意味ないので周りの巻き込み方が難しいすなあ。色々課題。
ちなみにステッカー作ってたけど第2回、3回とか続くのかな?