React~基礎編~APP開発

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

<目次>

環境構築

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

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

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

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

# プロジェクトの作成
create-react-app start-react-app

cd start-react-app/

# プロジェクト起動
npm start

# プロジェクトの作成

create-react-app start-react-app

cd start-react-app/

# プロジェクト起動

npm start

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

Webpack

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

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

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

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

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {/* edit */}
          This is a First React Learning!!!!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

src/App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

return (

<p>

{/* edit */}

This is a First React Learning!!!!!

</p>

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

Learn React

</a>

</header>

</div>

);

}

export default App;

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

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

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

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
...
}

export default App;

import React from 'react';

import logo from './logo.svg';

import './App.css';

function App() {

...

}

export default App;

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

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

touch src/helper.js

1	touch src/helper.js

helper.js

function run() {
    console.log('I AM RUNNING IN THE PARK WITH MY DOG!');
}

function stop() {
    console.log('I STOP RUNNING BECAUSE I AM TIRED')
}

function sing() {
    console.log('I SING A SONG FOR CHANGING MOOD')
}

export {run, stop, sing}

helper.js

function run() {

console.log('I AM RUNNING IN THE PARK WITH MY DOG!');

}

function stop() {

console.log('I STOP RUNNING BECAUSE I AM TIRED')

}

function sing() {

console.log('I SING A SONG FOR CHANGING MOOD')

}

export {run, stop, sing}

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

src/index.js

import {run, stop, sing} from './helper'

run();
stop();
sing();

src/index.js

import {run, stop, sing} from './helper'

run();

stop();

sing();

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

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

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

src/helper.js

function run() {
    console.log('I AM RUNNING IN THE PARK WITH MY DOG!');
}

function stop() {
    console.log('I STOP RUNNING BECAUSE I AM TIRED')
}

function sing() {
    console.log('I SING A SONG FOR CHANGING MOOD')
}

export default run
export {stop, sing}

src/helper.js

function run() {

console.log('I AM RUNNING IN THE PARK WITH MY DOG!');

}

function stop() {

console.log('I STOP RUNNING BECAUSE I AM TIRED')

}

function sing() {

console.log('I SING A SONG FOR CHANGING MOOD')

}

export default run

export {stop, sing}

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

import r, {stop, sing} from './helper'

r(); // run -> rで呼びだし
stop();
sing();

import r, {stop, sing} from './helper'

r(); // run -> rで呼びだし

stop();

sing();

やってみよう

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

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

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

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

KOUKI

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

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

# menu project作成
create-react-app menu

# 移動
cd menu

# menu project作成

create-react-app menu

# 移動

cd menu

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

touch src/menu.js
touch src/helper.js

1 2	touch src/menu.js touch src/helper.js

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

src/menu.js

const menuList = [
    "🍛", "🍖", "🥗", "🥩","🍜", "🍔" 
]

export default menuList;

src/menu.js

const menuList = [

"🍛", "🍖", "🥗", "🥩","🍜", "🍔"

]

export default menuList;

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

src/helper.js


// 献立を選択する
function choice(items) {
    let idx = Math.floor(Math.random() * items.length);
    return items[idx]
}

// 選択した献立を外す
function remove(items, item) {
    for (let i = 0; i < items.length; i++) {
        if (items[i] === item) { 
            return [...items.slice(0, i), ...items.slice(i+1)];
        }
    }
}

export {choice, remove};

src/helper.js

// 献立を選択する

function choice(items) {

let idx = Math.floor(Math.random() * items.length);

return items[idx]

}

// 選択した献立を外す

function remove(items, item) {

for (let i = 0; i < items.length; i++) {

if (items[i] === item) {

return [...items.slice(0, i), ...items.slice(i+1)];

}

export {choice, remove};

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

import menuList from "./menu";
import {choice, remove} from './helper'

let menu = choice(menuList);
console.log(`今日の献立は、${menu}にしよう!`)
console.log(`さあ、お食べ: ${menu}`)

let remaining = remove(menuList, menu);
console.log(`美味しかった. 明日は、${menu} 以外でお願いね.`)
console.log(`残りの献立: ${remaining.length}つ`)

import menuList from "./menu";

import {choice, remove} from './helper'

let menu = choice(menuList);

console.log(`今日の献立は、${menu}にしよう!`)

console.log(`さあ、お食べ: ${menu}`)

let remaining = remove(menuList, menu);

console.log(`美味しかった. 明日は、${menu} 以外でお願いね.`)

console.log(`残りの献立: ${remaining.length}つ`)

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

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

静的ファイルの読み込み

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

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

create-react-app cra_sample
cd cra_sample

touch src/Dog.js
touch src/Dog.css

npm start

create-react-app cra_sample

cd cra_sample

touch src/Dog.js

touch src/Dog.css

npm start

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

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

Dog.js


import React, { Component } from 'react';
import pug from './pug.jpeg';
import './Dog.css';

class Dog extends Component {
    render() {
        return (
            <div className="Dog">
                <h1>DOG!</h1>
                <div>
                   <img className="Dog-img" src={pug} />
                </div>
                <div>PUG IS AWOSOME DIG IN DOGS</div>
            </div>
        )
    }
}
export default Dog;

Dog.js

import React, { Component } from 'react';

import pug from './pug.jpeg';

import './Dog.css';

class Dog extends Component {

render() {

return (

<div>

</div>

<div>PUG IS AWOSOME DIG IN DOGS</div>

</div>

)

}

export default Dog;

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

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

Dog.css

.Dog {
    color: purple;
}

.Dog-img {
    width: 200px;
}

Dog.css

.Dog {

color: purple;

}

.Dog-img {

width: 200px;

}

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

App.js

import React from 'react';
import './App.css';
import Dog from './Dog';

function App() {
  return (
    <div className="App">
     <Dog /> 
    </div>
  );
}

export default App;

App.js

import React from 'react';

import './App.css';

import Dog from './Dog';

function App() {

return (

<Dog />

</div>

);

}

export default App;

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

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

次回

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

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

環境構築

Webpack

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

やってみよう

静的ファイルの読み込み

次回

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

環境構築

Webpack

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

やってみよう

静的ファイルの読み込み

次回

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Golang/Go言語]GinフレームワークでAPI開発~記事まとめ~

DjangoでGraphQLを学ぼう！〜Mutation〜

JavaScriptでボタンにRipple Effectをつける

[Go言語]Stateパターンを学ぼう2!

[入門]GitHub Actions ~全てのエンジニアのための備忘録~

VueJS ~ 記事まとめ ~

[CSS]プログレスバーのスタイリング!

Django Rest Frameworkを学ぼう! ~シリアライズについて…

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル