趣味でミニアプリをつくっている話
2024年春。プライベートな時間でアプリ開発を楽しめるようになりました。
といいつつ「アプリ」というほど立派なものでもなくて、家族や周りの人達が喜んでくれそうな小さなプログラムを作っています。
こういうアプリ未満なものをツール？と呼ぶと味気なくて、プロトタイプ？というと仕事っぽい。なのでAIが提案してくれた「ミニアプリ」と呼ぶことにしました。以下は作っているミニアプリの一覧です↓
地下鉄の駅をただただ移動するミニアプリ
知育ミニアプリ「わかるかな？」
カルタ（百人一首）のミニアプリ
集中力強化ミニアプリ「コンセント」
プログラミング学習ミニアプリ「TouchTheCode」
カメラ買ったのに使っていない人のためのミニアプリ
ミニアプリには名前があったりなかったり。
2024年は仕事が落ち着いてきていたのもあって、1ヶ月に2つくらいのペースで開発することができました。
個々のミニアプリの詳細ついては、また別のnoteにまとめるとして、今回はなぜ急にミニアプリを量産できるようになったのか？その理由について整理してみようと思います。
先に理由を3つあげておくと
理由1: 開発の手順を変えた
理由2: 画像などの素材の準備が楽になった
理由3: コードアシストが強化された
理由1: 開発の手順を変えた
わたし自身、元々はJavaプログラマーなのもので、JavaでSpring、Ruby on Rails、PHPでLaravelのような言語やフレームワークをつかってサーバサイド開発の仕事が中心でした。
なので開発するアプリケーションもいわゆる「Webアプリ」が中心です。
これまで「Webアプリ」を開発するときは、
まず言語・フレームワークを選定して、
データベースを準備して、
MVCなコードかいて、
HTML/CSSを書いて、
必要ならちょっとJavaScriptなんかも書いて、
みたいな作業の進め方が染み付いていました。
そんな従来型のWebアプリ開発おじさん（わたし）に転機が訪れます。
2023年は、フロントエンド開発を経験する機会がありました。ReactやNext.jsを中心としたフロントエンド開発スキルについて、ほんの少しですが身につけることができました。
〜
すこし余談ですが、開発プロジェクトを通じて、一回り以上年齢の違う20代の優秀なエンジニアから良質なフィードバックをたくさんもらえたので、プログラミングもちょっと上手くなったように思います。
ほんまありがとう、という感じです。
〜
それで話を戻して、フロント開発のスキルを（わずかですが）習得できたことで、Webアプリの開発の手順がガラッと変わりました。
新しい開発の手順は以下のような具合です。
まずはフレームワークを選定する。
わたしの場合はReact、Next.js、TypeScriptの構成です。他にもVue.jsやNuxtなどの構成もあると思いますが、そんなにあれもこれもやる時間はないので、今はReact、Next.js、TypeScriptに限定しています。
それから次は、データベースを準備して〜、というのがこれまでの定石だったのですが、それをやめました。厳密には、データベースを使わない、というわけではないのですが、本当に必要になるまでデータベースを使うのを遅らせるようなイメージです。
フロント開発をやってみると、開発初期段階ではJSONなどでサンプルデータを準備すれば十分なケースが多く、まずはエディタで（というかAIで）データを準備して、それを参照していくアプローチに変えました。データベース構築のような定型的な作業を後回しにするだけで、「ミニアプリ」開発のハードルは低くなります。
次にUIの構築です。以前はモデル、ビュー、コントローラみたいなプログラムをまず作っていましたが、Next.jsをベースにするとUIコンポーネントを作っていくかんじになります。
UIコンポーネントとは「画面の部品」のことで、テキストボックスとかボタンとか、テーブルとかそういうのです。ここではReactの関数コンポーネントが活躍してくれます。
Reactの関数コンポーネントでは、UIコンポーネントを「関数」に見立てて、
入力（引数）から出力（HTMLみたいなJSX）をつくります。このシンプルなルールが、慣れてくるととても楽です。
TypeScriptも活躍してくれます。TypeScriptは、最初は（というか今でも）むずかしいところはありますが、型の不整合（コンパイルエラー）を検出してくれるので、コードを実行する前に間違いに、気づくことができます。
特にコードを修正するときは優秀で、TypeScriptのおかげで安心してコードを修正できます。てきとうに書いてあとで作りなおす（＝リファクタリング？）もはかどります。
あとはJavaやPHPでよくやる「クラス」の定義もなくなりました。「関数型プログラミング」も少し勉強していて、イミュータブル、参照透過性みたいな言葉もよく使うようになりました。
オブジェクト指向も好きですが、状態管理や副作用をなくしていくのもアリなように思っています。宣言的にコードを書いていく、という感覚も少しわかってきました。
そんなわけで「理由1: 開発の手順を変えた」についてまとめると、
フロント開発のスキルを習得できたことで、開発の手順が変わった。
データベースなどの環境の準備は後回しにして、
画面からサクサク作っていくことができるようになった。
例えるなら、新しい開発手順は、「パワポ」で資料を作る感覚とよく似ています。あれこれ準備しなくてもこの辺にコンポーネント配置して〜みたいなノリでコードを書いています。
あとそうそう、TailwindCSS。TailwindCSSのおかげで見栄えの調整が楽、というのもあります。
あとそうそうその2。Next.jsならVercelにデプロイするのがめっちゃ楽、というのもあります。できあがったミニアプリにスマホでパッとアクセスして遊べるのがよいです。
そんなかんじで、フロント開発を中心とした開発体験の変化が「ミニアプリ」開発のモチベーションになっています。
後半に続く
長くなったので後半にわけます。