効率化を考えるとあっという間に時間がすぎる、ゆる子です。
前編では、「初心者が勢いだけでWEBアプリを作り始めた話」を書きました。
AIに頼りながら、手探りでコードをコピペして、なんとか形になり始めた受領書計算WEBアプリ。
「よし、あとは仕上げるだけ」
そう思ったところから、後編が始まります。
ここからは、完成目前で立ちはだかった現実と、そこからどう立て直したかのお話です。
無料サービスには、やっぱり壁があった
Netlifyでアップロードして、修正して、またアップロード。
この繰り返しで一気に完成させるつもりでした。
ところが突然ストップがかかります。
無料プランのアップロード回数の上限に到達したとメッセージが。
しかも、あと少しで完成というタイミングです。
作業もノリに乗っていて、途中で止めたくない！という状態でした。
もちろん無料で使わせてもらっているので、文句は言えません。
頭では分かっている。でも、萎えるものは萎える・・
追い打ちをかけるようにその日のうちに、Perplexity（パプちゃん）の無料枠も使い切ってしまいました。
質問はできるけど、高性能モードは使えない。
画面にちらつく注意書きを見て、完全にテンションが落ちます。
萎えた私を救ってくれたChatGPT
このまま今日は終わりにするか。いや、気分を切り替えたい。
そう思って、別のAIを頼ることにしました。
ここで登場するのがChatGPT、私はチャッピーと呼んでいます。
萎えた気持ちをそのままチャッピーに吐き出しつつ（笑）、レンタルサーバーで公開する方法について相談しました。
このときは本当に余裕がなくて、
「中学生でもわかるように説明してください」
と、かなり本気でお願いしました。
するとチャッピーは、驚くほど噛み砕いて、一つずつ順番に説明してくれました。
「あ、これならできるかも」
止まっていた気持ちが、少しずつ動き出します。
WEBアプリを、レンタルサーバーで公開することにした
実はこの時点で、独自ドメインもレンタルサーバーもすでに持っていました。
「これ、使えるの？」素直にチャッピーに聞いてみたところ、答えはイエス。
ただし正直に言うと、最初に説明を聞いたときはよく分かりませんでした。
Netlifyに比べると、レンタルサーバーでの公開は手順が多そうに見えたのも事実です。
それでも、チャッピーの説明を一つずつ確認しながら進めていくと、ちゃんとWEB上でアプリが動きました。
初めて作ったWEBアプリが、自分の環境で表示された瞬間です。
地味だけど確実にテンションが上がりました。
完成したと思ったら、次の提案がやってきた
無事に公開できたことをチャッピーに報告して、これで完成！と思っていた直後です。
「次、こんなこともできるけどどうする？」
チャッピーからの提案がきました。
チャッピーって普段から、聞いていないことも提案してくれるんですよね。
ありがたいけど、普段は余計なことが多いのでスルーすることも多いです（笑）
ただ、このときは初めてのWEBアプリ完成直後。
気分が良すぎて、提案を前のめりで読む自分がいました。
チャッピーの提案は、この3つ。
- フッターメニューを共通JSにする
- CSSを外部ファイル化
- スマホ表示の微調整
3つ目以外は、正直よく分かりません。
チャッピーに聞くと、要はこういう話でした。
「同じコードがあちこちに散らばっているから、整理しましょう」
「整理しよう」と言われて、初めて気づいたこと
言われて初めて気づいたのですが、私はHTMLファイルを5つ用意して、全部にHTML・CSS・JSを書いていたんです。
完全にコピペ頼りだったので、特に違和感もなく、そういうものだと思っていました。
構造を整理することによって、
- 修正が楽になる
- ページが増えても管理しやすい
- 見た目調整もしやすくなる
なるほど、こういうことも考えながら組み立てていくんだな。
言われるがままに作ればいい、という状況から一歩進んだ感覚を味わいました。
AIに頼るにしても、基礎知識は必要だと感じた瞬間
この作業の中で、もう一つ大きな気づきがありました。
それは、AIに言われた通りに直すだけだと、あとで自分が困るということです。
フッターメニューを共通JSにしたり、CSSを外部ファイルにまとめたり、やっていること自体は、ほぼチャッピーの指示通りでした。
でも途中で、こんな場面が何度も出てきます。
「このファイル、どこを直せばいいんだっけ？」
「この変更、他のページにも影響する？」
コードはちゃんと動いている。でも、自分の中で構造が整理できていないと、修正するたびに立ち止まる。
このとき初めて、整理するってこういうことかと腑に落ちました。
AIは正解を出してくれるけど、どこに何があるかを把握するのは自分なんですよね。
全部を理解する必要はないけれど、
- どの役割のファイルか
- 何をまとめたのか
この最低限が分かっていないと、あとから触るのが怖くなる。
この感覚があったので、基礎は少しずつでも身につけたいと思うようになりました。
分からないまま流さない。ゆるくやるけど、雑にはやらない。
このスタンスで、次は基礎の勉強にも手を伸ばすことにしました。
初心者がどうやって詰まりながら進んでいるか、興味がある方はこちらの記事もどうぞ。
JSって何？を今さら聞いてみた
コード整理の話を聞いている中で、ずっと気になっていたことを聞きました。
「JSって、何ですか？」
本当に分かっていなかったんです。なんとなくプログラミング言語だとは思っていました。
チャッピーからの答えは、
「JSは JavaScript の略です」
そっか、よく聞くJavaScriptのことか！
ようやく点と点がつながってスッキリ。
このやりとり、ネタでもなんでもなくて現実の話です（笑）
こんな初歩的なことでも、AIになら気軽に聞ける。本当にありがたいです。
できあがった受領書計算WEBアプリ
完成した受領書計算WEBアプリは、完全に自分用。
項目の意味も、書式も、他の人が見たら「？」だと思います。
でも、それでいいんです。
自分の作業が楽になることだけを考えて作った形だからです。
これで、毎日の締め作業がかなり楽になるはず。使うのが普通に楽しみです。
完成度はさておき、実際に動くものはこちらです。
今後追加したい機能
今後は、まだ準備中にしているまとめページを仕上げたいと思っています。
そして受領書ごとの番号管理もしたいです。
ただ、入力項目を増やしすぎるのは避けたいなという考えもあり・・
楽にするために作ったのに、手間が増えるのは本末転倒だよなと考えつつ、色々構想を練っています。
こういう考える時間も楽しいですね！いい落としどころを探していくつもりです。
まとめ
今回のWebアプリ制作で一番の学びは、完成させることよりも「整理して理解しようとした時間」でした。
分からないことを分からないまま流さない。ゆるくやるけど、雑にはやらない。
この感覚をつかめただけでも、勢いで始めた意味は十分あったと思っています。
また勢いで、何か作るかもしれません。
そのときは、きっと今回より少しだけ落ち着いていられるはずです。
コメント