全10回にわたるタロット占いアプリの開発チュートリアル、本当にお疲れ様でした!無事に世界へ向けてご自身のWebアプリを公開できたことと思います。
今回は「番外編」として、私たちがここまでどのような「開発手法」を用いてアプリを作り上げてきたのか、少しだけプロの現場の視点を交えて種明かしをしたいと思います。これから「星占いアプリ」など、2つ目、3つ目のオリジナルアプリを作っていく上で、絶対に知っておいて損はない考え方です。
開発手法の2大巨頭:「ウォーターフォール」と「アジャイル」
システム開発の世界には、大きく分けて2つの有名な進め方があります。
1つ目は「ウォーターフォールモデル」です。 これは名前の通り、滝の水が上から下へ落ちるように進む手法です。「最初にすべての画面レイアウトや動きを設計書に書き起こし、それが完璧に終わるまで一切プログラミングをしない。そしてプログラミングが終わるまでテストをしない」というように、後戻りを許さない厳格な進め方です。銀行のシステムなど絶対に失敗が許されない巨大な開発に向いていますが、個人開発でこれをやると、コードを書く前に疲弊して挫折してしまいます。
そして2つ目が、今回私たちが自然と実践していた「アジャイル開発(またはスパイラルモデル)」です。 こちらは「まずは小さく作って動かし、確認しながら機能を継ぎ足していく(反復していく)」という、現代のWeb開発の主流となっている手法です。
なぜ今回の進め方が「アジャイル」だったのか?
連載の道のりを振り返ってみると、私たちがどれだけアジャイルな(機敏で柔軟な)進め方をしていたかが分かります。
- とりあえず本番に出す(第4回): アプリの中身が空っぽの状態で、まずはWranglerを使ってデプロイし「本番環境で動くこと」を最優先で確認しました。
- 少しずつ肉付けする(第5〜7回): 画像を配置し、データを定義し、トップ画面という「機能の一部」を追加しては、手元のブラウザで動きを確認しました。
- 動かしながら軌道修正する(第8回): 開発途中で「タロット画像の裏面に不自然な余白(帯)が見える」というデザインの問題に気づき、すぐにCSS(
scaleなど)を修正して余白を消し去りました。
このように、「作る ➔ 動かして確認する ➔ 修正・追加する ➔ また動かす」という短いサイクルをぐるぐると回しながら、徐々にシステムの完成度を高めていく(スパイラル状に成長させる)アプローチをとっていたのです。
個人開発におけるアジャイルの圧倒的な強み
「最初から完璧な設計図を用意しなくてもいい」。これが、初心者や個人開発においてアジャイル開発が最強である最大の理由です。
プログラミング学習の最大の敵は「モチベーションの低下」です。しかし、この手法であれば「とりあえずトップ画面だけ動いた!」「カードが裏返った!」という小さな成功体験を早い段階で何度も味わうことができます。また、エラーやデザインの崩れが起きても、「直前に書いたコードのどこかが原因だ」とすぐに特定し、軌道修正することができます。
これから新しいアプリを作る時も、「まずは完璧なものを作らなきゃ」と身構える必要はありません。まずはボタン1つの画面から作り始め、思いついた機能をどんどん継ぎ足していけば良いのです。
【編集後記】 プロのエンジニアであっても、最初から一度のバグも出さずに完璧なシステムを書き上げることは不可能です。実際に動かしてみて、「あ、ここスマホで見ると押しづらいな」「画像がはみ出ているな」と気づき、その場でコードを書き直す泥臭い作業の繰り返しこそが、Web開発のリアルな姿です。 .envファイルを新しいフォルダにコピーし、コマンドを打ち込んで新しい空っぽの環境を立ち上げる。そこから先は、あなたのアイデア次第でどんなシステムでも自由に継ぎ足していける、無限のアジャイル開発の始まりです。ぜひ、この柔軟なマインドセットを武器にして、次の素晴らしいWebアプリ開発に挑戦してください!