大阪の梅田研修センターにて開催された、「FRONTEND CONFERENCE 2016」に参加してきました。「関西最大級のフロントエンドの祭典」と銘打たれた、記念すべき第１回目のカンファレンス。

会場が分かれており、参加したいセッションやハンズオンへ移動する形式でした。参加者はエンジニアさんのほうがかなり多かったみたいです。

参加理由

• Twitterで見た

• スタッフの中に前々からお会いしたかった方がいらっしゃったので

• デザイナーでも楽しめると聞いて

全体的な感想

６コマありましたが、半分はハンズオンに参加。聴いた３つのセッションはこちらです。

• 大型フロントエンド開発におけるTypeScriptとDDD

• Webサイトパフォーマンス管理の基礎知識

• グロースハックを実現する「モジュールデザイン」とCSS設計

良かったこと

全部理解できたかどうかというと正直できてないんですが、こちらのツイートを見てなるほど！と思いました。

そういうわけで、いろんなキーワードを「知る」ことができたのが大きな収穫でした！

あと、今回ハンズオンでGitやGulpなどを実際にインストールして使ってみることができました。私は、仕事ではデザインカンプの制作が主で、それらのツールを使うことがありません。興味はあり、過去に趣味で取り組んだものの謎のエラーが起き挫折しておりましたが、今回解消できたので良かったです！

気になったこと

Wifiがかなり混雑していました。ハンズオンの時が特につらく、必要なデータが全然ダウンロードできないのでその時だけテザリング通信してました。

あと、各セッション（ハンズオン含む）がどれくらいのレベルの人を参加対象としているのかがわかりにくかったです。どんな人に参加してもらいたいか、登壇者目線で良いので明示されてると次回参加しやすそう。

各セッションの感想

オープニング、基調講演

スライド｜Are you a Designer or an Engineer?

参加するまで、そもそも基調講演があることを知らず。で、始まったと思ったらなんと高校生の方のお話！

@yamasy1549さんが講演するにいたった経緯はわからなかったんですが、フロントエンドカンファレンス…職種（エンジニア・デザイナー）や年齢にとらわれない、Webに関わる全ての人のための祭典…を象徴するような講演でした。

１コマ目「大型フロントエンド開発におけるTypeScriptとDDD」

スライド｜大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck

本当は別会場の「記憶の利用からメタファへ 〜分かりやすいってなんやねん」を聞こうかなと思っていたのですが、まさかの登壇者都合による中止となり、こちらのセッションを聞くことに。

勢いのあるChatworkさん、チームが大きくなることの問題点のひとつに「デザイナーとの連携」を挙げられていました。以下、解決策の例。

• デザイナーがCSSもよくさわる（HTMLはエンジニアのみ）

• デザイン仕様書はGitで取り扱い、GitHubWikiは使わず全部マークダウンにしてプルリクエスト必須にしている

• BEMライブラリを採用している（classの指定で便利、メンテナンスしやすくなる？）

デザイナーがCSSまで関わる、と言うのが印象的。確かにその方が、ちょっとした細かい調整でやり取りする必要もなくなりますね。

Gitもデザイナーがさわって当たり前。去年の９月に参加した株式会社はてなさんのイベントでも、「はてなのデザイナーはGitみんな使える」みたいなことおっしゃられていたし、今後（あるいは既に）必須の流れに感じます。

「チーム全体がうまく回る仕組みづくりも必要」という言葉も共感。Gitもそのための手法の一つ。コメント指針・手順のドキュメント化・コーディング規約などの取り組みも非常に参考になりました。

その他…テストやビルドのことや、TypeScriptとドメイン駆動設計にしたことによる恩恵などの話は、興味深かったですが理解しきれませんでした…。頭の片隅に置いておき、もし似た状況に陥った時にエンジニアさんと相談するキーワードにしたいと思います。

Try Git（ハンズオン）

GUIから操作できる「Source Tree」でGitをやってみよう、という内容。特につまづくこともなく、以下のことを体験できました。

• Git導入

• Gitリポジトリ作成

• サンプルコード編集、コミット

• ブランチ作成

• ブランチをマージ

ターミナルに慣れていないデザイナーとしては、なるほどSourceTreeから入るのがとっつきやすい感じがしました。

プルリクエストがどうたら…のところまで学べると良かったんですが、さすがに時間も短かったですね。ここから先は自主的にやってみます。

Jade で始める新しい HTML の書き方（ハンズオン）

初めて「Jade」という名称を聞きました。せっかくなので挑戦してみようと思い参加。

「Jade は Node.js 製のテンプレートエンジン」とのことです。テンプレートエンジンといえば、前職にてSmarty…phpのやつが主流だったので、それと似たものかなと思いながら聞きました。主にメリットはこちら（違ってたらすいません…）。

• 共通部分を外部ファイル化して読み込める

• 独自の記述方法により、手書きで大変な記述が楽になる

個人的にはちょっと敷居が高く感じました。記述方法に慣れるのに時間かかりそう…。
ただ、Jadeでマークアップした独自のファイルをコンパイルして、HTMLに変換されるところまで体験できました。「なんだかすげえ！」って肌で感じられたのが良かったです。

お昼

ハンズオンでご一緒した方とお昼食べました。出会いに感謝！あと、会場周辺のランチマップがこんな感じで用意されてるのが親切でした。

Googleマップ｜FRONTEND CONFERENCE 2016 ランチマップ

Try Gulp （ハンズオン）

ターミナルの操作で手こずりそこに時間をかけてしまいました。。
一応、以下工程まで体験しました。

1. Sassのコンパイルを試してみよう

2. watchして処理を自動化

3. Browser Syncの導入

ここまででも、なんかGulp便利だ！！と思えて良かったです。残りの工程は改めてやります。

Webサイトパフォーマンス管理の基礎知識

スライド｜Webサイトパフォーマンス管理の基礎知識

同じ時間に山下 一樹さんによる「これからのデザインを考える」もありましたが、普段あんまり関わりのない分野の話を聞こうとこちらに参加。スライド最後のまとめにもいろいろ書かれていますが、

• Webサイトにとっていかに早くアクセスできるかが命

• パフォーマンス管理には統計学と品質管理学が欠かせない

• Web制作者（提案者？）は医師であるべき

などが印象的でした。120ページにわたりそうした概念、知見が紹介されているので、「キーワードを知る」という面で勉強になりました。じゃあ具体的にどうしたらいいのか、はこれから考えていきたいです。

グロースハックを実現する「モジュールデザイン」とCSS設計

同じ時間に「10年超のサービスにSass導入してモダン化した話」も開催されていて、ハンズオンでSassさわったこともあり気になったのですが、紹介文で

paperデザインとwebデザインの一番大きな違いは「webのデザインは成長すること」。 では、どうやったら成長するwebをデザインすることができるか。基本的な考え方から、実例紹介、それを支える技術を紹介します。デザイナーに聞いてもらいたいエンジニアリング話です。

と書かれていたので期待して参加。

[削除済]

いろいろ齟齬を感じたことを書いていたのですが、登壇者の方からフォロー（補足）頂いたこともあり、とりあえず削除しました！ご丁寧にありがとうございました！

LT（ライトニングトーク）

5名の方のLTでしたがそれぞれ個性的で魅力ある発表でした。

• Web制作をRPGに例えたお話。セーブ、装備、作戦！いのちだいじに！！

• アクセス解析など便利な自社サービスの紹介。冒頭で「アクセス解析」噛んだのスゴイ笑った

• 「NoPHPでWordPressサイトを作ろうとしたら非常に辛かった話」関西っぽい勢いのあるノリですごくおもしろかった

• 「〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争」スライドがキレイだし相互の歩み寄りが必要という話で良かった

• 「これがフロントエンドの選択だよ」理由「名前かっこいいから！」に共感（私はUIかUXデザイナーになりたい）

懇親会

２階吹き抜け？のおしゃれな店舗が貸し切り。立食で、いろんな方とお話しました。LTがある懇親会に参加したのも初めて。勢いもあり、みなさん仲良いし、一緒にいてとても楽しい空間でした。

私と同じく名古屋から来たご友人や、今回会いたかった人にも無事会えて良かった！！

まとめ

大規模なイベントということで大変だったかと思いますが、スタッフの皆様、登壇された皆様お疲れ様でした。そしてありがとうございました！