PWAとは
とりあえず今更ですが、PWA（Progressive Web Apps）とはざっくり自分の理解ではWEBアプリをパワーアップした感じでしょうか。よく出るキーワードが
- オフライン動作
- プッシュ通知
- Service Worker
- Web App Manifest
昔HTML5でWEBアプリ作る勉強してた時もホーム画面追加だったり、キャッシュマニフェストでオフライン起動とかはあったので、やはりプッシュ通知が大きく変わったように感じます。あとChromeなどでPCにインストールみたいなことができ、アプリのように利用できるのもすごい。
開発環境を整える
だいぶ前から触ってみたいと思いつつも、まず開発環境整えるのがめんどくさそう。ただ今回は重い腰を上げて進めてみました。というか昔は何かとググって進めてましたが、今はAIがほんとわかりやすく教えてくれるのですごすぎる。
今回はフロントで完結する簡単なアプリなのでCopilotと相談しながらVue + Viteの構成でいくことに。まずは以下をインストールしました。
- node.js
- VSCODE
まだほんの触りですが、いやほんとVSCODEすごい便利。nodeのインストールもすぐだしなぜ今までやらなかったのかと。
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm installあとはVSCODEでターミナルを開いて上のコマンド実行すれば必要なファイルのダウンロードやテンプレートが作成されて面倒なベース部分はほぼOK。
何を作るか？
とりあえず難しいことすると挫折する可能性が高いので、前に自分用に作成した土地家屋調査士試験用の一問一答をアプリにまとめてみることに。
作成の過程はひたすらCopilotと相談しながら進めました。昔はエラー出たり、わからないことはググってましたがAIは答えやアドバイスがダイレクトに返るのでめちゃくちゃ効率的。
正直躓きどころもなく進めることができました。
ただプッシュ通知に関してはサーバサイドの構築やらが以外と面倒くさそうだなと、試したかったけど今回はパスしました。
完成
一問一答をひとつのアプリにまとめてみました！インストール（PC・Android）またはホーム画面に追加（iOS）で、よかったら試してみてください。
土地家屋調査士試験 一問一答アプリ
※ご注意※
上記アプリは自分が勉強がてら作成したものとなり、注意はしておりますが内容の正確性・動作を保証するものではありませんのでご注意ください！
まとめと感想
昔はまず公式ドキュメント見てチュートリアルに沿って進め、わからない用語ググったりする流れでなかなか理解が進まず、時間かかって挫折することも多かったのですが、今はAIに聞けばダイレクトに答えが返るので非常に効率的でした。
とにかくAIに教わりながら進めていく、エラーでても解決してくれるし一個ある程度作成できれば何かと理解が進む、それからドキュメントみると意外と頭に入ってくる。この流れが自分的にかなり合う。
メジャーどころの資格試験はAIに教わりながら過去問回すみたいなやり方でもいけるのでは？次の資格で試してみたい！
次はSupabaseを利用してプッシュ通知の実装をしてみたいと思っています。