Zenn
🤔

Reactを学んでいて疑問に思うこと

2024/01/09に公開
Node.js
React
初心者
npm
Web
tech

まず初めに

私がReactの学習を始めたばかりの頃によく思っていた疑問を皆さんも抱いているのではないかと思いまとめてみました。また、初学者ではなくても、動くから、コードが書けているから知らなくても別にいいと曖昧な理解をしている箇所があると思います。そんな方にもぜひ読んでいただきたい記事です。

最近Webフロントエンドの入門記事も書いたので、Reactの勉強を始めたばかりだよという方にはぜひこちらも読んでいただきたいです。

https://zenn.dev/y_ta/articles/e58576b3288500

あと、いいね、コメントいただけると記事作成の励みになります😇

この記事の対象者

・Reactの学習者

疑問に思うこと3選

①npxって、npmと何が違うの？

おそらくReactの環境構築をする際にこのコマンドを使ったことあるのではないでしょうか？

$ npx create-react-app <project name>

npxとは何かを説明する前に、まずはnpmについても理解しておきましょう。

npm

npmとは、Node.jsのパッケージマネージャーであり、モジュールのインストール、アップデート、管理などを行なっています。

簡単にいうと、いろんな人が作ったJSのライブラリやフレームワークをまとめて管理して、効率的に提供できるようにしたサービスです。

提供されているパッケージをインストールする際は下記のコマンドでできます。

$ npm install <package name>

npx

npxとは、プロジェクトで一時的に使うパッケージをインストールする際に使います。

例えば、先ほど挙げたcreate-react-appは、Reactの環境を構築するために初めに一度だけ使用されるものです。そのため、わざわざ永続的にローカルにインストールする必要がありません。

そういうものはnpxコマンドでインストールします。実行後はこれらのパッケージは自動的に削除されます。

先ほどのコマンドで説明すると、create-react-appが一時的にインストールされ、reactの環境を作るために実行され、実行後は自動的に削除されるということです。

$ npx create-react-app <project name>

では、npmでcreate-react-appをインストールして、実行させることはできるのでしょうか？
これは、もちろんできます。

下記のコマンドでグローバルにインストールを行い、実行することができます。

$ npm install -g create-react-app

$ create-react-app <package name>

https://www.npmjs.com/package/create-react-app

yarnやpnpmを理解したい方

https://zenn.dev/hibikine/articles/27621a7f95e761

②StrictModeってなんだよ

皆さんはmain.tsxの中にあるStrictModeコンポーネントの役割をご存じですか？

main.tsx
import React from 'react'
import App from './App.tsx'
import './index.css'


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

StrictModeコンポーネントは開発中に発生する問題を見つけやすくしてくれています。
下記のようなコードを書いて実行すると、コンソールに2回同じものが出力されていて、なんでだろうと思った経験あると思います。

App.tsx
import { useEffect } from 'react'
import './App.css'

const App = () => {

  useEffect(()=>{
    console.log('hello')
  },[])

  return (
    <div>App</div>
  )
}

export default App

本来ならuseEffectの中身が1回のみ呼び出され、コンソールにhelloと1回出力されるはずですが、StrictModeが副作用の処理が正しく行えわれているかをチェックするために2回呼び出しています。

他にも、古いAPIや非推奨とされるAPIにたいして警告を出したり、コンポーネントのレンダリング前に状態が予期せず変更されていないかをチェックしています。

StrictModeは開発時にのみ影響を与えるもので、本番環境ではなんの影響も及ぼしません。

あまりおすすめはしませんが、開発時に上記の例のようにコンソールが二度出力されるといったことが鬱陶しいと思う方はStrictModeコンポーネントのラップを外しても問題ありません。

main.tsx
import React from 'react'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />,
)

③画像ってassetsとpublicのどっちのフォルダ使えばいいの？

結論からいうとどちらでもいいというのが正解です。しかしそれぞれにはちょっとした違いがあるのでご紹介してきます。

public

publicに置いた画像は、アプリのルートURLから直接参照することができ、ビルドプロセスを経ずにそのままサーバーに配置されるため、複数の画像や容量の大きい画像を扱う場合はデプロイがわずかに早くなる可能性があります。

ルートから直接参照されるため、画像のパスを指定する際は以下のように行います。

App.tsx
import './App.css'

const App = () => {
return (
    <div>
      <img src="/vite.svg" alt="" />
    </div>
  )
}

export default App

assets

assetsに置いた画像は、サイズが最適化され、パフォーマンスが向上します。また、キャッシュ管理を容易に行い、古い画像がユーザーに表示されるリスクを減らします。

画像を参照する際は、一度変数に画像をインポートする必要があります。直接パスを指定するとうまく画像が表示されないので注意してください。

App.tsx
import reactLogo from './assets/react.svg'
import './App.css'

const App = () => {
return (
    <div>
      <img src={reactLogo} alt=""/>
    </div>
  )
}

export default App

結論として、プロジェクトの規模に依存するような形となっています。私はあまり大規模な開発に携わった経験がないのでこれらのディレクトリの差異を実感したことはありません。小規模な開発であれば好きな方を使えばいいのではないでしょうか？

まとめ

ここまで読んでいただきありがとうございました。今回はReact初学者が思う疑問をメインにまとめました。これからもWeb制作に関する情報や疑問をわかりやすくまとめて記事にしていきますので、また読んでいただけたら嬉しいです。

Discussion