技術勉強には何か作るのが一番ということで何かを作ったというお話。

とりあえず作ったものはこちらから。
IE・Edgeで挙動が微妙なのはご愛嬌。

iframeでも貼ってみる。

掲げたテーマは流行りの技術を全面的に採用してとにかくwebサービスの体をした何かを素早く完成させること。
なぜ突然こんなテーマかと言うと、フロントエンド界隈で転職活動するのに最近のフレームワーク使ったことありませんだと心もとないから。あ、今の職場はもう辞めます。

採用したフレームワークはタイトルの通りreact+redux。ecma2015もsassも惜しみなく使ったいけてる開発環境を構築しようと意気込んだものの、待ち受けるwebpackとの格闘を思うと早くも挫折しそうであった。

webpackいじりも色々な発見があって楽しいが、今回の主題はそこではないのだ。僕が考えた最強の開発環境を構築して何も開発しないまま満足して終わることが今回の目的ではないのだ。

react+reduxが登場してからそこそこの時間が経っているし、ましてやwebpackいじりの煩わしさなんて万人に知れ渡っているはずだろう。きっとみんな考えることは同じはずと探してみたら見事に発見。

React Redux Starter Kit
日本語訳してくださっている記事

これだ、これを探していた、react+reduxとその他いい感じの設定を詰め込んだこのスターターキットを。
早速cloneしてyarnしてstartしたら開発用サーバが立ち上がってルーティングまで完備したSPAサンプルがすでに出来上がっていた。testコマンドは当然のように整備されているし、buildコマンド一発でリリース用ファイルまで作ってくれる気配り具合。

「どうしよう、欲しかった設定が本当に全部揃っててwebpackと格闘する必要なくなった。」と、かつて経験したことのない戸惑いが込み上げてくる。
ブログにまとめる時も半分はwebpack話になるだろうなと覚悟していたが、見事に覆してくれた。むしろこのスターターキットの話題だけでいいんじゃないかとも思えてしまう。

もちろんwebpack関連だけでなく、react+reduxプロジェクトの雛形としても十分なものを提供してくれている。bestと言い切れる自信はないが、betterなpracticeであることは間違い無い。実際に触ってこの構成と拡張性を体験してみれば、すぐにアヒルちゃんが好きになってしまうだろう。

結局スターターキット礼賛に終始した記事だが、このキットの独壇場で終わらなかったのが今回のプロジェクト。もう一人の主役の名は、firebase
初めはrailsの勉強も兼ねて自前サーバを作ろうと考えていたが、その全てを放棄させてしまうほどの破壊力を兼ねたBaaSである。こちらの話題は多分次回。