初心者エンジニアに捧げる、Webアプリケーション作成ロードマップ

始めに

この記事では初心者エンジニアに向けて、「Webアプリケーションを作るにはどうすれば良いか」についてお話ししていきます。
ここで想定している「初心者エンジニア」は、具体的には以下のような方を想定しています。

• Linuxは使える
• 何らかのプログラミング言語は使える
• それ以外は何も知らない

各ステップごとに、参考になりそうな書籍や記事も提示するので、このロードマップに則って学習を進めていけば、自分のWebアプリをインターネット上で公開できるようになります！

目次

Webアプリケーションを作成するためには、以下のようなステップを踏む必要があります。
以下では、このステップに則って説明を行います。

1. 静的なWebアプリを作る (HTML+CSS / JavaScript)
2. 動的なWebアプリを作る (任意の言語: Java, Python(Django) etc...)
3. Webサーバーについて学ぶ (AWS, Azure, etc...)
4. Webサーバーにアプリケーションをデプロイする

1. 静的なWebアプリを作る (HTML+CSS / JavaScript)

HTML+CSS / JavaScriptを用いて静的な(バックエンド処理を必要としない)Webアプリを作成します。
デザインについてもここで学べるでしょう。

参考テキスト

• HTML+CSS : ⁠html＋cssとwebデザイン入門

• JavaScript: ⁠確かな力が身につくjavascript「超」入門

2. 動的なWebアプリを作る (任意の言語: Java, Python(Django) etc...)

動的なWebアプリケーションを作成していくために必要となる基礎知識について学びます。
ここでは主に、以下について理解できれば良いでしょう。
おそらく、各言語にWebアプリケーション開発を目的とした技術書があるため、それを参考にすると良いです。
僕はPython(Django)でこのステップを行いました。
投げやりに聞こえるかもしれませんが、実際に手を動かしてみるのが何よりの近道です。

• Webのしくみ：リクエスト・レスポンスの概要および役割
• バックエンド処理の意義と実装方法 (使用言語により具体的な実装方法は異なるので割愛)
• DBの意義と活用方法
• 基本的なWebセキュリティ

参考テキスト(Djangoを用いる場合)

• Python Django 4 超入門

3. Webサーバーについて学ぶ (AWS, Azure, etc...)

実際にインターネット上で公開するために、Webサーバーについて学びます。
オススメはAWS。下記のテキストを読んで座学しても良いですが、実際にやってみるのが一番早く習得できると思います。
AWSには、1年間一定範囲の利用が無料になる「無料利用枠」があるので、それをフル活用できると良いでしょう。
このあたりから、料金発生の可能性があるので注意してください。
補足ですが、下記の技術書には「AWSの始め方」に関する記述(チュートリアル)もあるので、かなりオススメです。
AWSを利用する場合、特に理解するべきはEC2というWebサーバー提供サービスになります。

参考テキスト

• ⁠awsのしくみと技術がしっかり分かる教科書

4. Webサーバーにアプリケーションをデプロイする

AWS、特にEC2の基本的な使い方を何となく理解できたら、実際にアプリケーションをデプロイする段階に移っていきます。
このステップは大きく「環境構築」「デプロイ」に分けることができ、恐らく前者に苦労するはずです。
AWSには、既に環境構築が整っているサーバーを提供する、AMIというありがたいサービスがあるため、これを有効活用すると良いでしょう。

4-1. LAMP環境構築

Webアプリケーションを提供する際、一般的に「LAMP環境」を用意する必要があります。
この名前は、必要なWebアプリケーション提供に必要な以下4つの頭文字から来ています。

• Linux：OS
• Apach：Webサーバー
• MySQL：DB
• PHP(or Python)：アプリケーション言語(任意のもので良い)

要はOS、Webサーバー、DB、アプリケーション言語の環境構築ができれば良いので、LAMP環境でなくても良いのですが、一旦ここではLAMP環境構築を取り上げます。
自分でLAMP環境を構築しても良いですが、先述したAMIを使う方が賢い選択でしょう。
以下にLAMP環境構築用AMIをのせておきます。

4-2. デプロイ：Webサーバーを通じてアプリケーションを動作させる

ここまできたらあとは動作させるだけです！
Gitを使っているならgit clone、使っていないならscpコマンド等で、WebアプリケーションのコードをWebサーバー上に移し、動作を確認してください。
補足ですが、別に静的アプリケーションの時点でデプロイしてもかまいません。
必要な機能や、サーバー料金などを鑑みて適宜判断してください。

補足事項

別に必須ではあるませんが、今後のために身につけておきたい技術やツールについて解説します。
これらを取り入れれば、今回のWebアプリケーションロードマップをよりストレス無く進めることができるかと思います。
嫌にならない範囲で取り組んでみてください！

ex1. Git/GitHubでコードを管理する

上記のような大規模な開発を行う際、コードの管理が非常に重要になります。
Git/GitHubはこのコード管理を行うためのエンジニア必須ツールです。
できれば最初の段階から、これを利用して欲しいですが、もし楽しくないと感じたら一旦後回しでもかまいません。
個人開発を始めて、続けることが何より重要だからです。
もしGit/GitHubについて学びたいと思ってくれた場合は、以下の記事が理解の手助けになるかもしれません。

ex2. Dockerを使って環境構築を簡単に

エンジニアを挫折させる最大の障壁は「なぜか環境構築がうまくいかない」でしょう。
インターネット上の記事や公式チュートリアルを参考にしながら環境構築をしても、「自分の環境でだけ発生する不具合」というものが発生しがちです。
この環境構築を非常に簡単にしてくれるのが、Dockerになります。
簡単に言えば、仮想環境を立ち上げて外部の雑多な影響を排除し、所望のコードを実行できる環境を容易に、確実にセットアップできるようにするのがDockerです。
ここまで言っておきながら、僕自身もまだ導入できていないので肩身が狭いのですが、現在DockerもGit/GitHub同様、エンジニアの義務教育となっているため、早めに身につけておくに越したことはないでしょう。
以下に、参考になりそうな記事を貼っておきます。

https://qiita.com/yuya_sega/items/0fb78b064a6d64fe0979
　

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アプリケーションロードマップになります。
各々のケースに合わせて修正が必要になるとは思いますが、大筋はこの通りなので、ぜひ参考にしてほしいです。
もう一度まとめておくと、

1. 静的なWebアプリを作る (HTML+CSS / JavaScript)
2. 動的なWebアプリを作る (任意の言語: Java, Python(Django) etc...)
3. Webサーバーについて学ぶ (AWS, Azure, etc...)
4. Webサーバーにアプリケーションをデプロイする

という流れです。とにかくやってみて、続けることが大事なので、自分が楽しいと思ったところから始めてみてください。
また、何か質問があればできるだけ力になりたいと思っているので、僕で良ければとりあえず質問してみてください。

オマケ

先日、個人開発でWebアプリを作成しました！
まさにこのロードマップに従って作成したアプリとなっており、概要としては「コーヒーの味を維持しながら、量を変えられる変換器」となっています！
コーヒーを普段いれる方で、「美味しいいれ方はあるんだけど、200mlじゃなくて300ml作りたいんだよな...」というような経験がある方、是非お試しください！