現在自分がSEとして働いている職場では、Reactを使ったWebアプリを作成しています。
言語はJavaScriptを使っています。
ですが、最近TypeScriptに興味を持ち、触ってみたいと思ったため環境構築を実施しました。
そこで今回はTypeScriptを使ったアプリ開発をするための準備を紹介します。
React + TypeScript アプリを作るための環境構築の方法
まず前提としてNode.jsがインストールされているものとします。
Node.jsがインストールされていない場合は下記の記事を参考にインストールを行ってください。
Gitリポジトリーをクローンする
今回は勉強用のReactアプリをGit管理する予定なので、Gitリポジトリーのクローンから始めます。
Git管理する予定がない場合は次のステップへ進んでください。
Git管理をしたいがGitを利用するための環境構築ができていない場合は以下の記事を参考に準備をしてください。
自分はTerminalでGit操作をする派なので、まずTerminalを起動します。
Ctrl + Spaceから検索でTerminalが起動できます。
まずClone用のURLを取得するために、GitLab(GitHub)にログインします。
※GitLab前提で話は進めます。
今回はTypeScript用のプロジェクトを作成したのでそれを使っていきます。
プロジェクトを選択したら、[Clone] -> [Copy URL]を選択します。
自分はSSH設定をしているため、SSH用のURLをコピーします。
SSH認証鍵の設定をしておらず、設定したい場合はこちら
コピーしたらTerminalに移動します。
まず自分がリポジトリをクローンしたいディレクトリに移動します。
ディレクトリに移動したら以下のコマンドを実行します。
git clone 先程コピーしたURL
これでリポジトリのクローンが完了しました。
Reactアプリの作成
作成方法は非常にシンプルです。以下のコマンドを実行するだけです。
npx create-react-app {任意の名前} –typescriptログは長いため中略
インストールが終わったら、以下のコマンドを実行して画面が立ち上がるか確認します。
cd {先程設定した任意の名前}
npm start実行するとブラウザでアプリが起動すると思います。
はじめての場合はブラウザへのアクセス許可の確認されるかもしれません。その場合は許可してください。
許可すると許可したブラウザでReactアプリが立ち上がると思います。
この画面が表示されたら一旦アプリのインストールは成功です。
ちなみにTerminalは下図のように表示されていると思います。
Gitで管理したい場合はこの後にコミットします。
作成したReactアプリをGitにコミットする方法
クローンしたリポジトリの中でcreate-react-appを実行した場合はそのままステージとコミットができます。
まず新規ファイルをステージします。以下のコマンドを実行してください。
git add -A本来は変更差分を確認すべきなのですが、今回はあくまで自宅でも個人用なので、細かい確認はせずに一度にステージしました。
とは言っても念の為ステージされたファイルの確認をします。
git status
全部今回作成されたファイルなので問題はなさそうです。
次にコミットをします。以下のコマンドを実行してください。
git commit -m ‘任意のコメント’
コミットができたらリモートリポジトリにプッシュします。
以下のコマンドを実行してください。
git push origin master
無事にリモートリポジトリにプッシュできました。
念の為コミットログを確認してみると以下のようになっていると思います。
本来はプッシュ前に確認すべきなのですが、スクショ撮り忘れました、、、
問題なくリモートリポジトリにプッシュされています。
これでReactアプリの作成とGit管理ができました。
いかがでしたでしょうか？
無事にアプリは起動しましたか？
みなさまの勉強のためになりますと幸いです。
コメント