学生時代は、ReactやPython、Flutterでの開発をしていましたが、新しく入った会社では仕事の関係でビジュアルプログラミング言語を使うことが多くなりました。そこで、リハビリがてらにQRコードを読み取る形の出退勤アプリを作成することにしました。
その際、PostgreSQL（データベース）、FastAPI（バックエンド）、TypeScript（フロントエンド）を組み合わせた初心者向けの記事が意外と少ないと感じたので、自分で書いてみることにしました。
初心者の方を対象として、環境構築から完成まで、連載形式で解説していきます。シンプルな出退勤管理アプリを作成することで、バックエンドからフロントエンドまでの全体像を簡単に理解することができるようにするつもりです。また、これを通して簡単なwebアプリの作成方法を学ぶことができると思います。この活動を通してアプリの作成などに興味を持っていただくなど、興味を持った方の入り口になればいいなと思っています。
それでは第一回として、環境構築から始めていきます。
1.機能の概要
基本的な機能としては
- メンバーの登録と管理
- 出退勤の時刻の記録
- QRコードの読み取り
これらの機能を基として、余裕があれば勤務時間の計算と表示などの機能を付け足していこうと思います。
2.使用技術の紹介
React(※TypeScript)
React(※TypeScript)は、は、ユーザインターフェース（UI）を表示するための JavaScript ライブラリです。なのでフロントエンド開発に使用します。
※「TypeScriptは、JavaScriptに静的型付けを追加した言語で、コードの安全性を高め、開発時のエラーを減らす効果があります。最近はTypeScriptが主流になりつつあるため、こちらを採用しています。
FastAPI
pythonでAPIサーバーを構築するためのWebフレームワークです。こちらはいわゆるバックエンドです。
PostgreSQL
PostgreSQLは、オープンソースのリレーショナルデータベース管理システム（RDBMS）です。高度な機能と優れた性能を持ち、大規模なアプリケーションにも適しています。
3.開発環境のセットアップ
前提として今回のOSはWindows11です。
Visual Studio Code(VSCode)
まず、Visual Studio Code（以下VSCode）をインストールします。VSCodeはMicrosoft社が開発した無料のコードエディタで、以下の特徴があります：
- 豊富な拡張機能
- 軽量かつ高速
- 高機能
インストール手順
-
VS Codeの公式サイトにアクセスし、Windowsのインストーラーをダウンロードします。
- ダウンロードしたらこのようにダウンロードフォルダーにインストーラーがあります。
インストーラーを実行し、画面の指示に従ってインストールを完了します。
3. インストールが完了したら、VS Codeを起動して確認しましょう。
詳細な設定方法については、以下のリソースが参考になります：
-
主にVSCodeではじめるPython開発環境構築ガイド
pythonとともにVScodeの環境構築の方法が詳しく書かれています。Python開発で必須の拡張機能一覧などがありそこは良いと思います。 - Visual Studio Codeのインストール・設定手順
- 紹介している3つの中では、起動しやすくするための設定方法など、VScodeの環境構築の方法について一番詳しく説明されているのではないかと思います
-
【初心者必見】VScodeインストール方法や日本語化の流れをバッチリ解説！
こちらはVScodeの環境構築の方法ほかに、インタフェースを日本語化する方法についてかなり詳し目に書かれています。
拡張機能については、「VScode 拡張機能 初心者」や「VScode 拡張機能 [言語名]」などで検索すると、役立つ情報が見つかります。
おすすめの拡張機能について書かれたサイトはVisual Studio Codeに入れるべき拡張機能【2023年最新版】です。個人的にこれで一通りの拡張機能はそろうかなと思います。
React(TypeScript)
Node.js
Node.jsとは、JavaScriptのランタイム環境(プログラムが実行される際に必要な環境)です。
Node.jsのインストール手順
公式サイトから
最新のLTS版をダウンロードし、インストールします。ダウンロードした後は基本的にダウンロードフォルダーにあるインストーラーを実行し、デフォルトの設定でインストールを進めれば問題ないと思います。
インストール後、コマンドプロントに以下のコマンドを打ち込みNode.jsとnpmのバージョンを確認します。
※使っている環境によってバージョンは異なる場合があります。多分v20.16.0とかになっていると思います。なのでここはこんな感じの数字が出てくればOKです
$ node --version
v18.17.0
$ npm --version
9.6.7
わからない場合は
- Node.jsのインストールについて
-
Node.js のインストール方法
これらのサイトに詳しく書いてくださっているので参考にしてください
Reactのインストール手順
では今度こそReactのインストールを始めましょう
1.yarnのインストール手順
コマンドプロンプトに以下のコマンドを打ち込みましょう。yarnはnpmの代替品で依存関係の管理や実行速度において利点があります。まぁ代替品なので無理に入れなくても良いのですが、筆者の環境設定に合わせるために入れておいてください
$ npm install -g yarn
yarnのインストールが完了したら、バージョンを確認しましょう。
※使っている環境によってバージョンは異なる場合があります。
$ yarn --version
2.TypeScriptを使用したReactプロジェクトの作成
TypeScriptを使用したReactプロジェクトを作成します。以下のコマンドを打ち込んでください
※このコマンドの実行には数分かかる場合があります。少し待ってみて下さい
$ npx create-react-app my-app --template typescript
このコマンドは以下のことを行います：
- create-react-app というReactの公式ツールを使用して新しいプロジェクトを作成します。
- my-app という名前のフォルダにプロジェクトを作成します（この名前はフォルダの名前なのでもちろん変更可能です。例としてはmyappやapp,出退勤なのでattendanseなどでもいいかもしれません）。
- --template typescript オプションにより、TypeScriptを使用するReactプロジェクトが作成されます。
プロジェクトの作成が完了したら、作成されたプロジェクトフォルダに移動します。それでは以下のコマンドを打ち込んでください。
$ cd my-app
cdはChange Directoryの略で、指定したフォルダに移動するコマンドです。my-appは先ほど作成したプロジェクトフォルダの名前です。Windows環境では、エクスプローラーでプロジェクトフォルダを右クリックし、「パスのコピー」を選択して、そのパスをコマンドプロンプトに貼り付けることもできます。
そして、開発サーバーを起動します
$ yarn start
このコマンドにより、ローカル開発サーバーが起動します。通常、ブラウザが自動で開き、Reactアプリケーションが表示されます。
もしブラウザが自動で開かない場合は、手動でブラウザを開いてhttp://localhost:3000と入力してアクセスしてください。すると、以下のような画面が表示されます：
これで、TypeScriptを使用したReact開発環境の準備が整いました。この環境で、フロントエンドの開発を進めていくことができます。
FastAPI
1.pythonのインストール方法
FastAPIはPythonをベースに動作するため、まずはPythonのインストールから始めましょう。
1.Pythonの公式サイトから最新版をダウンロードします。
ダウンロードした後は基本的にダウンロードフォルダーにあるインストーラーを実行しインストールします。
コマンドラインで以下を実行し、Pythonとpipのバージョンと正しくインストールされていることを確認します。
※pipは、Pythonのパッケージ管理ツールで、通常はPythonをインストールするとpipも一緒にインストールされます。Pythonのパッケージ（ライブラリやモジュール）のインストール、アップグレード、アンインストールなどに使用します。
※こちらも、使っている環境によってバージョンは異なる場合があります。なのでここはこんな感じの数字が出てくればOKです
$ python --version
Python 3.12.6
$ pip --version
pip 21.1.3
2.Fastapiのインストール方法
以下のコマンドを実行して、FastAPIと必要なライブラリをインストールします。
pip install fastapi uvicorn
PostgreSQL
1.PostgreSQLのサイトから
お使いのOSに適したバージョン(RC1とは、リリース候補版のことで、正式リリース前の最終テスト段階のものです。)をダウンロードし、ダウンロードフォルダーからインストールします。
このようにスタート画面にPostgresqlのフォルダーが確認できればOKです
個人的にはこれらのサイトが詳しく書かれていて参考になると思います。
以上で、基本的な開発環境のセットアップは完了です。次回は、pythonとPostgreSQLを使用して、データベースの設計と構築、操作を行います。