読者です 読者をやめる 読者になる 読者になる

思い出は銀の弾

ひよっこエンジニアが調べたことや経験したことをまとめます!

「DMM.Study Night フロントエンド勉強会」に行ってきた

勉強会 Web

「DMM.Study Night フロントエンド勉強会」に行ってきました!

就職で地方から上京してきた私としては、東京での勉強会というのは憧れでした。

インターネットやWebが発展し時間や場所への制限が少なくなってきたとはいえ、こういう機会というのは地方では難しいのが現状だと思っています。このあたりの問題はどうにかなってほしいと思ってますし、どうにかしていかなければと思います。

それはさておき、今回はDMM.comさんが主催する勉強会「DMM.Study Night」。恵比寿ガーデンプレイスタワーにあるDMM.comのオフィスで行われました。

f:id:masayuki610930:20151129215927j:plain

既にこの勉強会を開催しているそうですが、フロントエンドに全面に押し出した勉強会は初めてとのことでした。

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を使うことはあっても、単純なブレークポイントくらいしか使ってなかったので知れて良かったです。

以下内容。

条件付きブレークポイント

  • ブレークポイントして、右クリックして出てきたボックスにコードを書く
  • 実態は、Ture返したら止まるやつ
  • jQueryも呼べる
  • 非同期通信もちゃんと動く

通信のブレークポイント

  • XHR Brakepoints
  • call stack で一覧見れる
  • 任意の通信を引っ掛けられる
  • ポート番号も指定可能
  • typeがXHRのリソースは右クリックからリプレイできる

計測ツール

  • Networkパネル:コンテンツのダウンロード時間
  • Timelineパネル:ダウンロードやレンダリングの時系列
  • Profilesパネル:CPUの利用料など

通信周りから調べてみる

  • HARファイルを使ってみる
  • Webサイトを解析した結果情報
  • 中身はJson
  • 比較用のツール(HAR viewer)
  • PhantomJSを経由して、自動でとるスクリプトをかける

次にAuditsパネルを見る

  • ネットワーク/ページパフォーマンスの2方向から検査してくれる
  • JSまとめろ
  • gzipで送れ

Chromeオンリーブラウザゲームがマルチブラウザ対応するまで

マルチブラウザ対応が大変とは聞くけど、その内容を初めて聞くことができました。実際には、はじめからChrome向けに書かれたものを後からマルチブラウザ対応にするのは大変だってのが今回の根本なんですが。

以下内容。(気になった言葉だけ抽出)

  • Autoprefixer: CSSのマルチブラウザ対応に使える。ベンダー接頭語を自動付与する。
  • Can I Use: 各ブラウザのCSS対応状況を確認できる
  • pleeease: Gulpのプラグインで、utoplefixに圧縮、メディアクエリーをまとめてくれる

DMMの闇に触れた話

DMMには金沢にも拠点を持っており、そちらで活躍されているフロントエンドエンジニアの方のお話でした。勉強会後の懇親会でもお話したのですが、非常に楽しい面白い方でした。あちらの方で働き口を見つけたいときには、DMMさんにお話を聞きに行こうと思いました。

以下内容。(気になった言葉だけ抽出)