- 2017年06月29日
- WEB制作
[入門] これからReactでサービス作ってみたいっていう初心者にみてもらいたい記事とか
これからReactを触りたい!できるようになりたい!サービス作ってみたい!って方向けに必要最低限のスキルというかツールとオススメの記事をご紹介します。ここにある記事を参考にしながらチュートリアルなどとりあえず何か作ってみると大体把握できるのではないかなと思います。
React
React – A JavaScript library for building user interfaces
React.jsとは
まずはReact.jsってなんなのっていう方は下記の記事をみてもらうといいです。
ちなみに、個人的にはjQueryは使わなくなった訳ではないです。もちろんReact.jsを使っているサービスではjQueryを使うことはないですが、コーポレートサイトなどでReactを使う必要性もないのでjQueryを使っています。住み分けができている分jQueryだけできるよりもReact.jsもできた方が仕事の幅は広がりますね。
- Reactを使うとなぜjQueryが要らなくなるのか – Qiita
- 出来る限り短く説明するReact.js入門 – Qiita
- これからReactを勉強する人が最初に見るべきスライド7選 | UX MILK
- Reactを毛嫌いしてるが実は好きになりたい人へ | ITANDI Blog
- これからReactを学ぼうとしてる人へ / fujimisakari blog
- Reactチュートリアル: Intro To React【日本語翻訳】 | maesblog
- 新人プログラマーが「React」を使ってリアルタイムコメント機能を作ってみた(前編) | 東北ギーク
- Reactチュートリアルをcreate-react-appの形式に合わせて焼きなおす – Qiita
Redux
reactjs/redux: Predictable state container for JavaScript apps
ReactはViewを担当するフレームワークです。SPAサービスなどを作っているとどうしてもしんどくなってくるのが、state
の管理です。Reduxを使うことでstate
の一元化、更新管理がわかりやすくなります。なので、以下の記事等で概要を把握した後に実際に使ってみてstate
がどのように流れているか把握するのがいいでしょう。
実際にサービスを作る時には導入することをオススメします。
- Redux の基本 — Mobage Developers Blog
- Reduxのパターンとアンチパターン | プログラミング | POSTD
- 【Redux入門】 React + Redux の考え方を理解する – おかかウェブ
- React+Reduxの最もシンプルな構成 – 30歳からのプログラミング
- React + Redux入門① – Reduxの概念を理解 – Push: Ctrl+Y
- React + Reduxでカウンターアプリの作成 (react-redux使う編) – funxion
環境構築
Reactを使うってなると絶対に通らなければいけないのが環境構築です。新規サービスを作るってなると以外にここが手間だったりします。しかも、これからReactやりたいって方には結構とっつきにくいんですよねー。Babel
でトランスパイルしてWebPack
でバンドルしてwebpack-dev-server
でとか。さらにBabelのプラグイン使ってってなるとかなりしんどくなってきます。なので手っ取り早くやるなら
facebookincubator/create-react-app: Create React apps with no build configuration.がいいかなと思います。
ただ、実際にサービス作るなら必要な知識なので以下の記事でまずは概要から把握していくといいと思います。
- webpack で始めるイマドキのフロントエンド開発 – Qiita
- webpack 入門 – Qiita
- Webpackってどんなもの? – Qiita
- webpack.config.jsの読み方、書き方 – dackdive’s blog
- Webpack + React + ES6の最小構成を考えてみる。 – TOEIC940点の文系プログラマー
- React x Webpackプロジェクトの雛形を作る
- babelとwebpackを使ってES6でreactを動かすまでのチュートリアル – Qiita
React-Router
React Router: Declarative Routing for React.js
Reactでページ遷移させるなら必須です。SPAによくあるブラウザバックの時にはページトップへスクロールさせないなどもわずかなコードでできます。基本的には上記の公式サイトを見れば大体のことはできます。以下の記事は補足的に見るといいと思います。
- React Routerでルーティングをやってみる – Snaplog
- react-router@v4 を調査した – あいつの日誌β
- 大幅変更されそうな react-router @ next (v4) 覗き見メモ – Qiita
Redux-Form
Reduxを使っているならForm周りはRedux-Form
がオススメです。理由としては、活発に開発が行われていますし、慣れてくると使いやすいです。当ブログでも過去に紹介しているのでぜひご覧になってください。
Immutable.js
こちらもReact, Reduxでサービスを実際に開発していると起きるのがReducer
周りの肥大化です。僕も一年前に作ったサービスで経験しました。んで、このImmutable.js
を使うことでReducerでModel的な役割をすることができます。
- React使い必見! Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
- Immutable.jsでreact+redux環境が楽になりそうな話 | Gaku’sMemo
- immutableのメリットとImmutable.jsでのModel定義 – コネヒト開発者ブログ
- immutable.js を使ってみる | スマホ神 – JavaScript 受託開発 –
- ReactとImmutable.jsで関数型を体験してわかったこと・活用するメリットとは? – linotice* | Yahoo! JAPAN RECRUITMENT
- React + ReduxのプロジェクトにAtomic DesignとImmutable.jsを使ったらいい感じになった話 | ichimaruni-design
CSSについて
普通にCSSファイルを作ってJSX内で要素にCSSクラスなりを割り当てることもできるけど、
CSSクラスをローカルにするためにCSS in JS
とCSS Modules
がよく使われる手法です。
Styleとなるオブジェクトを直接JSで記述する CSS in JSと.cssを.jsから利用する CSS Modulesどっちを使うかは好みかもしれないです。
個人的にはCSS Modulesの方が使いやすいかなと思います。というか併用もできます。
- 社内でCSSの新しい方針について話したメモ – Qiita
- Free-Style のススメ ~ CSS Modules は解決策ではない – Qiita
- webpack で CSS Modules | スマホ神 – JavaScript 受託開発 –
- Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | プログラミング | POSTD
- How to style React components
オススメの本

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
イチからわかる!Reactの仕組みと使い方UIコードの再利用化と速度向上を図る!Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説!
いいなと思ったらシェアお願いします
今すぐフォローしよう!
イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます。