【入門】 reactチュートリアル

==== 追記:  2019.4.8 ===========
もろもろあいまいだったところの追記をしました。
一部文法ミスを修正しました。
それに伴って、githubのコードも修正しました。(本文で扱っていない文法で書いてるところもありますが、レガシーコードは残してあるので参考にしてみてください!)
===========================

京都のITベンチャーでフロントエンドからバックエンドまで幅広く実装していた@DragonTaro1031です。CyberAgentでの長期インターンでフロントエンドを実装した経験もあります。

progateでrailsまで実装したけど、なんか古臭いアプリしか作れない、、そんな悩みありませんか?

それもそのはず。最近のwebアプリはフロントをreactなどでリッチに仕上げているからです。

でも、reactを勉強しようとすると、どうしても情報が点在していて僕も苦労した記憶があるので、これから勉強する人の手助けになればと思いこのreactチュートリアルを作りました。

かなりの文字数を無料公開しているので、僕の説明に満足してから購入していただけたらと思います!

このチュートリアルのゴールは以下のようなアプリが作れるようになることです。

お前のチュートリアルどんな感じやねんって思われてる方はぜひ一度読んでいただけたらと思います!図もできるだけ多用して理解が進むように工夫しています。

このnoteを買うメリットは、僕がインフルエンサーではないので有名な人のnoteに比べて、分からないところのフィードバックをいただいたらすぐに更新できるところだと思います。実際にTwitterのDMにて質問いただいたことも何度かあります!

さらに、まだ書いていないところでも、勉強していてここがわかりにくかったなど、ご意見いただけたらできるだけ反映しながら解説していこうと考えています。

構成

必要に応じて用語解説や理論の解説もしますが、基本的にはイメージでreactの概念を理解して、とにかく書けるようになることを目的としたチュートリアルにしようと思っています。

というのも説明を書いてみたのですが、どうしても専門用語が多くなってしまい理解に時間がかかってしまうので、とにかく動くreactのコードを書いてreactの楽しさを知ってもらうことに重点を置くことにしました。

楽しくなって興味が出たら理論を学んでいただけたらと思います。

0章 reactを勉強する前に
1章 reactとは
2章 環境構築
3章 HelloWorld
4章 カウンターAppで学ぶstate
5章 TODOアプリの雛形を作る


このような構成になっております。

このnoteでは基礎的なチュートリアルしか扱わない予定です。発展的なチュートリアルは別のnoteで販売しようかなと考えています。

対象

この記事はjavascript(以下js)をある程度勉強した次のステップとなっております。ドットインストールを一通りやっていれば十分だと思います。pragate等でも問題ありません。


0章 reactを勉強する前に

reactを勉強する前にes6(es2015)というものについて解説します。これは簡単にいうとjsの新機能です。jsでがっつり開発をしている人ならわかると思うのですが、従来のjsってクソなんですよ。

それで散々disられてたんですけど、2015年にアップデートされました。これによってjsはモダンな言語として再度注目を浴びるようになりました。(僕が高校生の時です。笑)

ほとんどのreactの入門記事ではes6知ってるよね?という前提で話が進んでいます。多くの人が通る本家のreactチュートリアルもes6の解説はほとんどありません。ちなみにreactは従来のjsでも書けるのですがコードが冗長になってしまうので、最近ではほとんどのコードがes6で書かれています。

そこで、reactをやる上で最低限知っておきたいes6の書き方について説明していきます。ここを詳しくやるとそれだけで挫折してしまうので、こんなもんなんだと思って進めてもらったらいいと思います。

僕もそんなに使わない構文だと未だに理解できてないのとか知らない構文もあります。それでも大規模なreactの開発をできているのでご安心いただけたらと思います。

では、実際に見ていきましょう。

letとconst

es6で一番よく使う記法です。jsは本来varによって宣言するのですが、es6では、変数をlet、定数をconstで定義します。

定数を使うことに違和感があるかもしれません。値を変更したいときにどうするんだ?って思うかもしれないですが、そのときは元の値を直接いじらずに新たに宣言した定数に元の値を変更したものを代入するという方法をとります。

let a = 1;      // 変数を宣言     
a += 1;         // aにa+1を代入
console.log(a); // => 2

const b = 1;
// b += 1;      // 定数だからエラー
const c = b + 1 // 新たに定数を宣言して計算結果を代入
console.log(b); // => 1
console.log(c); // => 2

reactではパフォーマンスの向上のために定数を使うんだと思っておけば大丈夫です。これを理解しないと先に進めないというわけではないので、reactができるようになってから、気になる人は勉強してみてください。

また、厳密にはvarとletには違いがありますが、基本的にはletを使うものなんだと思っていてもらったら大丈夫です。(スコープに違いがあります。)

*正確にはconstは再代入を禁止するもので内部の値を書き換えることは可能です。

アロー関数

=と>を使って=>という矢印を用いることからそのように呼ばれています。調べると無名関数云々と書いてありますが、要は定数みたいな感じで関数を宣言できるよってことです。

ちょっと雑になってしまって語弊があるかもしれないですが、reactを書けるようになるにはこれぐらいの理解で十分です。あとで解説しますが、関数型コンポーネントの説明で出てきます。

const HelloWorld = () => {
  return "Hello World!!";
}
// const HelloWorld = () => "Hello World!!";   // 1行でも書ける
console.log(HelloWorld());                       // => Hello World!!

実は従来のjsの関数とは違ってthisの挙動が変わってきます。
"js this"とかでググると色々出てくるのできになる人は調べてみてください!

クラス構文

これは、他の言語と同じです。reactに限っていうと使い方が限定されているので、そこまで理解する必要はないです。extendsによってクラスの継承もできるのですが、初めのうちはextends以下はおまじないだと思っていたらいいでしょう。僕も半年ぐらいおまじないだと思っていました。

class HelloWorld extends React.Component {
 render() {
   return (
     <div>
       HelloWorld
     </div>
   );
 }
}
正確には、React.Componentクラスを継承することで、render関数が使えたりstateやpropsといったreactの構文を使えることができるようになります。
この辺りはオブジェクト指向の基本なので気になる方は調べてみてください。

デフォルト引数

これ調べるまでjsの標準の機能だと思っていました。これは結構使うやつで、関数の引数に何も渡されなかったら、このデフォルト引数が引数として用いられます。

const PlusOne = (a = 1) => {   // aのデフォルト値が1という意味
 return a + 1;
}
console.log(PlusOne());        // =>   1 + 1 = 2
console.log(PlusOne(100));     // => 100 + 1 = 101

テンプレート文字列

これも標準装備だと思ってました。文字列の中で変数を展開できます。状況に応じてHTMLのclassの名前を変更したいときなどによく用います。shift + @のちょんちょんです。

const Hello = (name) => `${name}, Hello!`, ;
console.log(Hello("Tom"));              // Tom, Hello!

スプレッド演算子

これよく使われてるんですけど、知識がないと意味わからない上に"..."でgoogle検索しても全然違うものがヒットしてしまいます。これだけは、名前と意味を覚えておいた方がいいです。内容としては、配列やオブジェクトを展開できます。

array = [1, 2, 3];
console.log(...array); // 1 2 3

分割代入(追記)

これもes6でよく使われる記法です。

const state = {
    hoge: "hoge",
    fuga: "fuga"
}

っていうオブジェクトがあったときに、

const { hoge, fuga } = state

としてやると、それぞれのhoge, fugaに分割して値を代入することができます。reactでは、this.state.hogeみたいな書き方になって冗長なのでこのような書き方が好まれる傾向があります。

const { hoge: Hoge, piyo = "piyo" } = state

console.log(Hoge) // "hoge"
console.log(hoge) // undefined
console.log(piyo) // "piyo"

こんな感じで初期値や名前を変えて代入することもできるのでけっこう便利です。


押さえておきたいes6の構文は以上です。一応一通り目を通してほしいのですが、これだけ見ても実感がわかないと思います。そこでこの章を辞書的に使っていただけたらと思います。これ以降の章でもできるだけこれはes6だから0章みてねってことを書いていきたいと思います。

以下に参考にさせてもらったQiitaの記事を載せておきます。詳しく知りたいかたやよくわからなかった方は以下を参考にしてください。


1章 Reactとは

やっと本題のreactです。reactとはfacebook製のjsのライブラリです。ライブラリとはjsだけではコードをいっぱい書かないといけなくなってしまうので、それを使いやすいように賢い人が頑張って作ってくれたものです。reactはfacebookの賢い人たちが作ったかなり有能なライブラリです。

本家の説明によると、

"Reactはユーザーインターフェースを構築するためのJavaScriptライブラリです。宣言的に書け、効率的に動作し、柔軟性に富んでいます。"

うーん、よくわかりませんね。簡単にいうと、フロントエンドといってユーザーが実際に触る部分(=UI, ユーザーインターフェイス)を開発するときに利用されます。特にリロードを必要としないwebアプリでの利用が広まっています。

web版のTwitterとかわざわざリロードしなくてもツイートを読み込めます。そういったリアルタイム更新的な機能が簡単に作れます。

それぐらいならjQueryでもできそうと思うかもしれません。確かにできるんですが、reactの方がより柔軟に変更できる仕組み(=仮装 DOM)をもっているのと、規模が大きくなってもreactは管理がしやすくなっています。

では、次にreactの重要な用語の解説をしていきます。

コンポーネント

reactそのものと言っても過言ではないのに、なぜか説明がおろそかにされています。直訳すると部品、構成要素です。コードで書くと、

class HelloWorld extends React.Component {
 render() {
  return (
    <div>
      HelloWorld
    </div>
  );
 }
}

こうです。先ほどのes6の説明のところで使ったコードと同じです。ちょっとややこしくなってきましたね。

一個のクラスが一個の部品(=コンポーネント)になると理解しておけば大丈夫です。ちなみにクラス以外にも関数もコンポーネントを作ることができます。

そして、コンポーネントという名前の通りこれらは部品にすぎず、組み合わせることでアプリケーションに仕上げていきます。

たとえば、TODOアプリを作るとしたら、全体を包むApp Component、TODOを登録するAddTodo Component、登録したTODOを並べるTodoContainer Component、TODOの内容を表示させるTodoElement Componentを上の図のように組み合わせて作ります。

なぜこのようにコンポーネントを分けるのか基準は今はわからなくて大丈夫です。コンポーネントのイメージができればOKです。

props

これは親コンポーネントから渡ってきた情報を参照するときに使います。なぜこのような仕組みが必要かというと、コンポーネント内の情報は基本的に他のコンポーネントから参照できないからです。

これを他のコンポーネントに渡す仕組みがpropsです。propsを指定してやることで、子コンポーネントに情報を渡すことができます。

また、親コンポーネントからpropsで渡ってきた関数を実行することで親コンポーネントに情報を提供することができます。

例えば、TODOアプリではAppでTODOの情報を管理して、その情報をTodoContainer → TodoElement と伝えることで個々のTODOの情報を表示します。この辺りは実装しないと実感が掴めないと思います。

データをバケツリレーしていくイメージです。上の図では矢印がpropsとして受け渡されるデータを表しています。

state

stateは各コンポーネント内でのみ管理することができる情報のことをさします。管理とは、何かイベント(例えばユーザーがそのコンポーネントをクリックした)が起きたときに更新することができる、ということです。

この情報を表示している部分がUI(画面)です。reactではこの情報を簡単にHTMLにできます。stateが変更されるとそれがすぐにUIに反映されます。

TODOでは、AppでTODOに関する情報を管理してTODOが追加されるというイベントに対してstateの更新をする実装が望ましいでしょう。そしてTODOが追加さると、そのTODOがすぐにUIに表示されます。

〜1章のまとめ〜
props: 他のコンポーネントに情報を渡す仕組み
state: 各コンポーネント内でのみ管理できるデータ


2章 環境構築

この続きをみるには

この続き:17,923文字/画像5枚

【入門】 reactチュートリアル

宮川 竜太朗

500円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

これでなんとか明日もあったかいご飯が食べれそう、、ありがとうございます
29

宮川 竜太朗

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。