Getting Started with Create React App について
Create React App で作成された React プロジェクトです。README には開発、テスト、ビルド用スクリプトが記載されていますが、タグにある管理パネルや MCP 機能の説明はありません。
主な機能
- 01ローカル開発サーバー
- 02インタラクティブなテストランナー
- 03本番用ビルド
- 04任意の設定エジェクト
活用シーン
- 01React プロジェクトのローカル実行
- 02監視モードでのテスト実行
- 03デプロイ用アプリのビルド
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。
ツール
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
Create React App を使った開発の開始
このプロジェクトは Create React App で作成されています。
使用可能なスクリプト
プロジェクトディレクトリで、次のコマンドを実行できます。
npm start
アプリを開発モードで起動します。
ブラウザーで http://localhost:3000 を開くと、アプリを表示できます。
変更を加えると、ページが再読み込みされます。
コンソールに lint エラーが表示されることもあります。
npm test
テストランナーをインタラクティブなウォッチモードで起動します。
詳しくは、テストの実行のセクションをご覧ください。
npm run build
アプリを本番環境用にビルドし、build フォルダーに出力します。
本番モードの React バンドルを適切に作成し、最高のパフォーマンスが得られるよう最適化します。
ビルドは圧縮され、ファイル名にはハッシュが含まれます。
これで、アプリをデプロイする準備ができました!
詳しくは、デプロイのセクションをご覧ください。
npm run eject
注意:これは一方向の操作です。一度 eject すると、元に戻すことはできません!
ビルドツールや設定の選択に満足できない場合は、いつでも eject を実行できます。このコマンドを実行すると、プロジェクトから単一のビルド依存関係が削除されます。
代わりに、すべての設定ファイルと推移的依存関係(webpack、Babel、ESLint など)がプロジェクトにコピーされ、それらを完全に制御できるようになります。eject 以外のコマンドは引き続き動作しますが、コピーされたスクリプトを参照するようになるため、必要に応じて調整できます。この時点からは、自分で管理する必要があります。
eject を使う必要はありません。厳選された機能セットは、小規模から中規模のデプロイに適しているため、この機能を使う義務を感じる必要はありません。ただし、必要になったときにカスタマイズできなければ、このツールは役に立たないことも理解しています。
さらに詳しく
詳しくは、Create React App のドキュメントをご覧ください。
React を学ぶには、React のドキュメントをご覧ください。
コード分割
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/code-splitting
バンドルサイズの分析
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
プログレッシブウェブアプリの作成
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
高度な設定
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/advanced-configuration
デプロイ
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/deployment
npm run build で圧縮に失敗する
このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。