20160305 フロントエンドカンファレンスのメモ

すごく良かった！！
まとめると TypeScript, Angular2, BEM, Sass, gulp 使って開発しろっていうカンファレンスでした。

# Are you a Designer or an Engineer?
&nbsp;twitter.com/yamasy1549
http://yamasy.info
NIT, Akashi College 2nd grade
17歳

スライド
http://www.slideshare.net/yamasy1549s/are-you-a-designer-or-an-engineer

ハッカソンに参加
はじめはコード書けなかったので発表資料とか作っていた。イラレに詳しくなった
ランディングページとか作るようになった
rubygirlに参加
インターンでお仕事でコード書くようになって人に見られるコードを意識するようになった
はじめはjQueryとか今はgulp。rubygirlの講師とかも
Could you hire me?

フロントエンドカンファレンスで前で登壇している「女子高専の彼女がすごい」というよりも、これからの世代がこうなっていくというプレッシャーな気がする。今、エンジニアしてる人は、うかうかしてると2000年生まれに追い抜かれるぞ、と。 #frontkansai

# 大型フロントエンド開発におけるTypeScriptとDDD
奥野 賢太郎
https://twitter.com/armorik83


スライド

https://speakerdeck.com/armorik83/da-xing-hurontoendokai-fa-niokerutypescripttoddd

ES5, ES2015 のどちらか迷った
最初はBabel
苦しかったのでTypeScriptに変更
AngularJSを採用
ソースのコメント
　各行に説明は残さない
　意図を残す
チームに入って一週間経った人にヒアリングして課題を見つける
　開発環境がわからない問題はドキュメントを作って解決
コーディングスタイルの統一はlintで
デザイナーとの連携
　SCSS, BEMを利用
　JSにはスタイルを書かない
　HTMLテンプレートはエンジニア
　axross/bemmerおすすめ
デザイン仕様書
　はじめはGitHub Wiki
　　検索できないのでリポジトリにコミットするように
テスト
　power-assertおすすめ
　mocha + power-assertを使ってる
E2Eテスト
　PageObjectパターンを使ってる
　it()の中でElement取得やEventの発火を行わない
　Sauce Lab を利用
Karmaテスト
　止むを得ずViewがステートを保持する場合の検証
タスクランナー
　gulpを使用
検証環境
　プルリクごとにデプロイ
　デプロイした環境はバージョン毎にすべて残ってる。どのプルリクでバグが起きたか追える
ビルド
　browseriyをwebpackに変えたら1/5のスピードで完了
　tsc 7, webpack 6, tslint 20
TypeScript DDD
　約400のソース
　TypeScriptの型は便利
TypeScript
　1.8を利用
　全ソースがES2015+型付け
　Generics,abstract classの使用
　import前提、namespaceは不使用
　型定義はすべてリポジトリにPush
　　美しくないけど現状は
型の恩恵
　一ヶ月後の自分は他人
　全員がWebStorm
　テストが楽に（型はコンパイルがチェックしてくれるので）
　　実行時assertを使ってる。ビルド時に削除
　リファクタリング安心
ユビキタス言語
　チーム内で作った。エンジニア、デザイナー、ビジネス間で共通言語
　User, Message, Task
　Coreドメイン
　　User, Message< Taskなどのドメインモデル
　コレクション
　　Array<User>ではなくUsersと言うclassを作成
Viewフレームワーク
　Angular2移行中
@kyo_ago がちょこちょこ紹介されてた


# あなたの言葉で伝えるWebアクセシビリティ
小林 大輔 サイボウズ
https://twitter.com/sukoyakarizumu

スライド
http://www.slideshare.net/KobayashiDaisuke1/web-59111913/

サイボウズの社内で、アクセシビリティの重要性を、自分がどのように伝えてきたか話します
アクセシビリティのターゲットは障害者や高齢者だけではない。その人達はターゲットの一部であって、すべての人が対象
webアクセシビリティは、人とデバイスとコンテキストの多様性に対応するための技術
啓蒙活動は個人ではなくチームを対象としないとダメ
チームの理想に即していなければ、チームは動かない
ユーザは、チームの活動に参加したいと思って、チームにアクセスしようと思って、サイボウズの製品を使う
アクセシビリティを確保することは、チームに貢献したい、参加したい、というユーザのねがいを尊重すること
「あなたの言葉」で理想を考え、広め、行動しよう
翻訳できるのは自分たち
熱い話だった

# JSフレームワークの話
スライド

Designing in React: Why and How by fand/amagitakayosi
https://speakerdeck.com/fand/designing-in-react-why-and-how
初めてのAngular 2
https://speakerdeck.com/shinsuke_imai/chu-metefalseangular-2

# これからのデザインを考える
山下 一樹
http://ykazu.com/about/

デザイン？
デザイナーのユーザ体験。 「目的、機能、情報構造、骨格、ビジュアル」の5つによって構成されている
昔は使う人が自分で作った(石器など) デザイナーという位置が確立したのは産業革命以降
建築デザイナーがデザインした建物の中にインテリアデザインがあり、グラフィックデザインがあり、プロダクトデザインがあり… これらを途切れないように繋ぐのがデザイナー

# 10年超のサービスにSass導入してモダン化した話
大出 豪 REAS

今
　命名規則なし
　バージョン管理なし
　コードレビューなし
　デプロイは手作業
　ドキュメントなし
意見
　売上上がってるからモダン化とかいらないのでは
　社長から
　　事業スピードを落とさないモダン化
　　損得勘定できるモダン化
目標
　Laravelの導入
　gulpの導入
　BEMを導入
　SASSの導入
　ガイドライン作成
BEM
　Block, Element, Modifier
決まってきたルール
　原則cssのセレクタにidは指定しない
　is_redのようなスタイルの見た目を名前にしない
　ModifierはBlockとElementどちらにでも付与する
BEMの嬉しさ
　タグ変更しても大丈夫
　クラス名を見るだけで意味がわかる
　SASSとの相性がいい
決まりごと
　全ページ共通のcssと個別ページのcssの二本立て
　BEMで言う所のBlockごとのSASSファイルを作る
やった結果
　命名規則ができた
　みんなタスクランナー使えるようになった
　コーディングガイドラインができた
REASは2016年オープンになりたい

その他
Gulp ベストプラクティス
https://speakerdeck.com/jmblog/gulp-the-good-parts
Gulp ハンズオン資料
http://kfug.jp/handson/try_gulp/
Angular2 ハンズオン
http://kfug.jp/handson/try_angular2/
Webサイトパフォーマンス管理の基礎知識
http://www.slideshare.net/takehora/web-59093011