プロジェクトの作成

MS Learn で使用していた Snowpack を使ってみる。まずは適当にディレクトリを作って、そこに package.json を作ってパッケージ情報を書き込む。

{
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    },
    "dependencies": {
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
    },
    "devDependencies": {
        "snowpack": "^3.8.8"
    }
}

あとは puclic ディレクトリと src ディレクトリを作って、npm install すればOK。モジュールが追加されたら、snowpack.config.js を作る。これで JS ファイルの出力先が定義できる。

module.exports = {
    mount: {
        'public': '/',
        'src': '/dist'
    }
}

HTML の記述

とりあえず、今までやってきた通りにテンプレを作っていく。まずは public ディレクトリに index.html を作成して script を読み込ませる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レシピ</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
</body>
</html>

これだけでは何も表示されないので、スクリプト（コンポーネント）を書いていく。

コンポーネント作成

src ディレクトリに App.jsx を作成して適当に記述。

import React from "react";

function App() {
    return (
        <h1>はじめて手作業で作ってみた。</h1>
    );
}
export default App;

んで、この App.jsx のままでは描画されないので、レンダリングするために index.jsx を作成して ReactDOM を使用する。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App"

ReactDOM.render(<App/>, document.getElementById("app"));

これで index.html 内の script 要素に書いた id="app" にレンダリングされるという認識でいいのかな？

いったん動作確認

おそらく最低限のコードは書けたはずなので、npm start で表示してみる。

f:id:takunology:20220401045436p:plain

良さそう。あとはいい感じにオリジナリティを出してみる。

レシピを追加する

オブジェクトとか、配列をいい感じに使ってレシピを表示できるようにしてみる。

src ディレクトリに curry.jsx を作って、Curry メソッドに代入したオブジェクトの情報を表示させる処理を書く。

import React from "react";

function Curry(props) {
    const ingredientListItems = props.ingredients.map((ingredient, index) => {
        return (
            <li key={index}>
                { ingredient.name } ({ingredient.amount})
            </li>
        );
    });
    return (
        <ul>
            {ingredientListItems}
        </ul>
    );
}
export default Curry;

App.jsx にて、作成した Curry コンポーネントを呼び出して、パラメータに作ったレシピのオブジェクトを渡してあげればOK

import React from "react";
import Curry from "./Curry"

const normalCurry = {
    title: "普通のカレー",
    ingredients: [
        {name: "じゃがいも", amount: "1個"},
        {name: "にんじん", amount: "1/3本"},
        {name: "たまねぎ", amount: "1/2個"},
        {name: "牛肉", amount: "50g"},
        {name: "サラダ油", amount: "適量"},
        {name: "水", amount: "適量"},
        {name: "カレールウ", amount: "適量"}
    ]
}

function App() {
    return (
        <section>
            <h1>カレーのレシピ</h1>
            <h2>{normalCurry.title}</h2>
            <Curry ingredients={ normalCurry.ingredients }/>
        </section>
    );
}
export default App;

これを動かしてみるとこんな感じになった。

f:id:takunology:20220401052316p:plain

スタイルシートもやっておいたほうがいいのか迷っているけど後回しでも良さそう。React の挙動さえわかればいいので、そこまでデザインに時間をかけていてもなぁと思うので。

まだチュートリアルの途中だけど、概要はなんとなく掴めた気がする。

index.html を作成して、スクリプトを埋め込む
index.jsx を作成して、ReactDOM でレンダリングする
必要に応じて jsx ファイルを作成して、export していくことでコンポーネントを提供する

あとはプロジェクトの作り方とか、HTML の要素との対応に気をつけながら書いていけばいい感じかな。

イベントのお知らせ

2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。
興味がある方は（社会人、学生問わず）ぜひご参加ください！
Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！

mspjp.connpass.com