「DMM.Study Night フロントエンド勉強会」に行ってきた
「DMM.Study Night フロントエンド勉強会」に行ってきました！
就職で地方から上京してきた私としては、東京での勉強会というのは憧れでした。
インターネットやWebが発展し時間や場所への制限が少なくなってきたとはいえ、こういう機会というのは地方では難しいのが現状だと思っています。このあたりの問題はどうにかなってほしいと思ってますし、どうにかしていかなければと思います。
それはさておき、今回はDMM.comさんが主催する勉強会「DMM.Study Night」。恵比寿ガーデンプレイスタワーにあるDMM.comのオフィスで行われました。
既にこの勉強会を開催しているそうですが、フロントエンドに全面に押し出した勉強会は初めてとのことでした。
4人公演されましたので、それぞれ書き下したメモを載せていきます。
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話
DMMにおいて、フロントエンドエンジニアという役割が明確になったのは1・2年前とのことであり、フロントエンドエンジニアは何をコントロールすべきかを整理してお話してくださいました。
以下内容。
全体
JSよりもCSSのルールぎめが重要。
下記を使っている。
css
- Sassを採用
- 設計はFLOCSSを採用
- 覚えづらいルールは極力排除
- 書式はLinterで制御
- 英名規則はBEM
- スタイルガイドの導入
Sass
ガッツリやると複雑なので、簡易的に以下に限定した
- 変数
- ネスト
- 親セレクタの景初
- コメント
下記は不採用 - 関数 - mixin/extend - などなど...
FLOCSSという考え方
- Foundation
- Layout
- Object
- Component
- Project
- Utillity
Object以下は、作業者のみが触る範囲。リードエンジニアは全体を触る。
- Component: パーツは全て個々
- Utillity: 設計者が用意・作用者は使うだけ
- Project: パーツとは無関係な独立ページ用
ComponentとUtillityで基本的に全て賄う→スピードの向上
スタイルガイド
- Gulpを使って.sccsファイルから直接スタイルガイドを自動生成
設計者が管理するために必要なもの
- CSS import
- Webpac Entorypoint
- などなど
フロントエンドエンジニアがいると
- メンテしやすい
- パフォーマンス高い
- バグが出にくい
Developertools表示しておけばネトゲやってても仕事してる感でる
タイトルからネタ的な話をするかとおもいきや、すごくためになる話でした笑。ChromeのDevelopertoolsを使うことはあっても、単純なブレークポイントくらいしか使ってなかったので知れて良かったです。
以下内容。
条件付きブレークポイント
通信のブレークポイント
- XHR Brakepoints
- call stack で一覧見れる
- 任意の通信を引っ掛けられる
- ポート番号も指定可能
- typeがXHRのリソースは右クリックからリプレイできる
計測ツール
- Networkパネル：コンテンツのダウンロード時間
- Timelineパネル：ダウンロードやレンダリングの時系列
- Profilesパネル:CPUの利用料など
通信周りから調べてみる
次にAuditsパネルを見る
- ネットワーク／ページパフォーマンスの2方向から検査してくれる
- JSまとめろ
- gzipで送れ
Chromeオンリーブラウザゲームがマルチブラウザ対応するまで
マルチブラウザ対応が大変とは聞くけど、その内容を初めて聞くことができました。実際には、はじめからChrome向けに書かれたものを後からマルチブラウザ対応にするのは大変だってのが今回の根本なんですが。
以下内容。（気になった言葉だけ抽出）
- Autoprefixer: CSSのマルチブラウザ対応に使える。ベンダー接頭語を自動付与する。
- Can I Use: 各ブラウザのCSS対応状況を確認できる
- pleeease: Gulpのプラグインで、utoplefixに圧縮、メディアクエリーをまとめてくれる
DMMの闇に触れた話
DMMには金沢にも拠点を持っており、そちらで活躍されているフロントエンドエンジニアの方のお話でした。勉強会後の懇親会でもお話したのですが、非常に楽しい面白い方でした。あちらの方で働き口を見つけたいときには、DMMさんにお話を聞きに行こうと思いました。
以下内容。（気になった言葉だけ抽出）
