React × TypeScriptでWebアプリ作成(開発環境作り～ローカル環境で実行)

  はじめまして、今年新卒入社しました土屋です。

今回はサイオステクノロジーに入社後、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を使うことでパッケージの管理・実行ツールも一緒にインストールされます。

【手順】

  1. Volta公式サイトからインストーラをダウンロード
    (Get Started >download and run the Windows installer )

  2. (推奨)Volta公式サイトに従ってWindows設定の開発者モードを有効化
    (Windows設定 > 開発者向け > 開発者モードをオン)

  3. インストーラを使ってインストール

  4. Voltaインストールの確認

コマンドラインで”volta”と入力することで確認できます。


  1. VoltaでNode.jsをインストール

特にバージョンを指定しない場合は最新のLTS(長期サポート版)をインストールします。今回はとりあえず指定せずにインストール

C:\Users\user01 > volta install node

※バージョンを指定したい場合は以下のようにしてインストール

C:\Users\user01 > volta install node@16.17.0

インストールが完了するとsuccessと表示されます。


  1. Node.jsのバージョンの確認

インストールされたNode.jsのバージョンはコマンドラインで確認できます

C:\Users\user01> node -v

v16.17.0


これで開発前の準備は完了です。

React×TypeScriptのプロジェクト作成

VoltaでNode.jsのインストールを行うと、npmやnpxといったパッケージの管理・実行が可能になるツールもインストールされます。これを使ってReactのプロジェクトを作成します。


基本的には以下のコマンドを打つだけです。

{アプリ名}には作成するアプリの名前を入れてください。

C:\Users\user01> npx create-react-app {アプリ名} --template=typescript

アプリの名前をChatBotにするのであれば、

C:\Users\user01> npx create-react-app ChatBot --template=typescript

JavaScriptでプロジェクトを作成するのであれば、

C:\Users\user01> npx create-react-app ChatBot

※npxではなくyarnでも可能ですが今回はnpxを使っています。

昔は速度やセキュリティなどの違いがあったようですが、現在は大きな差はないという認識です。気になる方は調べてみてください。

プロジェクトの実行

作成したプロジェクトをローカルで実行する場合は、先ほど作成したプロジェクトに移動し、 npm start コマンドを打ってください。

C:\Users\user01> cd ChatBot

C:\Users\user01\ChatBot> npm start

Compiled successfully!


You can now view ChatBot in the browser.


  Local:            http://localhost:3000

  On Your Network:  http://123.456.7.89:3000


Note that the development build is not optimized.

To create a production build, use npm run build.


webpack compiled successfully

Files successfully emitted, waiting for typecheck results...

Issues checking in progress...

No issues found.


自動でLocal: に表示されたアドレスでブラウザが開きます。自動で開かない場合は各自のブラウザで開いてください。

基本的にはnpm startをした状態でも変更は反映されるので、止めずにコードの変更をしても問題ありません。


これでReactのマークが表示されるページが表示できる様になったと思います。この段階では src/App.tsx が表示されるページの内容を返すメインのコンポーネントとなっています。

このため、App.tsxを書き換えると表示されるページも変わります。

以上でプロジェクトの作成とローカルでの実行ができる様になりました。

(おまけ)パッケージのインストール

上記の手順でReactプロジェクトを作成するとデフォルトでReact×TypeScriptで使うパッケージが既にいくつかインストールされています。インストールされているパッケージに関してはpackage.jsonに記されています。

このプロジェクトに追加でパッケージをインストールするには以下のコマンドを用います。{パッケージ名}にはインストールしたいパッケージ名が入ります。

C:\Users\user01\ChatBot> npm install {パッケージ名}

例えばReactにおいてスタイルを付けるのに便利なパッケージstyled-componentsをインストールしたい場合はこのようになります。

C:\Users\user01\ChatBot> npm install styled-components

installはiと省略することも可能です。

C:\Users\user01\ChatBot> npm i styled-components


上記のコマンドを実行すると、インストールしたパッケージはnode_modulesフォルダの中に入りpackage.jsonにパッケージ情報が自動で追記される様になっています。これで基本的にインストールしたパッケージはimportを書くだけで使えるようになります。

App.tsx

import styled from "styled-components"

function App() {

    return (

       <div>

     <h1>ページタイトル</h1>

     <p>サンプルのページ</p>

       </div>

    );

}

export default App;

const AdminHeader = styled.h1`

   background-color: gray;

`;


まとめ

以上でReact×TypeScriptでWebアプリを作成する事ができると思います。

入社した時は、ReactはおろかJavaScriptさえも使ったことがない状態でしたが、実際にReactの書き方やコンポーネントの作り方、便利なパッケージ等など調べていくうちにReactでのWebアプリ開発方法がわかってきました。

まだまだ拙い部分も多々あるかと思いますが今後も学んだことやGluegentに関する事など発信していきたいと思います。本記事を読んでくださりありがとうございました。


(土屋)