コーテッグのRuby on Railsもくもく会 #1に参加しました

末広町にあるコーテッグのもくもく勉強会に参加しました。 10名程度の規模で、お菓子などもありとてもアットホームな勉強会でした。 Ruby on Railsの勉強会だというのに、なぜか関数型言語について盛り上がるなど、なんでもありの勉強会でした。

自分がRailsを使い始めて思ったこととしては、環境構築(いわゆるnokogiri問題など)にコストがかかるということです。 今回の勉強会では、Dockerを使ってRailsの開発を行っているという話を伺いました。 Docker fileをどのように作成すればいいか少し勉強しないといけないですが、ライブラリの問題などで時間を取られることを考えると早いうちに使い捨てできる開発環境を作ったほうが最終的には効率がいいのかなと思いました。 11月は色々とやることがありますが、今回の勉強会で学んだ「Dockerを利用したRails開発」を早めに実現したいと思います。

9月、10月振り返りと11月目標設定

振り返り

9, 10月の目標

  • DockerやAnsibleといったインフラなどで使われるアプリの理解をする
  • フロントの知識も少しづつ取り入れていく
  • MVCモデルの開発フローを学習する

9, 10月にやったこと

  • Dockerコンテナに自分のターミナル環境(NeoVim, tmux, zsh)を構築してみた。構築はDockerPluginを利用したAnsibleのplaybookで行ってみた。
  • Vagarntで作成したOSにAnsibleのplaybookを利用して自分のターミナル環境を構築してみた。
  • spring-bootのサンプリアプリの作成二つ
  • Railsのサンプルアプリ作成
  • DI・AOPに関する復習
  • React.jsのチュートリアル
  • mongodbのクエリまとめ
  • DB設計の勉強

良かった点・学んだ点

  • インフラ関係の技術を一通り学習し、コンテナなどの概念を理解した。
  • RailsやSpring Bootのアプリの写経することで開発の流れが理解できたし、デバッグのやり方も学べた。写経で自己満足になるのはよくないけど、手を動かすことの大切さを改めて実感した。
  • React.jsの理解ができた

課題・改善点

  • ざっくりと概要を理解したり、サンプルを動かしたりしているが、そのスキルが身についているかといわれると微妙なので、繰り返して知識を定着させる必要がある。
  • ツールのインストールやアプリ作成の時などに細かいことでもエラーがあると解決せずにはいられず、時間を多く消費することがあった。そこまで重要でないエラーならば、時間を決めて諦める必要もあると思う。些細なことを気にして時間を使いすぎるのはよくない。

目標設定

11月の目標

  • サンプルアプリでいいので、繰り返し開発をして知識の定着化を図る
  • ReactやRailsから派生する知識についても適宜理解していく
  • 勉強会でLTできるようなネタ作り(ググれば出てきそうな内容じゃないもの。体験談とか自作アプリの紹介などを発表する。)
  • APIの開発手法を改めて学ぶ

11月にやること

  • 外部APIを利用したウェブアプリを2つ作成
  • Railsの写経を2つする
  • React.js + Railsなアプリを1つ作成
  • Web APIに関する書籍を2冊読む

(個人用メモ) React.jsとRailsを組み合わせる前に周辺技術について調べてみた

はじめに

React.jsとRailsを個別で学習しており、そろそろ二つを合わせてアプリケーションを作成したいなと思っております。
しかし、調べてみるとReact.jsとRailsを一緒にする方法としていくつかあるようでした。
ひと通りネットで調べて情報をまとめたので、以下にその内容を記載します。
自分はReact.js+Railsなアプリを作ったことがないです。各ツールについてもネットで調べただけで実際に使ったことがないので見当違いなことをいっているかもしれないです。ですので、あまり鵜呑みにしないでください。(ただし、参考資料だけはとてもわかりやすいものばかりでした。)

ReactとRailsの組み合わせかた

1.Railsのviewの中にReactを埋め込む

概要

2.Railsプロジェクトの中にReactのフロントエンドアプリを入れる

概要

  • webpackなどを利用する(ツールなどは下記に詳細を記述する)
  • Railsのasset-pipelineの仕組みには頼らない

    メリット

  • 作業としては分かれているがプロジェクトとしては一元管理される
  • npmモジュールを使ったりES6で記述できたりできる
  • npmのpackage managerを使える

    デメリット

  • フロントエンドの開発環境のセットアップが大変

3.Rails APIと Reactで分ける

概要

  • Railsjsonを返すことだけ(=API)に徹する
  • RailsAPIのみを作成するなら、 rails-apiというgemがあるのでrailsではなくそれを利用するほうがいいらしい。
  • サーバーレンダリングとか考える必要がないならこの設計がいいらしい

    メリット

  • 開発を分けることができる(デメリットといえばデメリット)

    デメリット

  • プロジェクトを別で管理しないといけない。サーバーも別で用意する必要がでてくる
  • API認証やCORSなどを考える必要がある
  • フロントとバックエンドを別のプロジェクトで管理されるため、開発のオーバーヘッドが高くなる

ビルドツールのまとめ

react, railsで調べているとwebpackとかbabelとかよくわからないのがたくさん出てくるのである程度体系的にまとめる。

モジュールハンドラー(ファイル生成系)

JSビルドツールのこと。フロントエンドのJSファイルを生成する。JSファイルのコーディングの部分で開発者の手助けをする

Webpack

  • コード分割できる
  • pluginによる拡張できる
  • Loaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定できる
  • babel-loaderを使うことでes2015やJSxで記述したJSファイルを変換することができる。babelはJSXファイルをコンパイルするもの。
  • ビルドやコードの配置まではwebpack, ファイルへのフィンガープリントはSprocketsに任せるという運用
  • 機能がたくさんあるので、gulpなどを使わなくても設定ファイルを変更するだけで大体のことは実現できる。

    Browserify

  • 単一ファイル作成に特化している
  • browserify-railsを利用すると、RailsのSprocketsでbrowserifyを利用できるようになる。ただ、browserify-railsはビルドがすごい遅い。
  • ビルドに時間かかる
  • browserify-railsを導入するとnpmのモジュールとgemとして提供されているライブラリの両方がsprocketsに載せてasset precompileできるようになる。

    スクランナー(実行管理系)

  • gulpとGruntで人気を二分している。
  • JSXやLESSやSCSSなど変換する必要があるファイルをどうゆう処理で変換して、どこに出力するか「タスク」として管理してくれるもの。
  • Webpackなどを呼び出してントリポイント毎にJSファイルを一つにしたりなどする。
  • Railsのassetのコンパイルの仕組みを完全に捨てている。自由度が高いが環境構築に時間がかかる。(タスクランナーを利用せず、Browserifyなどを直接呼ぶのであれば、Rails側と住み分けができる。)
  • 「タスクランナー」の中で「モジュールハンドラー」が呼ばれるの関係性

    gulp

  • 現時点で開発コミュニティの活動が一番活発。シンプルな設定ファイルと、実行速度に定評あり。プラグインをpipeして連続実行できるため、中間ファイルの生成が不要。
  • コーラみたいなアイコン

    Grunt

  • 遅い! 設定ファイルが分かりにくい! とか言われつつもデファクト感のあるのがGrunt。プラグインが最多
  • イノシシみたいなアイコン

    (Sprockets)

  • gemのひとつでJavaScriptCSSコンパイルする仕組みが提供されている。Sprocketsはasset管理を行う。gulpとかとは対立の関係にあるものといってよい(デフォルトのコンパイラーに任せるか、フロントと切り離してフロント側のコンパイラーに作業を委譲するか、みたいな対立。)

    ライブラリ管理系

    バージョン管理などでよく利用される。フロントとバックエンドで管理ツールを分けるとWebpackが取り扱うライブラリを細かく指定できるのでメリットがある

    npm

  • node.js側

    Bower

  • フロントエンド側

おわりに

自分の短期目標としては、「ハッカソンでチームに貢献できるメンバーになる」、「バックエンドエンジニアとして開発と設計ができる」ことなので、色々調べたけれどもRailsAPI作成に専念してもらって、React.jsにフロントを全て任せるというスタンスを中心にプログラミングやっていこうと思います。
とはいえ、せっかく調べたので、react-railsやwebpackについても触りくらいは学習しておこうと思います。

参考資料

ReactとRailsの関係性とサンプルアプリケーションのまとめ - Qiita

モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ

webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ

BrowserifyからWebpackへの移行時の注意点 - Qiita

Ruby on Rails + Reactのベストプラクティスを模索してみる - Qiita

Webpackってどんなもの? - Qiita

ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita

RailsでAPI開発する前に知っておくべき4つのこと - Qiita