「【第2回】React （JSフレームワーク他）x ビアバッシュ 初心者勉強会 in秋葉原」に参加してきました。
元々、Reactを冠として始まった勉強会ですが、今回はReact勢がぐっと減って、VueとRiot勢が増えた結果、多種多様なフロントエンドJSが入り交じる異種格闘技な勉強会になりました(驚)。
私は普段からReactを使っているのですが、他のフロントエンドJSを知ることで、よりReactを俯瞰して見れたなという次第です。それはそれで面白かったです。
自分の発表内容も軽く振り返りながら、全体の感想を語ってみます。
目次
LTの感想
全部で8つのLTがありました。
- ReactとReactNativeの違いをまとめてみた @sunaganatsuko
- create-next-appでReduxを使ってみる @tatane616
- テスト書いたほうが開発早くね？ @nmatsumoto4
- JavaScriptの書き方に関する考察 @konosumi(私)
- Comparison of riotjs and others, position, advantages @kuwahara_jsar
- Riot.js で Semantic UI を使ってみる @dkr
- 最強のログインフォームの実装はこれだ @Fujiyama_Yuta
- Vue Native やってみた @FruitRiin
ReactNativeはシミュレータが遅いから、Jestでテストを書いて動作確認した方が開発が早くなるは、私も近い将来遭遇すると思います。
ログインフォームに対する考察は、かなり面白かったです。Twitterのログインフォームは、確かにイケてないかもしれない(笑)。「Vue Native」は初めて知りました。
しかしながら、皆さん発表が上手いなぁ・・・。私は、未だにLTの時の発表の緊張に慣れません。聴衆をかぼちゃだと思うしか、道はないのだろうだろうか。
パネルディスカッション
パネルディスカッションのテーマは「皆さんが普段使っているフロントエンドJSについて」です。
- React：@nmatsumoto4
- Riot：@kuwahara_jsar
- Vue：@FruitRiin
- 素のJS：@konosumi(私)
JavaScriptそのものについてのLTをやった影響か、素のJS勢として、私は無所属代表になりました(笑)。
@kuwahara_jsarさんは、Riotのコントリビューターです！
初心者の敷居の低さ：Riot > Vue > React
パネルディスカッションも含めて特に興味深かったのは、初心者がフロントエンドJSを始める時の敷居の低さについてです。
敷居の低さで言うと「Riot > Vue > React」という印象を受けました。
理由として考えられる一番の理由は、ReactはReact側からHTMLを生成することに対して、RiotやVueは、既にあるHTMLに対して適用する事ができるからだと推測しています。
VuexもReduxも、最初は覚えなくて良い
少し語弊のある見出しですが、最初にいきなり状態管理系のライブラリは、入れないほうが良いです。私はReactを使っていますが、小規模であれば、普通にstateに状態を持たせるだけでも開発できます。
JavaScriptは軽ければ軽いほど良いですし、利用するライブラリの数も、もちろん少ないほうが良いです。
そして何より、一度に多くの事を覚えようとすると、途端に辛くなって破綻します。必要に迫られてから覚えるくらいが、丁度良いのではないかと。
私の発表について
「JavaScriptの書き方についての考察」を発表しました。
以下で軽く補足していきたいと思います。
1. 何で書くのか？
私は、JavaScriptの書き方を、大きく分けて3つに大別しています。
- 素のJavaScriptで書く
- jQueryで書く
- フロントエンドJSで書く
ちょっとしたJavaScriptであれば、私はバニラ(素の)JSで書きます。
バニラで書きづらい場合はjQueryで書き、jQueryで書きにくい規模であれば、フロントエンドJS(React)で書くことが多いです。
安易にJavaScriptの規模を大きくしたくないので、適材適所で開発する方法をとっています。
2. AltJSについて
AltJSについては、大きく分けて4つに大別しています。
- 素のJavaScriptで書く
- 最新のJSで書く。ES2015, ES2016, ES2017...etc
- Flow
- TypeScript
私は、開発規模によりますが「2」を選択することが多いです。その過程で、新しいJavaScriptの書き方を覚えました。
FlowはReactNativeと相性がよく、TypeScriptは最強です。但し、TypeScriptはTSに非対応の古めのライブラリを使う時に苦労する上に、やはり学習コストは必要になってきますので、JSの規模が大きい場合に向いているかなぁという印象を持っています。
3. ブラウザ互換性問題
Object.values()は、IEでは動かないという話をしました。見て分かるように、IEでのみ動かないのです。
(画像引用：Object.values() - JavaScript | MDN)
IEでも動かしたい場合は、ポリフィルという「旧環境に互換性を持たせる」仕組みを適用します。babelであれば「babel-polyfill」です。
module.exports = { entry: ["babel-polyfill", "./app/js"] };
webpack.config.jsに設定を入れておけば、互換性のあるJSが出来上がります。
互換性を持たせるため、どうしてもJavaScriptのサイズは大きくなってしまいますが、その代わりIE環境でも無事に動作するようになります。
さいごに
自分で言うのもなんですが、初心者勉強会なわけですから、もう少しライトなネタで発表すれば良かったです (後悔)。
勉強会当日に参加表明をして、即席でスライドを作ったわけですが、次回も参加するとしたら、もう少し初心者に分かりやすいネタにしよう。
会全体の雰囲気としては、様々なフロントエンドJSが入り乱れる、異種格闘技戦のようなイベントでした。そのカオス感が逆に新鮮で、自分の持ってる技術スタックを、より俯瞰して見れたような気がします。
補足：前回のイベント参加レポート
前回のイベント参加レポートもありますので、もし宜しければご覧ください。
