Chapter 03

第2章 サクッと環境構築

てべすてん
てべすてん
2022.03.11に更新

手順

  1. プロジェクトフォルダを作る
  2. コマンドでプロジェクト作成
  3. 設定ファイルをいじいじする
  4. 確認

1. プロジェクトフォルダを作る

適当なところにプロジェクトフォルダ(フォルダ名:flowchartbuild)を作ります。迷ったらデスクトップにでも作っておいてください。

2. プロジェクトフォルダを作る

ターミナルを開いて以下のコマンドを実行します。

$ cd プロジェクトのフォルダ
$ npx create-react-app ./ --template typescript

※途中

Ok to proceed? (y) 

のように聞かれるのでyと答えるとプロジェクト作成がスタートします。

※プロジェクトのフォルダは「~~/flowchartbuild」になるはずです。


We suggest that you begin by typing:

  cd プロジェクトフォルダ
  npm start

Happy hacking!

と表示されれば完成です!

コマンドの説明
コマンド 説明
cd フォルダ名 フォルダ名で指定したフォルダへ移動する
npx create-react-app Reactのプロジェクトを作成する
./ プロジェクトを作成する場所を指定する。今回はすでにcdコマンドで移動しているのでカレントディレクトリを指定した。
--template typescript Typescriptテンプレートを使用する。これでTypeScript入りのプロジェクトが出来上がる。ほかにもtailwind css 入りのテンプレートなどがあったりする。

3. 設定ファイルをいじいじする

3-1 srcフォルダのリセット

プロジェクトが作成出来たら、設定ファイルをいじっていきましょう。お好みのテキストエディタでプロジェクトルートのフォルダを開いてください。(自分はVSCodeを使っています)

プロジェクトルート内に以下のようにファイルなどが作成されているはずです。

  • /プロジェクトルート
    • /public
    • /src
      • なんかいろいろ...

開発は基本srcフォルダ内のファイルを操作していきます。

  1. srcフォルダ内のindex.tsx,App.tsx以外を削除しましょう。
  • /プロジェクトルート
    • /public
    • /src
      • App.tsx
      • index.tsx
  1. index.tsxApp.tsxの内容を変更します。
プロジェクトルート/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

プロジェクトルート/src/App.tsx
import React, { FC } from 'react';

interface AppProps{}
const App :FC<AppProps> = ()=>{
  return (
    <div>
    flowchart builder !
  </div>
  ) ;
};

export default App;

3-2 tsconfig.json

つづいてTypeScript用の設定を変更します。

tsconfig.jsonに設定を追加します。

プロジェクトルート/src/tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
  },
  "include": [
    "src"
  ]
}

具体的には"baseUrl":"src"を追加しました。

"baseUrl":"src"

これを追加することで絶対パスでimportができるようになります

4. 確認

正しく環境構築できたか確認するために開発用サーバを起動しましょう。以下のコマンドを実行します。

$ npm start

ブラウザで http://localhost:3000 にアクセスして"flowchart builder !"とページが表示されたら無事設定が完了しているでしょう。

以上で環境構築終了です!お疲れさまでした。

質問・指摘などはこちらから

https://zenn.dev/tbsten/scraps/7123b1257c2097