はじめまして、今年新卒入社しました土屋です。
今回はサイオステクノロジーに入社後、Gluegentサービスラインの研修の一環としてReactとTypeScriptを使用してWebアプリを開発する機会があったので、開発の方法など簡単にまとめてみました!
アプリ開発の経緯
Gluegentサービスラインでは新人研修としてGitの使い方や、クラウドサービスの使い方など、Gluegentの製品で使われている技術に関して多くの事を教わりました。その研修の集大成として学んだ技術と新しい技術を使い、新卒メンバーだけで『React×TypeScriptでチャットボットの開発』にチャレンジしました!
この経験を踏まえてReact×TypeScriptのアプリの作り方を簡単にまとめました。
※今回のブログではReact×TypeScriptのアプリを作成するまでの手順の説明のみを行っています。実際に作ったチャットボットアプリの中身の処理などは紹介していません。
環境
Windows 10
Node.js v16.17.0
開発環境作り
まず始めにNode.jsのインストールを行います。
Node.jsはJavaScriptやTypeScriptをサーバ上で動作させるプラットフォームです。
直接インストーラからインストールしても良いのですが、今回はNode.jsのバージョン管理ツールであるVoltaを使ってインストールを行いました。Voltaを使うことでパッケージの管理・実行ツールも一緒にインストールされます。
【手順】
Volta公式サイトからインストーラをダウンロード
(Get Started >download and run the Windows installer )(推奨)Volta公式サイトに従ってWindows設定の開発者モードを有効化
(Windows設定 > 開発者向け > 開発者モードをオン)インストーラを使ってインストール
Voltaインストールの確認
コマンドラインで”volta”と入力することで確認できます。
VoltaでNode.jsをインストール
特にバージョンを指定しない場合は最新のLTS(長期サポート版)をインストールします。今回はとりあえず指定せずにインストール
※バージョンを指定したい場合は以下のようにしてインストール
インストールが完了するとsuccessと表示されます。
Node.jsのバージョンの確認
インストールされたNode.jsのバージョンはコマンドラインで確認できます
これで開発前の準備は完了です。
React×TypeScriptのプロジェクト作成
VoltaでNode.jsのインストールを行うと、npmやnpxといったパッケージの管理・実行が可能になるツールもインストールされます。これを使ってReactのプロジェクトを作成します。
基本的には以下のコマンドを打つだけです。
{アプリ名}には作成するアプリの名前を入れてください。
アプリの名前をChatBotにするのであれば、
JavaScriptでプロジェクトを作成するのであれば、
※npxではなくyarnでも可能ですが今回はnpxを使っています。
昔は速度やセキュリティなどの違いがあったようですが、現在は大きな差はないという認識です。気になる方は調べてみてください。
プロジェクトの実行
作成したプロジェクトをローカルで実行する場合は、先ほど作成したプロジェクトに移動し、 npm start コマンドを打ってください。
自動でLocal: に表示されたアドレスでブラウザが開きます。自動で開かない場合は各自のブラウザで開いてください。
基本的にはnpm startをした状態でも変更は反映されるので、止めずにコードの変更をしても問題ありません。
これでReactのマークが表示されるページが表示できる様になったと思います。この段階では src/App.tsx が表示されるページの内容を返すメインのコンポーネントとなっています。
このため、App.tsxを書き換えると表示されるページも変わります。
以上でプロジェクトの作成とローカルでの実行ができる様になりました。
(おまけ)パッケージのインストール
上記の手順でReactプロジェクトを作成するとデフォルトでReact×TypeScriptで使うパッケージが既にいくつかインストールされています。インストールされているパッケージに関してはpackage.jsonに記されています。
このプロジェクトに追加でパッケージをインストールするには以下のコマンドを用います。{パッケージ名}にはインストールしたいパッケージ名が入ります。
例えばReactにおいてスタイルを付けるのに便利なパッケージstyled-componentsをインストールしたい場合はこのようになります。
installはiと省略することも可能です。
上記のコマンドを実行すると、インストールしたパッケージはnode_modulesフォルダの中に入りpackage.jsonにパッケージ情報が自動で追記される様になっています。これで基本的にインストールしたパッケージはimportを書くだけで使えるようになります。
App.tsx
まとめ
以上でReact×TypeScriptでWebアプリを作成する事ができると思います。
入社した時は、ReactはおろかJavaScriptさえも使ったことがない状態でしたが、実際にReactの書き方やコンポーネントの作り方、便利なパッケージ等など調べていくうちにReactでのWebアプリ開発方法がわかってきました。
まだまだ拙い部分も多々あるかと思いますが今後も学んだことやGluegentに関する事など発信していきたいと思います。本記事を読んでくださりありがとうございました。
(土屋)