create-react-appシリーズ
このブログポストはシリーズで作成しております。次はcreate-react-appのシリーズのリストです。
- Reactとは
- create-react-app
- create-react-appでTypeScriptを使う方法
- [TypeScript] create-react-appで絶対パスのimport
- create-react-appでstyled-componentsの使い方
- Jest
- create-react-appでreact-testing-libraryを使ってテストする
概要
以前のブログではcreate-react-appを使ってReactプロジェクトにタイプスクリプトを適用する方法について説明しました。今回のブログポストではタイプスクリプトが適用されたReactプロジェクトでコンポーネントを追加する時、相対パスではなく絶対パスを使ってコンポーネントを追加する方法について説明します。
ここで紹介するソースコードは下記のリンクで確認できます。
相対パスと絶対パス
Reactを使ってプロジェクトを開発すると、私たちはコンポーネントを中心にアプリを開発します。Reactでプロジェクトを開発する時、まず必要なコンポーネントを開発してそのコンポーネントを組み込んでページを作成します。。
このようにReactコンポーネントを組み込んでページを作成する時、普通は早退パス(import Button from '../../Button')を使ってコンポーネントを追加します。
コンポーネントがたくさんではない場合、特に問題ないですが、プロジェクトが大きくなってコンポーネントがたくさんになると、プロジェクトのフォルダ構造がどんどん複雑になって、この相対パスでの追加方式はどのパスを指定するかどのコンポーネントを追加してるのか把握することが難しくなります。
このような問題を解決するため、今回のブログポストでは絶対パス(import Button from 'Button')でコンポーネントを追加する方法について説明します。
プロジェクト生成
次のコマンドを使ってタイプスクリプトが適用されたReactプロジェクトを生成します。
npx create-react-app root-import --template=typescript
そして次のコマンドを使ってReactプロジェクトを実行します。
# cd root-import
npm start
問題なくReactプロジェクトが実行されたら下記のような画面がブラウザで確認できます。
絶対パウの設定
タイプスクリプトが適用されたReactプロジェクトへ絶対ぱあすを設定する方法は簡単です。タイプスクリプトの設定だけ修正すれば、すぐにコンポーネントを絶対パスで追加することができます。
絶対パスでコンポーネントを追加できるようにするためtsconfig.jsonファイルを下記のように修正します。
{
"compilerOptions": {
...
"jsx": "react-jsx",
"baseUrl": "src"
},
...
}
これで終わりです。本当に簡単ですね。
使い方
そしたら実際、絶対パスでコンポーネントを追加してみましょう。まず、./src/Componentsフォルダを作ってApp.js, App.css, App.test.tsx, logo.svgファイルを./src/Componentsへ移動させます。
そして./src/index.jsファイルを開いて下記のように修正します。
...
import App from 'Components/App';
...
そして次のコマンドを使ってReactプロジェクトを実行します。
npm start
問題なく設定したら、下記のような画面をブラウザで確認することができます。
現在はReactプロジェクトが簡単なので、絶対パスをコンポーネントへ追加することがメリットないように見えますが、Reactプロジェクトを進めると、この絶対パスでコンポーネント追加することが必ず役に立てます。
完了
これでcreate-react-appでタイプスクリプトが適用されたReactプロジェクトへ絶対パスでコンポーネントを追加する方法についてみてみました。プロジェクトの始まりではメリットを感じないですが、プロジェクトがどんどん大きくなると本当に便利だと感じると思います。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
