はじめに
こんにちは、ひるげです。
昨年4月、初心者エンジニアに捧げる、Webアプリケーション作成ロードマップという記事を書いたところ、ありがたいことに知人からかなり好評でした。
あれからいろんな技術に触れてチーム開発も経験し、少し視野が広くなったことで、このロードマップを書き直したくなったので、2026年版として投稿します。
根本からロードマップがひっくり返るような変更はありませんが、いくつか修正が入っています。
4月は新たな挑戦を始めるにはうってつけなので、よければこのロードマップを参考にしてほしいと思います。
というわけでこの記事では、初心者エンジニアに向けて、「Webアプリケーションを作るにはどうすれば良いか」についてお話ししていきます。
ここで想定している「初心者エンジニア」は、具体的には以下のような方を指しています。
- Linuxは使える
- 何らかのプログラミング言語は触ったことがある
- Webアプリ開発の知識は特にない
各ステップごとに、参考になりそうな書籍や記事も提示するので、このロードマップに則って学習を進めていけば、自分のWebアプリをインターネット上で公開できるようになるはずです！
結論
結論から言うと、Webアプリを作ってインターネット上に公開するためには、大きく以下のステップを踏む必要があります。
- 静的なWebアプリを作る
- Webの仕組みを知る
- 動的なWebアプリを作る
- インフラを学ぶ
- アプリケーションをデプロイする
静的 vs 動的：かんたんに
静的なWebアプリとは、HTMLファイルをブラウザがそのまま表示するだけのものです。サーバー側での処理はなく、誰が見ても同じ内容が表示されます。
動的なWebアプリとは、バックエンドサーバーでデータの取得・処理を行い、その結果をブラウザに返すものです。ログインや投稿・検索など、ユーザーや状況によって異なる内容を表示できます。
このような流れを踏むことで、以下の図のような構成のシステムを構築でき、それによってWebアプリが動きます。
(今は以下の図を理解できなくても大丈夫です。安心してください！)
以降では、この流れに沿ってWebアプリを作れるようになるまでの流れをたどっていきます。
1. 静的なWebアプリを作る
まずはHTML+CSS / JavaScriptを用いて静的な(バックエンド処理を必要としない)Webアプリを作成します。
デザインについてもここで学べるでしょう。
皆さんが思う「このサイト、イケてるな〜」の大半はこの部分の頑張りだったりします
参考テキスト
- HTML+CSS: 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- JavaScript: 確かな力が身につくjavascript「超」入門
2. Webの仕組みを知る
次のステップに進む前に、一旦立ち止まってWebの仕組みを学ぶのが理想的です。
ここで読んで欲しいのが、『Webを支える技術』です。
この本は、HTTP、URI、REST、HTMLといったWebの根幹をなす技術を体系的に解説した一冊です。
Webはどういう仕組みで成り立っているのかを先に理解しておくと、以降で書くコードが何をしているのか掴みやすくなります。
意味もわからず丸暗記していくより、「それ知ってるよ」的なスタンスで進められた方が楽しいですよね？
このステップはその下準備になります。
ただ、初学者には少し骨太な内容であることも事実です。
読んでいると「早く手を動かしたい」という気持ちに引っ張られることもあるでしょう。
そういった場合はここをスキップして先に実際に手を動かし、後から読み返す形でも十分です。
それもまた、勇気ある選択です。
3. 動的なWebアプリを作る
バックエンド処理とデータベースを持つWebアプリを作っていきます。
ここでの最大の関門がフレームワーク選びです。
Webフレームワークには大きく2種類の考え方があります。
まずはフロントとバックをまとめて扱うフレームワーク（最初のおすすめ）
DjangoやRailsのように、画面の表示からデータベース操作まで、ひとつのフレームワーク内で完結させる方法です。
全体の流れが1つのプロジェクトに収まっているため、構造が把握しやすく、セットアップもシンプルです。バックエンド処理とは何か、データベースはどう使うか、基本的なWebセキュリティをどう考えるか...こうした基礎を手を動かしながら学ぶ場として、最初はこちらがお勧めです。
僕自身も最初のWebアプリはDjangoで作りました。
とにかく動くものを作って公開する体験を積むことが、何より大事だと思います。
参考テキスト
- Python(Django)：「Python Django 4 超入門」
- Ruby(Rails)：「Ruby on Railsチュートリアル」
組織・チーム開発を視野に入れるなら：フロントとバックを分ける構成
Reactなどのフロントエンドフレームワークと、RailsのAPIモードやGoのようなバックエンドを、別々のプロジェクトとして開発する方法です。
フロントとバックはAPIを用いてやり取りします。
企業や組織でのチーム開発では、この構成が多く採用されています。
フロントチームとバックエンドチームに分業できること、それぞれを独立してスケールできることが主な理由です。
そういった意味でより実践的なのはこちらなのですが、初心者が最初からこの構成で始めるのは少し難易度が高いかもしれません。
単純に、学習するフレームワークが2個に増えますからね。
最初の1本はフルスタックフレームワークで作って感覚をつかみ、組織でのチーム開発に踏み出したいと思ったタイミングでこちらに挑戦することをおすすめします。
一応下に参考リンクを貼っておきますが、これに取り組む時には「自分で学習に必要な教材を探してこれる」レベルになっているかと思います。
各々にあったサイトやテキストを使って学習を進めてくださいね。
参考リンク
- JS/TS (React)：「React公式 クイックスタート」
- Ruby(Rails)：「Ruby on Railsチュートリアル」
- Go：「Go公式チュートリアル」
4. インフラを学ぶ
ローカルで動くWebアプリができたら、あとはインターネット上に公開するだけです。
インターネット上に公開するためには、インターネットを通じて誰でもアクセスできるマシンの上で、これまで作ってきたアプリを動かす必要があります。
この「インターネットを通じて誰でもアクセスできるマシン」をどう手に入れればいいのか、どうやってそこに自分のアプリを乗っければ(デプロイすれば)いいのかをこのステップでは学びます。
大抵の場合、「インターネットを通じて誰でもアクセスできるマシン」は、それを提供しているサービス(クラウドサービス)から借りてくる必要があります。
主要なクラウドサービスの選択肢はAWSとGCPです。
AWSはAmazonが、GCPはGoogleが運営しているクラウドサービスになります。
学習リソースの豊富さと利用者の多さから、まずはAWSをおすすめします。
1年間の無料利用枠があるので、最初はそれをフル活用しながら感覚をつかむのが良いでしょう。
このあたりから料金が発生する可能性があります。
意図せず課金されないよう、以下に示すテキストや公式ドキュメントをよく読んで課金体系などを十分に把握し、Billing設定の上限アラートはAWSを触り始めた段階で設定しておいてください。
参考テキスト
- 図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書
- Google Cloudのしくみと技術がこれ1冊でしっかりわかる教科書
Tips：お金をかけず長期運用するために
個人開発サービスで一番重要なことは、運営を継続することです。
お金をかけたくない方は、こちらの記事も参考にしてみてください。
個人開発サービスをできるだけ無料で運用するためのデプロイ先を紹介しています。
5. アプリケーションをデプロイする
ここまできたら、あとはアプリをデプロイしてクラウドサービス上で動作させるだけです！
大まかな流れは「サーバーを用意する → 作ったアプリが動く環境を用意(環境構築)して、コードをサーバーに乗せる → アプリを起動する」です。Gitを使っているならgit clone、使っていないならscpコマンド等で、WebアプリケーションのコードをWebサーバー上に移し、動作を確認してください。
ちなみに、静的なWebアプリの段階でデプロイしても構いません。
サーバー料金や必要な機能を踏まえ、タイミングは適宜判断してください。
補足事項
必須ではありませんが、早めに身につけておくと開発が格段に楽になる技術を紹介します。
これらを取り入れれば、今回のWebアプリケーションロードマップをよりストレス無く進めることができるかと思います。
嫌にならない範囲で取り組んでみてください！
ex1. Git/GitHubでコードを管理する
上記のような大規模な開発を行う際、コードの管理が非常に重要になります。
Git/GitHubはこのコード管理を行うためのエンジニア必須ツールです。
できれば最初の段階から、これを利用して欲しいですが、もし楽しくないと感じたら一旦後回しでもかまいません。
個人開発を始めて、続けることが何より重要だからです。
もしGit/GitHubについて学びたいと思ってくれた場合は、以下の記事が理解の手助けになるかもしれません。
ex2. Dockerで環境構築を楽にする
エンジニアを挫折させる最大の障壁は「なぜか環境構築がうまくいかない」でしょう。
インターネット上の記事や公式チュートリアルを参考にしながら環境構築をしても、「自分の環境でだけ発生する不具合」というものが発生しがちです。
この環境構築を非常に簡単にしてくれるのが、Dockerになります。
簡単に言えば、仮想環境を立ち上げて外部の雑多な影響を排除し、所望のコードを実行できる環境を容易に、確実にセットアップできるようにするのがDockerです。
Gitとともにエンジニアの標準装備になっているので、早めに慣れておくに越したことはないでしょう。
ex3. CI/CDでデプロイを自動化する
CI/CD (Continuous Integration/ Continuous Delivery)は、Webサービスを継続的に提供するために必要な技術です。
具体的には、「ローカル環境で構築したコードをGitHub上にpushしたら、本番環境に自動適用される」というようなことが可能になります。
「GitHubにpushして、本番環境サーバーにssh接続して、その中からgit pullして...」ということをやる必要がなくなるのは、実際に体験してみると非常に快適です。
CI/CDは先述したGitHub・Dockerに比べると優先度的にやや劣るものの、身につけておくと非常に便利なので、ぜひ学習を検討してほしいです。
実装方法にはいくつか種類がありますが、個人的にはGitHub Actionsがオススメです。
より実践的なサポートとして、EC2上へ自動デプロイする際に役立つ記事を以下に貼っておきます。
おわりに
以上がWebアプリケーション開発ロードマップになります。
各々のケースに合わせて修正が必要になるとは思いますが、大筋はこの通りなので、ぜひ参考にしてほしいです。
もう一度まとめると、
- 静的なWebアプリを作る
- Webの仕組みを知る
- 動的なWebアプリを作る
- インフラを学ぶ
- アプリケーションをデプロイする
という流れです。
とにかくやってみて、続けることが大事なので、自分が楽しいと思ったところから始めてみてください！
宣伝
最後に少しだけ宣伝させてください。
現在、Roambleという個人開発のWebアプリを運営しています。
気になっているカフェの前を通り過ぎて、結局いつものチェーン店に入ってしまう...そんな経験がある方に刺さるかもしれません。
Roambleは、現在地周辺のお店をランダム提案し、実際に訪問すると経験値が貯まってレベルが上がる、新しいお店開拓アプリです。
現在iOSウェイトリストを受け付けています。少しでも気になった方はチェックしていただけると嬉しいです。