概要
- はじめに
- Reactとは?
1. 【特徴1】：コンポーネントに分ける
2. 【特徴2】：JSX
3. 【特徴3】：Propsを渡す
4. 【特徴4】：State
5. 【特徴5】：React Hooks
6. 【特徴6】：Reactと使えるライブラリー - まとめ
はじめに
私は、ニュージーランド人と日本人の親に生まれ、ニュージーランドで育ちました。それで、日本語より英語の方が母語になって、３年前に日本語学校で勉強するために戻ってきました。日本語は大体喋れるようなりましたが、まだまだ、ネイティブのレベルではないので、ご理解ください >_<
日本語学校に通っていた時に、何人かのプログラマーの友達ができて、プログラミングがどんなことか教えてもらって、興味を持ちました。それで、2年前からHTML/CSS/JavaScriptの基本について独学を始めて、6ヶ月前に初めてWeb開発の会社に入りました。2ヶ月前に初めてReactに触って、それから新規ECサイトのプロジェクトの開発を行なっています。
この間にReactの公式ドキュメントを読んだり、同僚から色々教えていただいたり、沢山の情報のインプットがありました。それで、アウトプットもできるようになるためと、頭の中に入ってきた情報の整理と復習のためにも、この2ヶ月間で学んだことについて書いてみようと思いました。
(まだ初心者で、できれば調べないで自分の言葉で説明できるかを試しているので、書いた情報は正しいとは言えません。)
Reactとは?
ReactはJavaScriptやTypeScriptの言語と使う人気なフレームワークです。AngularやVue.jsなどのフレームワークに似ています。フレームワークを使うことで、コードがもっと整理しやすくなって、書きやすくなります。最初はそのフレームワークの使い方、「ルール」や書き方、機能などを学ぶのに時間は掛かりますが、後でには普通に書くより楽になります。特に大きいプロジェクトには欠かせないと思います。
私にとって、Reactの主の特徴は:
1. コードをコンポーネントに分けて書くこと
2. HTML(JSX)とJSを一つのファイルの中で書けること
3. Propsを渡すこと
4. State
5. React Hooks(Reactにすでに入っている様々な機能)
6. Reactと使えるライブラリーがめっちゃある??(Reactがプラスアルファになるみたいな)
この特徴について説明してみます。
【特徴（1/6）】：コンポーネントに分ける
Reactでは、コードを、コンポーネントに分けることができます。
例えば、ホームページは、ヘッダー、サイドバー、コンテンツ、フッターなど、パーツに分けれます。
ヘッダーやフッターは、よく同じコードを、様々なページで使いますよね？
この場合、Reactでは、フッターのコードを、Footer.tsxというファイルの、Footerという関数に入れます。
それで、そのFooterという関数をexportして、他のページのファイル、例えばhomepage.tsxかなんかに、にimportします。
そうすると、<Footer />のタグで、フッターのコンポーネントを、HTML(JSX)の部分に入れることができて、その同じコードを使うことができます。一つのタグで、全部のコードを使うことができるので、コードがとても読みやすくなります。
こうやって、コンポーネントに分けることで、同じコードを、何回も書かなくても、どこからでも利用することができます！
【特徴（2/6）】：JSX
Reactではなんと...！！HTMLとJavaScriptを一つのjsファイルで書けます！
HTMLのファイルとJSのファイルに分けなくていい！
しかし、普通にHTMLをそのまま入れることはできなくて、JSXというのを書きます！JSXは、ReactのHTMLマークアップ言語です。ほぼHTMLとは同じ書き方ですが、少し違いがあります。
例えば、普通のHTMLでは、class="red-text"などでCSSを指定しますが、JSXでは className="red-text"と書きます。なぜなら、React(JavaScript?)では別のclassという関数みたいなのがすでにあって、名前が同じだと紛らわしくて、どっちなのか分からなくなるからです。
後は、JSXは、関数のreturnに入ります。そして、そのreturnの中のJSXを、一つの<div>タグか、何も入っていない<>タグに、一つにまとまるようにしないといけません。そうしないと、エラーが出ます。その他にも少し色々違いがありますが、この二つが最初に一番よく使うことかなと思います。
一つのファイルでJSとHTMLを書ける良いところは、JSから直接データを渡せたり、HTMLの中でロジック、if文やArrayのmap()などが書けるようになります。ただし、なるべくロジックはJSXから分けた方が良いと学びました！なぜなら、コードがだんだん長くなってきて、JSXにもロジックが結構多いと、どこで何が起きているのが読みにくくなってきます...! 最近この経験があったので、できるだけ、別々にしようと思います。だが、JSXでよく見るロジックの使い方は、Arrayのmap()です。何回も似てるデータをJSXで表示するには便利だそうです！
【特徴（3/6）】：Propsを渡す
一つのコンポーネントから別のコンポーネントにデータを渡したい時は、Propsを渡すと言います。（親から子供へ。）
JSXにも、JSの部分から、Propsを渡したりします。
例えば、ホームページの中のフッターコンポーネントになにかデータを渡したい場合だと、こんなように渡します。
<Footer data=props/>
Propsを渡すときは、なるべく必要の部分だけに絞ってから渡すと良いです。
そして、TypeScriptなら、Footerのコンポーネントで受け取ったPropsのタイプの指定もすると良いです。
少し面倒ですが、データに何が入っているかが後でデバッグする時にもっと読みやすくなります。
JSXでは、{}の中に入れることで、JSからデータやPropsを渡すことができます。
例えば、personという、人の名前のデータが入っているobjectがあるとしたら、こんな感じで名前を表示できます。
<p>{person[0].name}</p>
【特徴（4/6）】：State
Stateは全部のコンポーネントに入っているて、そのコンポーネントのデータを保存している。
Stateは、「状態」の意味。
Renderされるたびに、更新される。
ページがrefreshされると、データが初期設定にリセットされる。
特に次の特徴、React HooksのuseState()やuseEffect()とか使い初めて、注意することは、いつのstateのデータが利用されていることを理解しているかどうかです。実際に、そのstateにいつ、何が入っているのかが、たまに分かりにくいと感じました。console.log()で、中身を確かめようとしても、その時点のデータではなかったりして、混乱しやすい。
【特徴（5/6）】：React Hooks
すでにReactに入っている、利用できる関数。ほとんど「use」で始まるそうです。
React Hooksはたくさんあるみたいですが、useState（）とuseEffect（）を一番使います。
useRef()や、useContext()などについて読んだ覚えがありますが、まだ実際には使っていないので、何だったかは覚えていない。
useState()
useState()はstateの管理に使います。こんな感じに書きます。
const [count, setCount] = useState<number>(0);
これは、Reactを最初習う時によく出てくる例ですが、countするボタンがあって、そのボタンにクリックすると、表示している数値に+1を足します。
初めてReactで書くときに、普通にuseState()なしでそのロジックを書いても、動きません。なぜなら、そのコンポーネントのstateが変わっていないからです。表示を変えるためには、useState()などで、stateを管理する機能が必要です。
count
countの変数には、保存したいデータを入れます。名前で中身に何が入っているか想像できるように決めましょう。
setCount
setCountは、関数なように、setCount("1")として書けば、countに入れるデータの指定ができます。countのデータを変えたい時は、必ずsetを利用して指定すると良いです。変数の名前がfruitとかであれば、setFruitと名前付けるようなパターンで書きます。
useState<number>(0);
()の中には、最初にcountに入っているデータを指定できます。これだと、countの中身は、0が入っています。TypeScriptでは、()の前に、<number>とかでcountに入るデータのタイプを指定できます。
そして、ボタンのonClickの関数をこのように書けば、countがsetされて、countのstateが変わりますので、表示もちゃんと、０から１に変わります。
function handleClick() {
setCount(count + 1);
}
useEffect()
useEffect()は、ページがロードした後に走る関数です。
英語では、side effect という単語があって、日本語では「副作用」の意味です。
なので、ページがロードするときの副作用として考えられます。
このように書きます。
useEffect(() => {
//ここにコードを書く
}, []);
[]のところには dependencies というのが入ります。
[]無しだと、ページがrenderされるたびの後に走ります。
[]だけだと、最初のrenderの後だけに走ります。
[count]など、何か変数を入れると、その変数に変化があるたびに、走ります。
例えば、ECサイトで、商品のデータが全部取得されるまでは、ローディング中の画面を表示したいとなったら、useEffect()を使います。それだと、ページがロードした後に、ローディング中の画面から、商品の表示への切り替えができます。
【特徴（6/6）】：Reactと使えるライブラリー
Reactを使い始める前は、ライブラリーが何なのかがまだ良く分かっていなかった。
Reactを使い始めてから、なんかめっちゃライブラリーを使っている気がします。
それで、Reactの一つの特徴は、なんかめっちゃたくさん使えるライブラリーがあるとの印象です。
ライブラリーは、他ですでにもう書いてあるコードを利用することだと理解しています。
新規ECサイトの開発で使っているライブラリー:
- Material-UI(デザイン)
GOOD:
CSSをたくさん書かなくても、コンポーネント(ボタン、フォーム、テーブルなど)をimportして、JSXに入れて、attributeを少し変更するだけで、綺麗にGoogleでよく見るやつみたいなように仕上がります！特に独特なデザインが必要ではない時や、とりあえずダミーとして入れて、ロジックの方に集中したい時に良さそうです！様々なページを同じテーマ色にするのにも良さそうでした。
BAD:
普通にCSSでattributeを変えれなくなったり、なんか細かいところを調節するのにはちょっと不便な感じがしました。調節しなければ全部がGoogleっぽく見た目になる。
- React Router(ルーティング)
ページのルーティングがなんか分かりやすくなる。ヘッダーのリンクなどに主に使いました。React Routerの<Link>と普通の<a>でのページへの飛び方に違いがあります。
...でも違いが具体的に何だったか忘れてしまった...
ここは復習にまた調べてみました。<a>で普通にページを飛ぼうとすると、ページがrefreshされてしまいます。そして、Reactでは、refreshされると、stateや、Reduxに保存してたデータが、リセットされてしまいます。<a>だと、 普通にブラウザーがHTTP requestを送りますが、<Link>を使えば、 client-side routingというのになって、ブラウザーではなく、アプリ内でルーティングをします。<a>は、アプリの外部のリンクには使うそうです。
- React Hook Form(フォームバリデーション)
WebフォームのJSバリデーションが普通に書くより楽になる。
- Redux(状態管理)
ReactのStateを管理できるライブラリー。データをどのページからアクセスすることができるようになって、どのページからでも変更できるようになる。同じデータを複数のページで使う時に便利。使い方を学ぶのは少し難しい。
使ったことがないけど、聞いたことがあるライブラリー:
- Recoil(状態管理)
状態管理ライブラリーだとは知っている。Reduxと比べてどんな感じかが気になる。
Next.js
(Reactのライブラリーだと思ってたけど、調べたら、Reactがベースとして作られたまた別のJSフレームワークでしたw)
まとめ
2ヶ月間Reactについて学んで、理解できたところはこのぐらいかなと思います！
その他は、create-react-appについてや、APIのfetchの仕方なども習いました。
今のところ、Reactの基本はなんとなく理解はできている感じだと思います。
また、これからも色々学ぶのに楽しみです