フロントエンドというカオスな世界について

みかかね @mkkn_info

自己紹介

株式会社 chatbox代表

PHPエンジニア

フロントもやります。(一人だからね )

デザインもやります。(一人だからね )

とあるソシャゲ開発チームで常駐もしてる。

フロントエンドに出会ったきっかけ

世はスマホアプリ時代

Android JavaもObCもやりたくない。

「WebViewアプリでネイティブっぽいもの作ってよ。」

SPAとかでUI頑張ったらごまかせるんじゃね？

フロントエンドに関する問題

深刻な人材不足？→フロントエンドエンジニア、という雑多な括り

「標準」がことごとく無い。→技術選択からのスタート→選択理由の説明責任→宗教戦争をスマートに回避する説得力

常に動き続ける業界→変化に強い構成は？

例えばAltJS

Coffeescriptを採用しました。

生のJSで書くとコードの管理が大変→ varのつけ忘れチェック

AltJSならではの糖衣構文

TS/CSの宗教戦争は根深い。

正直甲乙つけがたい。プロジェクトの性質とnode系ツール周りのサポート充実でCSを採用

例えばJavascriptフレームワーク

AngularJSを採用しました。

バインディングがあるのと無いのとでは、コードの量が大きく変わってくる。

セレクタに依存するコードを書きたくない。→HTMLは作り捨てでもJSは管理/再利用したい。

Vue.jsのオブジェクト壊れる感じはちょっと困る。

ドキュメント/補助ライブラリ周りの充実具合

例えば….

CSS : Bootstrap+SCSSを採用しました。

採用実績が一番多くて使いやすい。カスタマイズも楽

BUILD : webpackを採用しました。

一枚のソースにどっさり書いていくのは、管理の面でやっぱりしんどい

componentどこいったん？

browserifyとwebpackは悩んだけど、後者のほうが設定も柔軟でプラグインも使いやすい。

TASK : GULPを採用しました。

gruntよりも簡潔に書けるとの事。

Makefileとかnpm run scriptとかもあって分散する。なんとかどこかに統一できないものか…

まだまだ山積みの問題

Webアニメーション再生

CSSアニメーション / SVG + JSアニメーション

Gifアニメーション / APNG

埋込みMP4

WebGL系のフレームワーク

パフォーマンス・チューニング

商用UP時のbuild設定と運用方法

画像処理。SVG？ CSSスプライト？ DataURL？ Retina対応？

JSテスト、ブラウザテストの手法

フロントエンドと相性のいいBackendの組み方

外部サービス連携

各種ソーシャル連携

各種Google系サービス連携

Map / Drive / Spredsheet / Form….

バックエンドサポート (Firebaseなど)

チャットツール( Spot.im / Disqus )

フロントでできることはどんどん増えていく

(学ぶべき事も)

それに合わせてツールや技術が次々に現れる

(そしておそらく標準は当分決まらない )

技術者個々のノウハウを共有できたら….

(相互に、発展的に )

関西フロントエンドUG

( 2015.01 発足 )

facebook

group

• 公開グループでメンバー募集中。

• イベントの情報や相談をしたりしてます。

• https://www.facebook.com

/groups/602554363223656/

座談会 #1

• 2015/03/14開催

• フロントエンド界隈の諸技術についてあれこれ

• http://kfug.connpass.com/

次回イベント、近日公開!!

(よろしくお願いします )