１課の技術書　React×Vite環境構築編

初めまして。mituです。
出身は愛知県で大学卒業後就職を機に関東に引っ越しをしました。
前々職がIT系で開発のプログラマーとして働いていて、一度建築系の会社に転職をしました。
⼀度IT業界を離れましたが、またIT業界でエンジニアとして仕事がしたいと思い現在働いています。
そんなmituが2024年10月のブログを担当させていただきます。

開発に携わっていたこともあり、最近プライベートでアプリを作るためにプログラミングの勉強をしております。
まず今回はReactとViteを使用してアプリを開発していく環境を作りたいと思います!

まず前提としてReact、Viteでどのようなものか・何が出来るのかについて軽く説明していきます。

※1 javascriptとはWEBブラウザ上で実行するもので、WEBサイトやWEBシステム等を開発できるプログラミング言語のこと
静的な画面ではなく、動きをつけて表示や動作をさせることができます。
またほかのプログラミング言語と違い、ブラウザ上で動作するため環境構築をする必要がなく簡単に始めることができます。





では実際にViteのプロジェクトの中でReactが使えるように環境構築をしていきます!

ちなみにここでReactを使えるように設定をしていくので別でReactをインストールする必要はありません。

Viteを使えるようにするためには、Node.jsというJavaScriptの実行環境であるソフトウェアをインストールしておく必要があります。
インストールはNode.jsの公式WEBページからインストールすることができます。


1.ディレクトリ作成とフォルダ移動をします。
ディレクトリ作成とフォルダ移動の前に、まずコマンドプロンプトを起動します。
mkdirコマンドでディレクトリを作成します。（今回はprojectディレクトリ）
今回は作成したディレクトリであるprojectフォルダにcdコマンドを使用して
移動します。

2．Viteで新規プロジェクトを作成します。
latestをつけることで最新版を利用することができます。
今回は上記で作成したprojectフォルダの中にViteプロジェクトを作っています。

3． プロジェクト名を入力します。（任意のもの）

4 ．フレームワーク(※2)を選択する画面ではReactを使いたいので「React」を選択します。
※2 フレームワークとはアプリケーション・システム開発をする際に
よく使いそうな機能があらかじめ用意されている雛形・枠組みのこと
現実で例えるとハンマーやドリルが入っている工具箱のようなものがイメージしやすいかと思います。

雛形・枠組みに沿って書いていくことでソースコードを一から書く必要がないです。
その為決められた書き方やルールに沿って開発を進めていけるので、プログラミングがしやすくなり、開発の効率が良くなります。

Reactの他に、以下のようなフレームワークがあります。

5． javascriptかTypescriptのどちらを使用するのかを選択します。
今回はTypescriptは使用せず、javascriptを使用するので「JavaScript」を選択します。

6． 下記画像のように表示されていればプロジェクトの作成は完了です。
後は作成したプロジェクトに移動して、パッケージ(※3)をインストールしていきます。

※3 パッケージとはプログラムや処理をまとめたもののこと
npmでは世界中から公開されているパッケージをコマンド一つでインストールして使うことができる。



7． 作成したプロジェクトディレクトリ（recoCan）に移動します。

8． 必要なパッケージをインストールします。
下記画像のコマンドを実行すると「node_modules」というフォルダができます。

lsコマンドで「node_modules」フォルダができているか確認してみてください!
※lsコマンドについては下記ブログをご参照ください。
1課の勉強会　AlmaLinux編②



9． ローカルで開発用サーバーを起動し、アプリケーションを表示させます。

10． 8番のコマンドを実行した後に表示されるURLにアクセスして、
「React」と「Vite」のロゴが表示されたページが表示されたら成功です。

以上で環境構築は終了です!

今回はViteを使ってReactの環境構築を行いました!
複雑な設定なしで簡単にアプリを作る環境を整えることができ便利であると感じました。


最後までありがとうございました!
次回から今回環境構築をしたプロジェクトでアプリを作成していきます!