※この記事は、私が手探りでHTML・JavaScript・PHPを使って作った記録です。
今はノーコードツールも多く、もっと簡単にアプリを作る方法もあります。
それでも「仕組みを少し知りながら作りたい人」には、きっと役に立つと思います。
WordPressを立ち上げたばかりの私は、
なぜかブログより先に「Webアプリ」を作り始めていました。
理由はシンプルで、
「猫の記録管理アプリが作りたい」
ただそれだけ。
もちろん、HTMLもCSSもJavaScriptもPHPも、
何も分からない状態です。
でも、ChatGPTにダメ元で聞きました。
「スマホで動くアプリを作りたい」
返ってきたのは、見たこともない英語と記号のかたまり。
いわゆる「コード」でした。
当然、1ミリも意味が分かりません。
でも、言われた通りにやってみました。
メモ帳に貼って、
「index.html」という名前で保存して、
Xサーバーに置いてみる。
すると――
スマホで開いたら、画面が出たんです。
何も理解してないのに、
自分のアプリの画面が表示された。
この瞬間、ちょっと鳥肌が立ちました。
「え、これ…アプリじゃないの？」
入力欄があって、ボタンがあって、
スマホで普通に操作できる。
見た目は、もうアプリそのもの。
このときの私は、こう思ってました。
めちゃめちゃ楽しい！！簡単にできた！！
…しかしここから、地獄のように詰まりまくります。
保存できない。何も残らない。
入力して「保存」を押す。
消える。
記録は残らない。
何回やっても消える。
パソコンでは動くのに、スマホでは動かない。
写真を入れると保存できない。
エラーも出ない。理由も分からない。
この時点で、もう完全に意味不明。
でも、ChatGPTに聞き続けました。
少しずつ分かってきた「Webアプリの正体」
やっていくうちに、少しずつ分かってきました。
Webアプリって、
- HTML（見た目の骨組み）
- CSS（デザイン）
- JavaScript（ボタンを押したときの動き）
- PHP（データを保存する役割）
この4つでできている、ということ。
最初に表示できたのは ①②③ だけ。
保存できなかった理由は ④ が無かったから。
つまりこのとき作っていたのは、
「見た目だけアプリ」で、中身は何も保存されない状態
これに気づいたとき、
点と点がつながる感覚がありました。
サーバーに置く＝世界から見える場所に置く、ということ
PHPを使うには、サーバーにファイルを置く必要がありました。
言われるまま
- save.php
- data.json
- update.php
- delete.php
という謎のファイルを作成。
ここで初めて、
ブラウザの中だけではなく、サーバー側にデータを置く
という仕組みを知ります。
（このときXサーバーで404地獄を見ることになるのですが、それは次回書きます。）
そして、ついにスマホで保存できた
PHPファイルを置いて、
コードを少し直して、
何度もエラーを出して、直して。
ある日。
スマホで保存を押したら、
ちゃんと記録が残った。
この瞬間、本気で声が出ました。
「出来た…」
理解はしてないけど、
確実に「作れている」実感がありました。
気づいたら、編集・削除・写真・デザインまで進化
最初は「記録できればいい」だけだったのに、
- 削除ボタンを付けて
- 編集機能を付けて
- 写真を小さくして保存できるようにして
- デザインをアプリっぽくして
気づけば、完全にアプリの形になっていました。
やっていることは、ほぼコピペと質問だけです。
そして最後に、PWA化
仕上げにやったのが「PWA化」。
スマホで開いたときに出てきた
「ホーム画面に追加」
半信半疑で押してみると、
スマホのホーム画面に、自分のアプリのアイコンが出ました。
この瞬間、思いました。
「これ、もうアプリ完成でいいよね？」
HTMLも知らなかった人でも、ここまで来れた
今でも、コードの意味はほとんど分かりません。
でも、確実に言えることがあります。
「意味が分からなくても、アプリは作れる」
これは体験して分かったことです。
必要だったのは知識じゃなくて、
- 詰まっても聞き続けること
- 諦めないこと
- コピペでもいいから動かしてみること
それだけでした。
このあと書いていくこと
ここからの記事では、
- Xサーバーで404地獄になった話
- スマホで保存できなかった最大の原因
- PHPでデータが残る仕組み
- 編集・削除・写真対応の進化
- PWA化してホーム画面に出た瞬間
- ChatGPTからもらったコード
を、順番に書いていきます。
もし今、
「アプリ作ってみたいけど、絶対無理」
と思っているなら。
大丈夫です。
私も、まったく同じところから始めました。
正直に言うと、
私は「何も分からないままコードを書く体験」が楽しかったです。
でも、
「とにかく早く形にしたい」人には、
ノーコードの方が合っているかもしれません。
私はまだ使ったことはありませんが、
たとえば
Glide や
Bubble
のようなサービスがあります。
どの方法が正解、というより
「どんな体験をしたいか」で選ぶのがいいのかもしれません。
次の記事では、Xサーバーに置いたのに404しか出なかった話をします。
※追記
同じ内容を「思考フレーム」を使って再構成すると、
まったく違う記事になります。
→（比較検証記事へのリンク）
コメント