若手webエンジニアが自作WEBアプリをはじめて公開してみた話
1. はじめに
今年(2023年)のGWの空いた時間を使い、自作のWEBアプリを作成および公開する経験をしたので、その過程で得た知識と経験を共有するために本記事を書いてみました！
1.1 自作したWEBアプリについて
作成したWEBアプリは「両親、友人、彼氏・彼女へのプレゼントをおすすめしてくれるアプリ」です
1.2 このアプリを立ち上げた理由
理由としては以下の二つです
(1) Nuxt3を試してみたかったから
(2) 将来的な広告収入
2022年11月16日にNuxt 3 のstable版となる 3.0 が正式リリースした関係でNuxt3を勉強してみようと思いましたが、実際にアプリを作ってみないといまいち身になる気がしなかったので、一度本気でWEBアプリを作って公開してみようと思ったというのが一つ目の理由でした。
もう一つの理由として、以下のサイトで自作のWEBアプリで広告収入を得られる可能性があるということを知った時に自分もWEBアプリを立ち上げて将来的に少しでも広告収入が稼げるのでは？と思ったという不純な理由もあります…
2.WEBアプリのアイデア
アイデアとしては以下の条件を満たすサービスを考えてみました。
最終的には商品の紹介をして購入を促す
人に使ってもらえそうなアプリ
一つ目の「最終的には商品の紹介をして購入を促す」については、以下のサイトでは、Amazonの本を紹介していたことによって利用者が本を購入したときにサイトの運営者に広告収入が入るモデルだと思ったため、自分も広告収入を得るには最終的には商品の紹介などをして利用者が自然に商品を購入する流れにする必要があると思いました。
二つ目の「人に使ってもらえそうなサービス」においてはとりあえず自分が身近で困ったことを解決できるサービスという視点で考えました。
自分の最近困ったこととしては、「GW中に帰省するタイミングで母の日のプレゼントを渡そうと思ったが、いまいち何をあげて良いかわからず悩んだこと」だったので、一つ目の視点と掛け合わせて「プレゼントを一つ決めてくれるWEBアプリ」があれば最終的に商品紹介もできるし、人の課題も解決できるのでは？というなんとなくのアイデアで「両親、友人、彼氏・彼女へのプレゼントをおすすめしてくれるサービス」の構想が出来上がりました。
3. WEBアプリの構成
WEBアプリの構成は以下です。
フレームワーク ・・・Nuxt3
UIフレームワーク・・・Vuetify
インフラ・・・AWS
外部サービス・・・Yahoo! JAPAN Web API
構成のイメージとしてはこんな感じ
基本的にYahoo! JAPAN Web APIで取得した情報を絞った上でブラウザに返すだけのシンプルな構成なのでDBはありません。
FargateでNuxt3で作ったアプリケーションを配信するだけです
4.実装
ソースコード(Github)
4.1 実装を進める前に行った学習
今回の実装を進めるにあたり以下については事前に勉強しました。
勉強内容1) Composition APIの基本
Vueの2系のOptions APIしか経験してこなかったので、まずはComposition APIについての実装方法について学びました。
基本的には以下のサイトの知識で十分網羅できているのかなと思いました
勉強内容2) Nuxt3の基本
以下のサイトで勉強しました。
非常に有用なサイトです。
この知識さえあれば基本的に困りませんでした。
勉強内容3) Yahoo! JAPAN Web APIの使い方
以下に沿って利用すれば基本的につまづくことはなかったです。
4.2 実装で困ったことについて
ロジック周りについては、「4.1 実装を進める前に行った学習」 についてマスターできていれば基本的には実装で困ることはなかったですです。
しかし、自分はデザインについては完全に無知なのでvueファイルのtemplateについては思いっきりChat GPTを頼りました。
例えば、「vuetifyでかっこいいテキストボックスを実装して」などを問い合わせて実装された内容を基本的にはそのまま実装しました。
英語で問い合わせると少し精度が上がる気がするので、Google翻訳などで翻訳した後に英語で問い合わせても良い気がします。
5. 終わりに
GWの空いた時間に初めてWEBアプリのリリースを経験してみたが、意外とハードルはそこまで高くないと感じた。どちらかというとリリースしたWEBアプリの集客が非常に難しい。。
この記事が気に入ったらサポートをしてみませんか？