frontend/
├── package.json
├── src
│   ├── components
│   │   ├── hoge-container
│   │   │   └── index.js
│   │   └── huga-container
│   │       └── index.js
│   └── entry.js
└── webpack.config.js

react-railsを使用してDOMにマウントするため、各コンポーネントをグローバルから参照できるようにしておきます。

frontend/src/components/hoge-container/index.js

import MicroContainer from 'react-micro-container';
import React, { Component } from 'react';

export default class HogeContainer extends MicroContainer {
  constructor(props) {
    super(props);
  }
.....
}

frontend/src/entry.js

import HogeContainer from './components/hoge-container';
window.HogeContainer = HogeContainer;

webpackので依存関係を解決したjsファイルを/app/assets/javascripts/配下に配置します。

app/assets/javascripts/
├── application.js
├── cable.js
├── channels
└── entry.bundle.js

View内で react-railsのヘルパーメソッド react_component を使用してマウントします。

....
<%= react_component('HogeContainer') %>
....

Flux的なこと。

react-micro-containerを利用しています。

GitHub - hokaccha/react-micro-container: Micro framework for React

所感

RailsとReactの恩恵をどちらも受けれるので、フロント実装が多くないプロジェクトならやっていけるのではないかなと感じています。

部分的にReactを導入できるので今回のようにフロントエンジニア不在の環境下でも現実的な気がしています。

2017-02-26

Rails5 + ES6 + React + react-router + axios + CSS Modules でTodoアプリを作った。

つくったもの Ruby Ruby on Rails JavaScript Heroku

前回 Angular2で作成したTODOアプリのReact バージョンを作成しました。

作ったもの

f:id:Yasun:20170225194059p:plain

todo-rails-xxx-js

構成

todo-rails-xxx-js/front/react-ver at master · yassun/todo-rails-xxx-js · GitHub

React

Angular同様に公式のチュートリアルがとても充実していました。

Tutorial: Intro To React - React

ライフサイクルについてはコチラの記事がとても参考になりました。

React component ライフサイクル図 - Qiita

react-router

React.jsのシンプルなルーティングライブラリです。

こちらも公式チュートリアルがあります。 GitHub - reactjs/react-router-tutorial

axios

APIとの通信時にAngularの場合はhttpモジュールが用意されているのですが、 Reactの場合は自分でライブラリを選択する必要があります。

調べた結果、候補として superagent と axios が挙がりました。

GitHub - mzabriskie/axios: Promise based HTTP client for the browser and node.js

GitHub - visionmedia/superagent: Ajax with less suck - (and node.js HTTP client to match)

今回はAngularのhttpモジュールに似ているという理由で axiosにしました。

CSS Modules

CSSモジュール ― 明るい未来へようこそ | プログラミング | POSTD

Reactと組み合わせることでCSSもコンポーネント単位で管理することができます。

今までBEM記法等の命名ルールで行っていたことをwebpack(style-loader, css-loader)で自動的に行ってくれます。

今回のようにデザインテンプレートを使用している場合でも、グローバルで使うために宣言されたクラスとローカルだけで使いたいクラスがコンポーネントを見た際に解かる利点がありました。

その他

css/jsのbundleにwebpack、ES6のコンパイルにBabelを使用しました。

まとめ

今回の構成は何かを作る際に第一候補として考えたいと思ってます。

その際にはRails 5.1 でもJSに関する変更点が多く入っているので、この当たりも合わせて試していきたいです。 weblog.rubyonrails.org

次回はVue.js と Flowtypeを試す予定です。

2016-12-31

2016年を振り返る

今年もお世話になりました。
来年もよろしくお願いします。

今年も色々な事がありました。

海外での生活

一番大きな環境の変化として、生活拠点を海外に移して既に1年以上経過しました。

宗教、国民性、言語等が全く違う国に住むことで自分の価値観を強制的に相対化させられました。
また、日本という国を客観的に見れるようになった事も大きいです。

住む前からある程度予測をしていたのですが、こちらでの生活は何をするにも、全然思い通りに行かないです。本当に。本当に…。

今も解約したはずのネット回線業者から使っていない月の請求が来ており、交渉している最中です。

日本では中々味わう事のできない理不尽さのお陰で問題解決力とメンタル面がかなり鍛えられました。

これらの経験が役立つのか今の所わかりません。
ただ、今後、物事の考え方に与える影響は大きいと思ってます。

その他にもこちらの生活を通じて、プログラマとしての仕事は世界中どこでも行う事が出来る貴重なもので、数ある職のなかでこの業界を選んで、自分は本当に良かった。と改めて感じました。

英語

今年は英語に多くの時間を投資しました。

TOEIC200点台だった僕が600点になるまでにやったこと。 - DC4
f:id:Yasun:20161231223841p:image
本当に底辺レベルからのスタートだったのですが、1000時間くらいやった辺りから幾分かマシになりました。

フリーランス

今年からフリーランスとして仕事をしています。

「自分のスキルと時間に値段を付けて交渉する。」という行為に、最初はかなりプレッシャーを感じたのを覚えてます。
そのおかげで数字に根拠を持たせる為に、必要とされているスキルセットはなにか、自分の強みはどこにあるのか、といった事を日々悶々と考えるようになりました。

そしてなにより、会社という看板が無いにも関わらず、自分個人に仕事を依頼してくれる方々に出会えた事、またその信頼に応えたい。というモチベーションで仕事ができたというのはとても大きな経験です。

その他にも税金について学ぶ必要があり、それをきっかけに多くの事を学ぶ事ができました。

フロントエンド

やっぱり前にも出たくて学習を再開しました。

Rails 5 + Angular2 + TypeScript でTodoアプリを作った。 - DC4

旅行

リモート中心の仕事だった事もあり、
今年はアジアを中心に色々な国に行く事ができました。

初めて海外旅行にいったのは３年前なのですが、数えてみるとこの1年で30回以上飛行機に乗っていました。

今もこの記事をベトナムのハノイで書いてます。

ヤギのおっぱい美味しいです！
おっぱい最高です！ pic.twitter.com/u66YMBpSDR
— Future Bass (@_Yasuun_) December 30, 2016

来年に向けて

現時点で日本のどこに住むのかが決まっていないのでなんとかしたいです。

英語に忙しくて個人でサービスを作れなかったので、来年は色々やっていきたいです。

帰国したらつけ麺やすべえと寿司を堪能しながら「君の名は」と「シンゴジラ」が見たいのとVRを体験したいです。

それではよいお年を！

2016-12-21

Rails 5 + Angular2 + TypeScript でTodoアプリを作った。

JavaScript Ruby on Rails Ruby つくったもの

フロントエンドの勉強のため、 Rails 5 + Angular2 + TypeScript + SystemJS の組合せでTodoアプリを作成しました。

作ったもの

f:id:Yasun:20161221000644p:plain

todo-rails-xxx-js

構成

GitHub - yassun/todo-rails-xxx-js: Todo samples by Rails 5 (API mode) and JS frameworks.

f:id:Yasun:20161221233809p:plain

開発中は RailsAPI と Angular2 それぞれでローカルサーバを立ち上げて作業しています。違うポートでの通信となるのでクロスドメイン問題を解決する必要があります。

今回はこちらのGemを使用しました。 GitHub - cyu/rack-cors: Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.

リリース時にビルドしたフロントのリソースfront/angular2/public/* を Rails側の/public に移動しています。

Rails5

APIモードのオプション(rails new app --api)を付けて以下記事と同じ手順で作成しました。

Rails-APIでTODOアプリを作る。

Angular2 + TypeScript + SystemJS

Angular2は公式のチュートリアルがとても充実していました。

まずはこちらの章でAngular2の雰囲気を掴むことから始めました。

Quickstart - ts - QUICKSTART

その後はより実践的なチュートリアルに進みました。

Tutorial: Tour of Heroes - ts - TUTORIAL

こちらはかなりボリュームがあるのですが、ヒーローを題材としたSPAを作りながら

Component
Module
Routing
DI
Two-Way Binding / Event binding
Service
Mockの作り方
RxJS...etc

と開発に必要な要素を一通り学ぶことができます。

フロントエンド開発について

何も知らない状態からフロントエンドに入る際の障壁として、 Angular2 / TypeScript / RxJS の学習はサクサクと進めれたのですが、モジュール管理とビルド周りが辛かったです。

特にSystemJSをbundleするのに苦戦しました。

さいごに

Angularの次期バージョンは 3 ではなく、4になるそうです。そして6ヶ月ごとにメジャーバージョンが上がるとの事です。

Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと－ Publickey

Angularはフロント開発に必要なライブラリが既に用意されている状態で開始できるので、入門としては入りやすかったです。

次回はReact.js + Redux.js + ES6 で挑戦してみようと思います。