viteの記録

https://ja.vite.dev/guide/
ヴィート　フランス語で「素早い」
次世代フロントエンドツール
フロントエンドの開発を行う上で必要な周辺環境を良い感じにまとめてくれる
開発サーバーの起動が早いのが特徴

npm run buildとは？
npm run build は、Node.jsプロジェクトでよく見かけるコマンドで、プロジェクトのビルドを行うためのものです。

ビルドとは？
ビルドとは、開発中のコードを、実際にWebブラウザなどで動作させることができる形にまとめ上げる処理のことです。具体的には、

コンパイル: 新しいJavaScriptの機能などを、古いブラウザでも動作するように変換します。
バンドル: 複数のファイルを1つにまとめたり、ファイルのサイズを小さくするなど、配信効率を高めます。
最適化: コードの無駄を省き、実行速度を向上させます。
といった処理が行われます。

npm run buildが実行されると？
package.jsonの確認: npm run buildを実行すると、まずpackage.jsonファイル内のscriptsセクションにあるbuildスクリプトを探します。
スクリプトの実行: 見つかったbuildスクリプトに記述されたコマンドが実行されます。
ビルド処理: スクリプトで指定されたビルドツール（Webpack、Parcelなど）が起動し、ビルド処理が行われます。
なぜnpm run buildが必要なの？
開発環境と本番環境の分離: 開発中は便利な機能をたくさん使えるように開発環境を設定しますが、本番環境ではファイルサイズを小さくしたり、セキュリティを強化したりする必要があります。ビルドすることで、開発環境と本番環境を切り替えることができます。
パフォーマンスの向上: ビルドによってコードが最適化されるため、Webサイトの表示速度が向上します。
エラーの早期発見: ビルド時にエラーが発生した場合、開発中に問題を発見することができます。

プロジェクトの作成方法

デスクトップにフォルダをつくる

ターミナル
npm create vite@latest
https://ja.vite.dev/guide/

srcフォルダ→編集するファイルが入っている
↓npm run build
distフォルダ→実際のサーバーへ上げるもの

サーバーへ上げるのはdistフォルダ

npm i gsap
gsapをインストール

npm i
npm install の省略形

何をするのか？
npm i コマンドを実行すると、package.json ファイルに記述された依存関係にあるパッケージをプロジェクトにインストールします。

package.json とは？
プロジェクトで利用するパッケージとそのバージョンを記述したファイルです。
このファイルに記載されている情報をもとに、npmは必要なパッケージを自動で探し、インストールしてくれます。
なぜnpm iを使うのか？
プロジェクトの再現性: 他の開発者が同じプロジェクトで作業する場合、npm i を実行することで、同じ環境を簡単に構築できます。
パッケージの更新: 新しいバージョンのパッケージがリリースされた場合、npm i を実行することで、プロジェクトで使用しているパッケージを最新の状態に保つことができます。
開発効率の向上: 手動でライブラリをダウンロードしてくる必要がなく、npm i 一つで必要なパッケージを全てインストールできるため、開発効率が向上します。

npm (Node Package Manager) :Node.jsのパッケージ管理ツール

npmは、プログラミングで使う部品をたくさん集めたお店みたいなもの。
・計算をするための部品
・画面をきれいに見せるための部品
・データを保存するための部品
・アニメーションを作るための部品
などの部品が入っていて、選んで使うことができる

npmを使った時のいいこと
時間短縮: 自分で一から作るよりも、npmで部品を借りてくる方が、とっても時間が短縮できる
便利な機能がたくさん: 世界中のプログラマーが作ったすごい部品を使えるから、自分のプログラムにすごい機能を簡単に追加できる
みんなが使っているから安心: たくさんの人が使っている部品なので、バグが少なくて安心して使える

package.json
プログラムを作るために必要な材料（プログラムの部品）や、プログラムの名前、プログラムの場所（住所）などを書き出すためのメモ帳のようなもの。

package.json に書かれていることをお店に例えると…
お店の名前: プログラムの名前
材料リスト: プログラムを作るために必要な部品（ライブラリなど）の名前とバージョン
お店の住所: プログラムの場所（フォルダの場所）
お店の営業時間: プログラムを動かすための設定

なぜpackage.jsonが必要か？
材料を忘れない: 必要な材料をリストアップしておくことで、あとから「あれ、この材料どこだっけ？」とならないようにできます。
同じお店を再現できる: 誰かにレシピ（プログラムのコード）を渡すとき、package.jsonがあれば、同じ材料（ライブラリ）を使って同じお菓子（プログラム）を作ることができます。
みんなで協力できる: チームでプログラミングをする場合、package.jsonを共有することで、みんなが同じ材料を使って作業できます。