React~基礎編~APP開発

react

React学習記録

前回のReact ~基礎編~ Propsでは、Reactのプロパティについて学習しました。今回は、Reactのアプリケーション開発について、学びましょう。

環境構築

今まではCDNを使った環境でReactを勉強してきましたが、今回からはNode.jsをローカル環境にインストールし、Reactの開発環境を整えていきましょう。

構築内容については、React ~基礎編~ 事前準備に記述しています。

尚、私は「npm install -g create-react-app」の設定を行っていますので、その前提でアプリケーションを作成していきます。

terminalで次のコマンドを実行しましょう。

Reactのスタートアップ画面が表示されることを確認してください。

Webpack

create-react-appは、”Webpack“というjavaScriptのユーティリティによって支えられています。 簡単に特徴を書いておきますね。

<Webパックの特徴>
・モジュールのインポート/エクスポートを効率化する
– Chromeなどのブラウザに対して、CSS/javaScript/画像を一つのファイルに纏めてアップロードする
– HTTPリクエストを劇的に減らし、パフォーマンスを向上させる
・ローカルのソースファイルを修正した時にリアルタイムで画面をリロードする
・テストやデプロイを簡単に行えるようにする

「ローカルのファイルを修正した時にリアルタイムで画面をリロードする」という部分が特に便利です。少し試してみましょうか。

「npm start」で、プロジェクトが起動していることを確認後、src/App.jsを修正して下さい。私は、「This is a First React Learning!!!!!」を元々書いてあったテキストに上書き保存してみます。

画面を確認すると画面リロードなしに変更が反映されていることがわかります。

インポート/エクスポート

続いては、Reactのインポート/エクスポートについて学びましょう。先ほどのApp.jsをもう一度見て下さい。

モジュールのインポートに「import」、エクスポートに「export」キーワードが使用されていますね。これらのキーワードは、javaScriptファイル間で、クラス、データ、関数などに使用できます。

簡単なサンプルコードを記載しておきます。

このhelper.jsファイルをsrc/index.jsファイルで読み込みます(デフォルトで記述してある内容は、コメントアウトしておきます)

画面を見てみましょう。私は、Chromeを使用しているのでChromeのデベロッパーツールを開きます(Macの場合は、command+option+i, Windowsの場合は、F12)。

「console.log」の内容が出力されていることがわかりますね。

defaultキーワードは、他ファイルからインポートした際のデフォルト関数を指定できます。例えば、run関数をデフォルトに指定します。

defaultキーワードに指定した関数は、他のjavaScriptファイルから好きな名前で呼び出せます。

やってみよう

プログラムの勉強で大切なことは、学んだ知識を「アウトプット」することです。アプトプットを行うには、「アプリケーション」を作ることが最適です。

もしプログラマとして就職した場合、アプリケーションの設計を担当する可能性もありますし、「学んだ知識をいかに活用できるか」について常日頃考えられるといいですね。

今回は、献立アプリを作ってみましょう。

・献立アプリの要件
毎日の献立を考えるのは、主婦にとって大変です。主婦が献立を考えることを手助けしてあげましょう。

KOUKI
KOUKI

<One Point>
アプリといっても簡単なやつでいいんです。難しいものを作ろうとすると時間がかかって、学習が進みません(汗)

まずは、menuプロジェクトを作成します。

続いて、以下のファイルを作成しましょう。

menu.jsには、献立を書きます。7つ書いておきましょう。

helper.jsには、献立を選択する機能と外す機能を実装しておきましょう。

最後に、index.jsからこの2つのファイルを読み込みます。

では、「npm start」でプロジェクトを起動し、コンソール画面を開いてみましょう。

コンソールに今日の献立が表示されたでしょうか?

静的ファイルの読み込み

最後にCSS(スタイルシート)と画像の読み込み方法を勉強しましょう。

新しいプロジェクトを立ち上げます。

srcフォルダ配下に「pug.jpeg」ファイルを格納します。

pug.jpeg

まずは、Dog.jsを実装します。

CSSおよび画像はどちらも「import」キーワードで読み込みます。CSSは、適用させたいHTMLタグにclassName(ここではDog, Dog-img)を付与し、画像については中括弧({})で変数を囲むと取り込みができます。

続いて、Dog.cssを実装します。

最後に、App.js(プロジェクト作成時にsrcフォルダに自動作成されるファイル)にDogコンポーネントを取り込みます。

画面を確認してみましょう。

CSS及び画像を取り込めたようですね。

次回

次回は、ReactのStateを学びましょう。

コメントを残す