• 目的別厳選記事




Reactに興味があるけど何となく「難しそう」と感じて手が出せない人、

ネットで軽く調べてみたけど「???」な人、

モダンなJavaScriptをどれか習得したいと思っている人、

そんな人達がReactを始めるキッカケになればと思いこの記事を書いています。

Reactはとっかかりが難しく、勉強方法を間違えると嫌いになってしまいがちですが、順序立てて学習すれば決して難しくありません

騙されたと思ってこのハンズオンをやってみてください!!!

そう、騙されたと思って始めれば実際に騙されてもダメージは少ないはず…←


私が主催するこちらのイベントでReactのハンズオンをして、なかなか評判が良かったのでこのブログにもまとめています。

また、上記イベントでは時間の関係上全部できずに終わったので、参加された方も要チェックです。





それではReactの世界へようこそ!Hello React!!

Reactハンズオンを始める前に

Reactをオススメする理由

ハンズオンがメインなので細かくは書きませんが、私がReactをオススメする理由は以下です。

なぜReactを勧めるか

Reactはライブラリ(VueやAngularはフレームワーク)
日本ではまだまだ開発者が少なく仕事がとりやすい
アプリ開発にも繋がる(ReactNative)

ライブラリで何が良いかと言うと

「Reactをやっていると自然とJavaScriptの力がつく」



からです。


例えばコンポーネントのループだと、Vueは< v-for >などの用意されたタグを使いますが、Reactの場合はJavaScriptのmap関数を使って実現します。(ハンズオン内でも実践するのでお楽しみに)

これは一例ですが、Reactでは他にもJavaScriptの様々な機能を最大限生かしてコーディングしていくので知らず知らずのうちに自力がつくと思います。

仕事がとりやすいというのは、私自身が本当に実感していることですし、ReactをやっていればReacNativeの案件も視野に入るのでコスパが良いです。

Reactの勉強方法でやってはダメなこと

Reactにつまづく人達に話を聞いたりして思ったことです。
(自分も最初、「むずっっ」って挫折しそうになりました)

React初学者がやってはダメなこと

いきなり完成されたコードを読み解く
いきなりReduxをやろうとする
いきなりHooksをやろうとする

簡単にまとめると、

「基礎からしっかり順番に」



です。

小さなコンポーネントを実際に書いて組み立てるところから順々にやり始めれば、理解は非常にスムーズになります。

そしてこのハンズオンはまさにそれを体感できるようになっていますので、安心してついてきてください。大丈夫、おじさん全然怪しくないからね~。こわくないこわくないよ~。

環境

ハンズオンの環境ですが、WEBエディターで行います。

よって面倒な環境構築は一切不要です。

以下の記事で紹介していますが、スーパー優秀なCodeSandboxを使います。

GitHubアカウントをお持ちの方は是非Sign inして連携しちゃってください。

ハンズオン事前準備

じゃけぇじゃけぇ

では、前置きはこれくらいにしてハンズオンはじめよ~う

※GUIは2019年7月時点なので多少変更はあるかもしれません

CodeSandboxにアクセスする

右上のCreate Sandboxを押下する


Reactを押下する


はい!これだけでReactプロジェクトが完成です!


考える人考える人

やべぇ~~~~~~

軽く説明すると、基本的にはホットリロードが効いているのでソースを修正したら右側の画面が合わせて変わってくれますが、如何せんWEB上なのでたまにおかしいと思うときはソースを『保存』してからブラウザごと再読み込みしてみてください。

初期コードの説明

初期コードの説明を簡単にすると、publicフォルダ配下にindex.html、srcフォルダ配下にindex.jsstyles.cssが配備されています。



ReactなどのSPA(single Page Application)はHTMLは1つのみで、jsのレンダリングで画面遷移などを表現します。

index.htmlの30行目あたりに、<div id=”root”></div>とあると思いますが、ここがレンダリングする目印となっています。

HTMLファイルを触ることはないので、ここだけ確認したら閉じてしまいましょう。

index.jsは最初に呼ばれるコンポーネントで、cssは説明不要かと思います。

不要なファイルの削除

今回のハンズオンではcssファイルは使用しないので、styles.cssは削除しましょう。



マウスオーバーすると×ボタンがでるので押下して、Deleteを押下します。



次にindex.jsをひらいて、一旦内容を全て削除してしまいましょう!



では、白紙の状態から書き始めましょう。

画面タイトルを表示してみよう

この章のゴールは以下のようにh2タグでタイトルを表示することです。

では書いていきましょう。

これはお決まりですが、Reactを使う場合、「react」からimportする必要があります。
「react-dom」はHTMLにレンダリングするのに必要なので1番親のコンポーネントのみimportが必要です。

index.jsにimport文を書いていきます。

[index.js]


次に関数を書きます。ES2015(ES6)から導入されたアロー関数を知らない人は先に調べることをオススメしますが、説明もするので雰囲気では分かるかと思います。

Appという関数名でnullを返却するだけの関数を作りましょう。

[index.js]


そしてこの定義したAppをHTMLファイルにレンダリングする処理を記述します。

[index.js]


さぁこれで枠が完成しました!今はnullしか返してないので画面には何も表示されないと思いますが、エラーは出なくなったはずです。

このApp関数のreturn文の中にHTMLのタグを書いていくのがReact特有のJSX記法と呼ばれるものなのです。

また、<App />のように、関数を< />で囲むことでコンポーネントとして扱うことができます。

では先程の関数を以下のように修正してみましょう。

[index.js]


すると以下のようにタイトルが表示されたと思います!



考える人考える人

これが噂のJSX記法ってやつか、、、

じゃけぇじゃけぇ

JavaScriptの中にHTMLタグを書くから慣れないうちはちょっと違和感あるかもね

じゃけぇじゃけぇ

そしてこのJSXを使ってHTMLタグがreturnされた関数(ここで言うApp)を関数コンポーネント(Functional Component)って呼ぶんだよ



Reactはこういったコンポーネントを定義して、それらを組み合わせることで画面を作っていきます。

関数コンポーネントとは別にクラスコンポーネントというものがあります。ハンズオンで後程紹介するのでお楽しみに!

タイトルの下に説明文を追加してみよう!

では次に先ほどのタイトルの下にpタグで説明文を追加してみましょう。

普通のHTMLの感覚で書くと以下のように書きたくなると思います。
(あ、returnが複数行になるときはカッコで囲みましょうね。)

[index.js]


しかしこう書くと以下のようなエラーが表示されていると思います。

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?

何を言っているかというと、

「JSXの要素は1つのタグで囲まんかい!fragment使ったらどうや?お?」

って怒っています。短気ですね。


これがJSXの最大のルールで、

returnするタグは1つに囲まないといけない

のです。

回避方法は大きく3つあります。



1.divタグなどHTML標準の何かしらのタグで囲む

先ほどの例で言うと、以下のようにすればエラーは消えるでしょう。

[index.js]



ただこの場合、エラーを回避する目的のためだけに不要なdivをレンダリングしていることになり、スマートではない場合もあるでしょう。



2.React.Fragmentで囲む

Reactの途中のバージョンからFragmentというものが使えるようになりました。

流石に開発者も「コレゼンゼンスマートジャナイヨ」ってなったのでしょう。

[index.js]


これはエラーを回避でき、且つ画面に不要な要素がレンダリングされない方法です。

でもちょっと長ったらしいしいちいちこれ書くのメンドクサイですよね。そこで最後の手法。



3.<></>で囲む

なんと以下のように書けます。

[index.js]


これはReact.Fragmentと全く同じ意味の省略形です。

1番外のタグに、特にスタイルなど適用しなくて良い、ただエラー回避のためだけに囲みたいときはこれを使っておけばOKです!

さいごに

さぁReactの基礎となるJSXはマスターできましたね。

長くなってきましたので、続きは次回としましょう。

尚、このハンズオンのソースはGiHubに公開しています。
https://github.com/freelance-jak/react-handson_1_h2p


次はReactで重要な役割を果たしてくれるPropsについて書きながら紹介したいと思います!

もし「分かり易い!」と感じたら是非のボタンからシェアしてReactの輪を拡げて頂けたらと思います!

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-