フロントエンド開発超初学者が贈る、0から始めるReactハンズオン

16676 ワード
React フロントエンド ハンズオン JavaScript 初心者 JavaScript テキストリンク

始めに

レガシー言語しか触ったことのなかった私が2019年12月中旬に初めて世間で一般的に使用されているプログラミング言語に触れて衝撃と感動を覚えてから早3カ月、、、(その時の記事)
あれからも昼休みや休日を利用して様々なイベントへの参加や自己啓発を行い、知識レベルが浦島太郎状態な現状を脱却すべく研鑽を積んできました。
Lambda関数を使用したサーバーレスなシステム作りに携わったり、Spring bootを使った開発技術を学んだり、HTML5プロフェッショナル認定試験の勉強をやったり...(インプットに夢中になってアウトプットさぼってましたすみません)
その一環でReactを使ったハンズオン学習をする機会があり、その時学んだ内容を自分の中に定着させる意味も込めて記事にしようと思ったので、お時間がある方はお付き合いください。

タイトルにもありますが、自分は超初学者ですので、その認識間違ってるよ！ってところなどありましたら優しくコメントくださると嬉しいです！

そもそもReactってなんぞ

Reactとは、webアプリ開発で使用されるJavaScriptのライブラリです。
webアプリのアーキテクチャの話でよく出てくるMVCモデルのView部分の実装に使われることが多いみたいです。

本記事ではこのReactを使って、
① Hello Worldの表示
② ①+αの表示
を作っていきます。

ハンズオンを実施する前に...

本当にCOBOLのようなレガシー言語しか知らなかった私のこの3カ月の経験からですが、私のような本当にまっさらな知識状態でweb開発の勉強がしたい！と思っている方はReactに触れる前にHTML,CSS,JavaScriptの学習をちょろっとでもいいので実施するのをオススメします。
私も昨年の12月Dev fest Tokyoというイベントに行った際angularというJavaScriptのフレームワークでハンズオン体験をする機会があったのですが、よーわからんけどコピペしてたらなんかいい感じのショッピングサイトが出来上がったという感じでした。

というのも、やはりReactの学習と言ってもその中にはHTMLやJavaScriptの概念がふんだんに出てきて、それらは知っている前提で進んでいくのでそもそもの基礎知識がないとただソースをコピペして成果物を作るだけになってしまいます。

とはいっても、コピペだろうと普段自分が使っているwebサービスに似たものが自分の手によって形となって出来上がるのは、それはそれで感動するのでお試しで実施するのはいいかもしれません。
(かくいう私もこのangularのチュートリアルでwebアプリ開発の楽しさに目覚めて今もこうしてモチベーション高く学習しております。)

それでは早速始めていきたいと思います！！

1-1)Reactを使う環境を設定する

Reactの環境導入は自PCにNode.jsというJavaScriptを使う環境をインストールするだけです。
私はMacbookを使用しているので、こちらの方の記事を参考に導入しました。
基本的にはこの通りに実施すれば問題なくReactの環境を導入できるはずです。
この時npmというパッケージ管理ツールが一緒にインストールされるのですが、これを使ってプロジェクト生成をしたりアプリを起動させたりします。

MacにNode.jsをインストール

1-2)成果物のひな形を作る

今回は私のような初心者でもReactを使ったアプリ開発を体系的に理解しやすいように、公式が提供している"create-react-app"というジェネレータを使ってアプリ全体の枠を最初に作ります。
家だけ先に作って、中に入れる家具や家電は後から追加していくイメージですね。

// ひな形の生成
npx create-react-app react-handson

// 生成したプロジェクトへ移動
cd react-handson

ここでひな形生成時にしれっとnpmではなくnpxを使っていますが、npxはnpmパッケージを簡単に実行できるコマンドで、これもnpmをインストールすれば勝手に使えるようになっています。
ここではグローバルインストールせずに1度だけ実行するために使っています。
要は自分のPCにインストールしなくても一瞬だけ借りて使い終わったら速攻で消してくれる便利なコマンドです。

ここで一度以下コマンドでアプリを起動してみましょう。
npm start

するとしばらくしてブラウザが勝手に開くので、以下のような画面がでればOKです。

2-1)Hello Worldを表示させる

今回は理解しやすくするためにジェネレータによって生成されたコードのうち使わないものは削除します。

rm public/manifest.json 
rm src/*

その後、以下のような最小構成のファイルを作成します。

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
src/App.js
import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

export default App;

htmlファイル内の不要な記述も削除して、以下のようにします。

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

この状態でnpm startすると以下のようにHello Worldが出ると思います。

2-2)構成と解説

ここまでの時点でディレクトリ構成は以下のようになっているかと思います。

.
├── node_modules    // 外部ライブラリ
├── README.md       // プロジェクトの説明などを記載するファイル
├── package.json    // 依存するライブラリなどを記載するファイル
├── public          // Web上に公開するディレクトリ
│   ├── favicon.ico // ブラウザのタブに出るアイコン
│   └── index.html  // エントリーポイントとなるhtml
└── src             // 開発者が書くコードを置くディレクトリ
    ├── App.js      // ルートコンポーネント
    └── index.js    // Reactのコードのエントリーポイント

ここでHello Worldの描画に直接関わっている人たちは以下の3人
・index.html
・App.js
・index.js

まずindex.htmlですが、ここに記載する内容が実際に画面に表示されます。
今回のソースで言うと、画面に表示される所はここ↓

index.html
<body>
    <div id="root"></div>
</body>

これだけだと、画面には"root"というid属性を持った空のdivタグが表示されるだけです。
ではなぜ画面にHello Worldが表示されたかというと、誰かが"root"というid属性をキーにdivタグの中にHello Worldを入れたのです。
そのHello Worldという中身を持っているのがApp.jsです。

src/App.js
import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

export default App;

App.jsの中には<h1>Hello World</h1>というhtmlタグを戻す関数があり、この戻り値がdivタグに入っている形になります。
そして、このhtmlタグをdivタグの中にぶち込んでくれるのがindex.jsです。
index.jsの中身の内、上3行はただのimportなので実質の中身はこの1行。

src/index.js

ReactDOM.render(<App />, document.getElementById('root'));

ぱっと見よくわからないことをやっているように見えますがこれを日本語にすると、App関数の戻り値をindex.html内にあるid属性が"root"のタグの中にレンダリングするということです。
このレンダリングというのがreactの特徴の一つであり、reactの開発はこのように別々で作ったパーツ(コンポーネント)をレンダリング処理によって別のコンポーネントと組み合わせ、出来上がったものを画面に表示するという流れになります。
機能を追加して行く場合、このコンポーネントやコンポーネントを統合するコードを増やしていく事になります。

3-1)コンポーネントを増やしてみる

コンポーネントの使い方を理解するために、複数のコンポーネントを作成しそれらを組み合わせてみましょう。

新しくsrcディレクトリ配下にcomponentsディレクトリを作成し、そこに以下のようなHello.jsを作成します。

src/components/Hello.js
import React from 'react';

function Hello() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>konnitiwa sekai</p>
    </div>
  );
}

export default Hello;

作成したHelloコンポーネントを画面に表示させるためにApp.jsを修正します。

src/App.js
import React from 'react';
import Hello from './components/Hello'; // Helloコンポーネントをimportする

function App() {
  return <Hello />; // importしたHelloコンポーネントを返すように変更する
}

export default App;

importしたコンポーネントはhtmlタグのようにして使うことができます。

ここまでで、アプリを起動させると以下のようになるはずです。

次に、引数を渡してそれをコンポーネントに埋め込んだ関数も追加してみます。

作成したcomponentsディレクトリに以下のようなGreet.jsを作成します。

src/components/Greet.js
import React from 'react';

function Greet({ name }) {
  return <p>Hello {name}さん！</p>; // {}で囲うと変数を埋め込むことができる
}

export default Greet;

最後にGreetコンポーネントを呼び出すロジックをApp.jsに追加します。

src/App.js
import React from 'react';
import Hello from './components/Hello';
import Greet from './components/Greet'; // importを追加

function App() {
  return (
    <div>
      <Hello />
      {/* 引数は属性として渡す */}
      <Greet name="Qiita" />
    </div>
  );
}

export default App;

引数の受け渡し方法ですが、属性に値を設定することで渡すことができます。
この時、引数を渡す時の属性名と受け取る時の変数名は同一でないといけないのでご注意ください。
・function Greet({ name }) {
・<Greet name="Qiita" />

上記の修正が反映した状態でアプリを起動させて、以下が表示されたら成功です。

最後に

webアプリ開発の'ウェ'の字も知らなかった３ヶ月半前からどっぷりと開発知識の習得に邁進していますが、レガシー業界の住人である私にとってこの業界の技術を学ぶのは本当に刺激的です。
今後も記事にしてアウトプットすることでどんどん知識を自分に落とし込んでいこうと思います。
ちなみに、本当はuseStateを用いた状態管理やらページ遷移やらReduxを用いた状態管理やらも書きたかったのですが、量がすごい事になるのでまた別で書こうと思います。

ここまで読んでくださりありがとうございました！