すごく良かった！！
まとめると TypeScript, Angular2, BEM, Sass, gulp 使って開発しろっていうカンファレンスでした。
Are you a Designer or an Engineer?
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
スライド
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ではなく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