<h2 id="he2485005d0">目的</h2><p>この記事は、webpackを使用し、React の開発環境を作成することを目的とした記事になります。<br></p><h2 id="hc354d8821e">方法</h2><p>方法として、webpackをベースにReact+ Typescript + Sass の環境構築をcreate-react-appを使用せず最小単位で作成します。<br>その環境構築を通して、裏ではどのようにフロントエンドが動作していたのかを把握することを目指しました。<br>以下、今回の記事の登場技術です。</p><ul><li>webpack</li><li>bubel</li><li>Sass</li><li>Typescript</li><li>React</li></ul><h2 id="h0123682dfe">webpack</h2><h3 id="h9cfcca6ec5">webpackとは</h3><p>モジュールバンドラー<br>複数のフロントエンドで必要なファイルを1つのjavascriptファイルに束ね(バンドル)出力してくれるツール。<br>他にもモジュールバンドラーはありますが、現状webpackが1強のようです。<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>複数のファイルに分け開発できる。</li><li>依存関係を解決してくれる。</li><li>1ファイルにまとめることでウェブコンテンツの読み込み速度が向上する。</li><li>jsだけでなく、css、画像ファイルなどもバンドルできる。</li></ul><h2 id="h337926bd96">Babel</h2><h3 id="h8bbd9fd38a">Babelとは？</h3><p>javascriptに特化したコンパイラー<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>Javascriptの新しい記法を古い記法に変換してくれる。</li><li>古い記法に変換することで、IEなどのブラウザにも対応させることができる。</li></ul><h2 id="h6321f8cf3a">Sass</h2><h3 id="h68589009d2">Sassとは？</h3><p>cssを拡張子、記述しやすく、みやすくしたスタイルシート。<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>ネストしてcssを記述できる。</li><li>変数を利用できる。</li><li>メソッドを記述できる。</li></ul><h2 id="hf8b0df4ff0">Typescript</h2><h3 id="h92ee23f700">Typescriptとは？</h3><p>型を定義できるAltJs<br></p><h3 id="h3ab24f6f50">メリット</h3><ul><li>変数に型を定義できるため、コンパイルエラーでエラーを発見しやすい。</li></ul><h2 id="h45bcf234d3">環境構築スタート</h2><p>今回の最終着地点は、webpack + Typescript + Sass + Reactの開発環境です。<br>以下のような流れで構築を行います。</p><ol><li>package.jsonの作成</li><li>webpackのインストール</li><li>webpackの設定</li><li>ローダーの設定</li><li>Htmlファイルの作成</li><li>Scssファイルの作成</li><li>Reactファイルの作成</li><li>動作確認</li></ol><p>※node npmはインストール済みで話を進めます。<br><br>最終的なディレクトリ構成は以下のようになっています。</p><pre><code>project_name/
     |
     |- dist/
     |   | - index.html
     |   | - main.js
     |   L - style.css
     |
     |- node_module/
     |
     |- public
     |    L style
     |        L style.scss
     |
     |- src
     |   | - App.tsx
     |   L - index.tsx
     |
     |- package-lock.json
     |- package.json
     |- tsconfig.json
     L- webpack.config.js
     </code></pre><h3 id="hdbc024acee">1. npm init で package.jsonを作成</h3><p>まず、package.jsonファイル作成のため以下のコマンドを打ちます。<br>以下のコマンドで</p><pre><code>npm init -y</code></pre><p>package.jsonはプロジェクトが依存するパッケージをまとめたものです。<br>以下のような内容で記述されています。<br>package.json</p><pre><code>{
  "name": "frontend_dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
　//開発環境でのみ使用するパッケージが入る。
  "devDependencies": {
  },
  //実行環境で使用するパッケージが入る。
  "dependencies": {
  }
}

</code></pre><p>今後、devDependencies、dependenciesの部分にパッケージを追加していきます。<br></p><h3 id="h8cbf46312a">2. webpackのインストール</h3><p>以下のコマンドでwebpackで必要なパッケージのインストール。<br></p><pre><code>npm i -D webpack webpack-cli</code></pre><h3 id="h5c759c767f">3. webpackの設定</h3><p>パッケージのインストール後、webpackの設定を記述していくファイルを以下のコマンドで作成します。<br></p><pre><code>touch webpack.config.js</code></pre><p>以下、webpack.config.jsファイルの初期設定<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //ビルドのタイプを設定(デフォルトではproduction)
  mode: "development",
  //起点となるファイルの場所
  entry: "./src/index.tsx",
  //バンドルファイルを出力
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
  //import時にファイルの拡張子を省略する設定
  resolve: {
    extensions: [".js",".jsx",".ts", ".tsx", ".json"],
  },
  //リアルタイムで変更を確認しながら開発を行う設定
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    //3000番ポートに吐き出します。
    port: 3000,
  },
  //サーバー対応なのか、ブラウザ対応なのかの指定(今回はブラウザなのでweb)
  target: ["web"],
 //ローダーの設定
　module:{}
};

</code></pre><p><strong>mode</strong><br>ビルドのタイプを指定するプロパティです。<br>developとproductionの2つを指定できます。<br>develop(開発環境)</p><ul><li>ビルド時間が短くなる</li><li>容量が大きくなる</li></ul><p>production(本番環境)<br></p><ul><li>ファイルが圧縮され容量が小さくなる。</li><li>難読化される。</li><li>ビルド時間が長い。</li></ul><p><strong>entry</strong><br>起点となるファイルを指定する。<br>設定したファイルを起点とし、そのファイルから依存関係にあるファイルを芋づる式に特定し、全てのファイルを1つのファイルにバンドルするために、起点ファイルをここで設定する。<br>今回はsrc/index.tsxファイルを起点ファイルにしています。<br><strong>output</strong><br>バンドルファイルを出力する場所を指定する。<br>バンドルされた1つのファイルを出力する場所を指定。<br>今回は、distディレクトリ内に、bundle.jsというファイルで出力しています。<br><strong>resolve</strong><br>ファイルの拡張子を省略できる。<br><strong>devServer</strong><br>ローカルでサーバーを立ち上げる。<br>リアルタイムで変更を確認しながら開発が可能。<br><strong>target</strong><br>サーバーなのか、ブラウザなのかの指定。<br><strong>module</strong><br>ローダーの設定を記述する。</p><h3 id="h9c0b13a2da">4. ローダーの設定</h3><p>ローダーとは、あるファイルを別のファイルに変換するものです。<br>例えば、scssファイルをcssファイルに変換する。Typescriptファイルをjavascriptファイルに変換するなどです。<br>今回設定するのは、</p><ul><li>Scss</li><li>Typescript</li><li>Babel</li></ul><p>です。<br></p><h4 id="h851eb33bfb"><strong>Scssを扱う</strong></h4><p>今回は、Scssを使用するので、必要なローダーたちの設定を記述します。<br>以下のコマンドを打ち、必要なプラグインをインストールします。</p><pre><code>npm i -D style-loader css-loader sass-loader sass</code></pre><ul><li>style-loader</li><li>バンドルされたcssファイルをhtmlで使用するためのloader</li><li>css-loader</li><li>cssファイルをjavascriptファイルにバンドルするためのloader</li><li>scss-loader</li><li>scssファイルをcssファイルにコンパイルするloader</li></ul><p>次に、loaderをwebpackのmoduleプロパティ内で設定します。<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //省略
  //loaderの設定を記述する場所
  module: {
    rules: [
      {
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};</code></pre><p><strong>module</strong><br>loaderを設定するプロパティ<br><br><strong>rules</strong><br>各loaderのルールを設定するプロパティ<br><br><strong>test</strong><br>対象ファイルを設定するプロパティ<br>ファイルの拡張子を指定、今回はscssが対象なのでscssを指定<br><br><strong>use</strong><br>どのloaderをどの順番で使用するかの設定。<br>後ろから順番に処理がされます。<br>つまり今回は、<br>sass-loader → css-loader　→ style-loader<br>の順番ですので、<br>scssをcssに変換 → 変換されたcssをjavascriptファイルにバンドル → バンドルされたcssファイルをHTMLで使用。<br>以上の設定でscssを使用することができます。<br></p><h4 id="hfd9898337e"><strong>Typescriptを扱う</strong></h4><p>Scssの設定ができたので次にTypescriptの設定を扱います。<br>scss同様、以下の必要なプラグインをインストールします。</p><pre><code>npm i -D typescript ts-loader</code></pre><ul><li>ts-loader</li><li>Typescriptをjavascriptに変換(トランスパイル)するプラグイン</li></ul><p>webpack.config.jsは以下のようになります。<br><br>webpack.config.js</p><pre><code>const path = require("path");
module.exports = {
  //省略
  //
  //loaderの設定を記述する場所
  module: {
    //TypeScript や Scssのローダー設定
    rules: [
      {
        //typescriptをjavascriptに変換
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "ts-loader",
            },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
}</code></pre><p>scssの時と同様、testには変換対象のファイルを、useには使用するloaderを設定します。<br>また、Typescriptの設定ファイルである、tsconfig.jsonを作成します。<br>tsconfig.json</p><pre><code>{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "esnext",
    "outDir": "./dist",
    "jsx": "preserve",
    "moduleResolution": "Node",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["./src"],
  "exclude": ["./node_modules"]
}</code></pre><p>ts-loaderのおかげで、厳密な型チェックをtsconfig.jsonをもとに行ってくれます。<br>以下のようなコードを記述すると、ビルド時にエラーを吐いてくれます。</p><pre><code>const value: number = "Test"
// 数値に文字列を入れようとすると以下のエラーがはかれる
// TS2322: Type 'number' is not assignable to type 'string'.</code></pre><h4 id="h74742a8f7d">Babelを扱う</h4><p>TypescriptをjavascriptにトランスパイルできてもES5に対応できていなかったら動作しない環境(Internet Exploreなど)があります。<br>なので、ES5に対応させるためにBabelを使用します。<br>これまで同様必要なプラグインをインストールします。</p><pre><code>npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react</code></pre><p>以下、webpack.config.jsonファイルです。<br><br>webpack.config.js</p><pre><code>const path = require("path");
  //省略
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          //追記
          {
            loader: "babel-loader",
            options: { presets: ["@babel/preset-env", "@babel/react"] },
          },
          {
            loader: "ts-loader",
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
}</code></pre><p>ts-loaderの上にbabel-loaderを追記しました。<br></p><ul><li>@babel/preset-env</li><li>ES6以降のものをES5にトランスパイル</li><li>@babel/react</li><li>JSXをJSにトランスパイル</li></ul><p>ここでは、babelで提供されているプラグインを使用し、reactの対応も行っております。<br><br>順序は、<br>Typescript(tsx)　→ javascript(jsx) → js(ES6) → javascript(ES5)<br>のような変更です。<br>注意<br>Babelには、@babel/typescriptプラグインも存在します。<br>これはビルド時にTypescriptからjavascriptの変換は行ってくれますが、ts-loaderのように型チェックは行ってくれません。<br>(ts-loaderのところで説明したエラーが出ない)<br>以上でローダー周りの設定は完了です。<br></p><h3 id="h5fc5a8be30">5.ベースとなるHtml作成</h3><p>ベースとなるHtmlを作成します。<br><br>./dist/index.html</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Webpack&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p>scriptタグで、webpackで1つにまとめたjsファイルを挿入します。(bundle.jsの中にcssも含まれている。)<br></p><h3 id="h03c74c7e7d">6.Scssファイル作成</h3><p>Scssを記述します。<br>Sassをインストールします。</p><pre><code>npm i -D sass</code></pre><p>今回は、./public/style/style.scssに作成しました。<br><br>./public/style/style.scss</p><pre><code>.l-index {
  color: red;
  background-color: blue;
}

</code></pre><h3 id="hb01aaafc74">7.Reactファイル作成</h3><p>Reactを記述していきます。<br>その前に、Reactで必要なパッケージをインストールします。<br>以下の4つです。</p><pre><code>npm i react react-dom @types/react @types/react-dom</code></pre><p>以下のファイルを作成します。<br><br>index.tsx</p><pre><code>import React from "react";
import ReactDOM from "react-dom";
import { App } from "../src/App";
//ここでscssをインポート
import "../public/style/style.scss";

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById("root")
);</code></pre><p>App.tsx</p><pre><code>import React from "react";

export const App: React.FC = () =&gt; {
  return &lt;h1 className="l-index"&gt;カープ優勝&lt;/h1&gt;;
};</code></pre><h3 id="hcfbe168d1c">8.動かす</h3><p>それでは、実際に画面に「カープ優勝」が表示されるか見てみましょう。<br><br>そのためには、package.jsonの設定を行います。<br>以下のようにscriptsの部分にコマンドを設定しておきます。<br>package.json</p><pre><code>  "scripts": {
    //production環境でビルド
    "build": "webpack --mode production",
    //開発環境でビルド
    "dev": "webpack-dev-server --open",
  },</code></pre><p>それでは以下のコマンドを打ち、動作確認します。<br></p><pre><code>npm run dev</code></pre><p>自動で<a style="color:#4aac00" href="unsafe:null">localhost:3000</a>が開き赤文字で「カープ優勝」が表示されました！<br><br><img src="https://images.microcms-assets.io/assets/4a28548190c8431e99dcc2e69b4a646f/7d95e75e69134c1da1ee31aa06cdb11f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-10%2012.19.29.png" alt=""><br><br>App.tsxの文字を変更したり、style.scssのスタイルを変更したりして変更がリアルタイムで反映されていたら成功です。<br></p><h2 id="h5fcec0cf90">所感</h2><p>今回、weboackをベースにReact + Typescript + Sassの開発環境を作成しました。<br>今回の実戦でよりフロントエンドの裏の動きをなんとなく把握できたなと感じます。<br>具体的には、以下の2つのことを学びました。</p><ol><li>人が使いやすい言語やフレームワーク(React、Typescript...)をブラウザで動かせる言語や仕様(javascript、css、ECMAScript5)に変換する</li><li>人が管理、開発をしやすいように複数のファイルで開発を行う(モジュール化)が、パフォーマンスを考え1つのファイルにまとめブラウザで動作させる</li></ol><p>以上の学んだことは、今後フロントエンドの流行が変化しても、不変な部分であると感じます。<br></p><h2 id="h3de35099b3"><strong>参考</strong></h2><p><a href="https://ics.media/entry/12140/" target="_blank" rel="noopener noreferrer">https://ics.media/entry/12140/</a><br><a href="https://ics.media/entry/17376/" target="_blank" rel="noopener noreferrer">https://ics.media/entry/17376/</a><br><a href="https://zenn.dev/hrkmtsmt/articles/93653309e2a13d" target="_blank" rel="noopener noreferrer">https://zenn.dev/hrkmtsmt/articles/93653309e2a13d</a><br><a href="https://tech.playground.style/javascript/babel-webpack/" target="_blank" rel="noopener noreferrer">https://tech.playground.style/javascript/babel-webpack/</a></p>

create-react-appは使用せずwebpackでReactの環境構築を行う。webpackの学びにもなるのでぜひこの機会に触れてみてください。

エンジニア図書館

webpack

create-react-appは使用しない！webpackでReactの環境構築