準備

VS Code は持っているが、React の環境はなかったのでセットアップから。幸い、npm はセットアップされていたので react のパッケージを導入するところから。

npm install -g create-react-app

これでパッケージの導入は完了。あとはテンプレを作るだけだが、コマンドを実行したらエラーが表示された。どうやらスクリプト実行の許可がなかったみたい。

> create-react-app login-form
create-react-app : ファイル C:\Users\takun\AppData\Roaming\npm\create-react-app.ps1 を読み込めません。ファイル C:\Users\takun\AppData\Roamin 
g\npm\create-react-app.ps1 はデジタル署名されていません。このスクリプトは現在のシステムでは実行できません。スクリプトの実行および実行ポリシ  
ーの設定の詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ create-react-app login-form
+ ~~~~~~~~~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

ということで、「設定」から「更新とセキュリティ」の中にある「開発者向け」を見てみる。デフォルトでは「適用」ボタンが青くなっているので、これをクリックして許可してあげる。

もう一度コマンドを叩くと無事に作成される。

create-react-app login-form

実行するときは、そのディレクトリに移動して npm start を実行すればOK

実装したもの

完成したものはこんな感じです。お手本は紫ベースでしたが、私は青ベースにしてみました。ソースコードはお手本のやつを写経（一部変数名などは変えましたが）したので、ここには載せません。動画を見ながらやってみてください。

製作時間は約1時間でした。あとはデータベースと連携したり、パスワードを隠すなどすればそれっぽい感じになりますね。

イベントのお知らせ

2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。
興味がある方は（社会人、学生問わず）ぜひご参加ください！
Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！

mspjp.connpass.com