React + Railsで個人サービスを開発してみた話
おはようございます。ゴールデンウィークいかがおすごしでしょうか。
これまでブログの中であまりエンジニア的な話はしてこなかったのですが、
改めて自己紹介をさせていただきますと、僕は横浜でWebのフロントエンドエンジニアをやっている者です。
名を田島といいます。どうぞよろしくお願いします。
さて、僕はエンジニアでありながらスロットも大好きなので、
最近ではその趣味が高じて、
誰でも言葉のスロットが作れる！スロットメーカー
という、なさそうでなかったWebサービスを作ってみました。
制作に用いた技術はフロントエンドに React.js (フレームワークはFlux)、バックエンドにRuby on Rails (主にAPIのみ)という構成で実装しました。
今回はその技術的なお話を書こうと思います。
ところで、僕が普段やっている仕事は、
のようにWebGLを使った体験型クイズコンテンツだったり、
のようにスマホで遊べるゲームコンテンツのようなものが多いため、
そもそもサービス開発者がよく使うようなフレームワーク系ライブラリには馴染みがありませんでした。
なので、よくある Angular vs React 的な話ではなく、そもそもWebのフロントなんてjQueryで十分じゃね？的な人に向けた内容を書いていきます。よろしくお願いします。
【目次】
- Reactを採用して正解だった？
- jQueryで開発する場合との違いをざっくり言うと？
- Reactから学んだこと
- Reactと併せて使いたい、オススメのアニメーションツール
1. React.jsを採用して正解だった？
まずここをハッキリさせておきましょう。React.jsをスロットメーカーに採用したことは大正解でした。
本当に採用して良かったと思っています。
開発初期〜制作フェーズ30%くらいまでは、開発スピードがどうしても遅くなってしまい、jQuery開発で仕切りなおそうかとも思いましたが、徐々に開発を進めていくに従ってReactの安定感の恩恵を感じるようになりました。
開発が進んでもバグが出にくい！仕様の変更も楽！
Reactではstateと呼ばれるプロパティによって全ての見た目の状態を管理しているため、
ほとんどの仕様変更はこのstateの振る舞いをいじるだけで行うことが出来ます。
jQuery開発で起こりがちな、「ちょっとした見た目の仕様変更にJSを大幅改修」といったことはほとんど起こりません。
2. jQueryで開発する場合との違いをざっくり言うと？
jQueryを使って開発する場合、その典型的な悪い例は以下のようになっているでしょう。
jQueryでクラスを付け外ししたり、animateやcssメソッドによってstyle属性を直接書き換えたり、DOM自体をappendしたり空にしたり…
そしてjQueryから実行された処理はDOMに投げっぱなしでその結果の状態をJavaScript側で保持しておかないケースの方が多い。
ともすれば、HTMLの状態は完全にブラックホールです。処理を重ねるごとにカオスになっていきます。
実際に起こりがちな問題としては、処理20くらいまで実行が進んだときに、
「ユーザがリセットボタンを押したら処理2の状態に戻して欲しい！」
なんてとき。
処理を何も実行していない状態から処理2の状態にするためには、「処理1→処理2」を実行するだけで簡単だったのですが、
処理20から処理2に戻すのは至難の業だったりします。
処理3〜処理20を行った結果のHTML状態というのは、もはやHTML自体しか知らないため、1つ1つ手探りでHTMLを見ながら戻していく必要があります。
これがReactだと、非常にスマートに解決できます。
上の図で言う、「状態」はReactのstateのことを指しています。
特徴としては、HTMLに反映されている状態は全てReactのstateによって管理されているという点です。
つまり、先ほどのような
「ユーザがリセットボタンを押したら処理2の状態に戻して欲しい！」
という仕様変更があった場合にも「状態2」のときのstate情報を再現すれば良いだけなので非常に簡単です。
現在の状態に依存せず、特定の入力を与えたら必ず一意の結果が返ってくるという特徴は、関数型言語のそれと似ています。
この概念の違いがサービスを開発するにあたって、jQueryを用いた開発よりも優位である理由です。規模が拡大しても設計が堅牢に保たれるイメージを感じていただけたでしょうか。
3. Reactから学んだこと
僕がReactを使って個人サービス開発を行ったことの副次的な産物として、「良い設計とはこういうものだ」というのを実際に作りながら覚えられたということが言えます。
Reactはそのままの状態で開発することもできますが、大きめのサービスを作るにはよりカッチリしたReactベースのフレームワークが用意されていて、今回はその中から Flux というものを採用しました。
この Flux の設計がまた非常によくできていて、フロントエンド開発に起こりがちな、
「ViewがModelを更新して、さらにModelがViewを書き換える」
というカオスな状況は起こらないようになっています。
データの方向が常に1方向に保たれるため、見通しの良い設計となります。
こうしたFluxの設計思想を1度体に覚えさせると、また別案件で非Reactな実装をする際にも役に立つようになりました。
フロントエンド一筋でやってきた人にとっては、JavaScriptにおける良い設計の定義が曖昧だったりするので、1つの指針を学ぶ目的で React、 ないしは Flux を学んでみるのもアリなんじゃないかと思います。
4. React.jsと併せて使いたい、オススメのアニメーションツール
Reactで開発をすると、いわゆるjQueryのanimateのようにstyle属性をsetIntervalで毎時更新するタイプのアニメーションを実装することが困難になります。
結果として、cssのanimationによってDOMのアニメーションを実装する機会が増えるかと思います。
そんなときに是非オススメしたいアニメーション生成サービスが、 Bounce.js です。
これは scale, rotate, translate, skew というトランスフォーム系プロパティをポチポチと指定するだけでプレビューを見ながら簡単にcssアニメーションを生成することのできるサービスです。
サンプルで用意されているアニメーションが既にクオリティが高いため、それらをそのまま使ったり、フォークしてオリジナリティ出すだけでも良いものができるかと思います。
以上となります。個人的には React Native というネイティブアプリに書き出せる方の React の方も気になっています。
React.jsから簡単に移植できたりするのでしょうか？また、時間を見つけてトライしてみようと思っています。
============================================
【追記】
スロットメーカーで作ったスロットを、ブログ内などにiframeで埋め込める機能を追加しました！
