はじめに
先日、初めてWebアプリを開発＆リリースしました！
KONAMIの音ゲー「REFLEC BEAT plus」のクリアランク管理サイトです。
10年くらい前に流行ったゲームで正直もうオワコン化していますが、界隈にちょっとだけ反響を呼ぶことができました。（利用してくださった方々ありがとうございます！）
それでは、表題の通り、ここまでにやってきたことについて書いていこうと思います。
背景
- 文系学部（国文科）卒・社会人2年目
- 学生時代に応用情報合格（コードはほぼ書けなかった）
- 業務内容はベンダーのディレクションなので一ミリもコードを書かない
- 2025/3/20頃からHTMLの学習開始→6/1にリリース🎉
執筆目的
- 自分がやってきたことを振り返りアウトプットするため
- 同じようなことを考えている人に参考にして欲しいため
対象読者
- エンジニア就活・転職のためにWebアプリを作ってみたいという方
- 参考書メインでコスパ良く学習したい方
本題
IT全般に関する基礎知識
本当に未経験からいきなりWebアプリ開発となると、途中で知らない単語や考え方が無限に出てきて挫折する可能性が高まります。そのため、一旦ITの全体像を体系的に知っておくのがおすすめです。
学習には以下の参考書を使いました。
ITパスポートでもいいですが、ビジネス寄りで技術的要素がやや薄いので基本情報がおすすめです。私は応用情報までやりましたがアプリ開発という観点ではオーバーワークです。
特にプログラミング、ネットワーク、データベース、セキュリティ、システム開発技術の章はアプリ開発に直結します。
ここではまだ特定のプログラミング言語でなく、擬似言語のまま学習しても大丈夫です（変数、配列、条件分岐、繰り返し、関数の考え方は最低限理解しておくように！）。実際の言語はのちにJavaScriptとPHPという言語を学びます。
また、「Webサイトの仕組み」は自分で図を書いて説明できるレベルにしておきましょう。
【キーワード：クライアント、サーバー、HTTP、データベース】
Linuxコマンド
Web開発にあたって必ずLinuxコマンドというツールを使います。
今は何言っているかわからないと思いますが、とりあえずこの10個覚えておけば後はなんとかなります。
| コマンド | 概要 | 用途例 |
|---|---|---|
ls |
ファイル・フォルダの一覧を表示 |
ls, ls -la
|
cd |
ディレクトリの移動 |
cd src, cd ..
|
pwd |
現在の作業ディレクトリを表示 | 今どこにいるか確認 |
mkdir |
新しいフォルダを作成 | mkdir my-app |
rm |
ファイルやフォルダを削除（※慎重に） |
rm index.html, rm -r folder
|
touch |
空のファイルを作成 | touch index.html |
cat |
ファイルの中身を表示 | cat .env |
code . |
VSCodeで現在のフォルダを開く |
code .（VSCode CLIが必要） |
cp |
ファイルをコピー |
cp a.txt b.txt, cp -r folderA folderB
|
mv |
ファイルを移動または名前変更 |
mv old.txt new.txt, mv file.txt ./backup/
|
HTML / CSS
HTMLはWebサイトの構造を決定するマークアップ言語です。
CSSはHTMLを装飾するためのスタイルシート言語です。
…これだけ言っても分からないと思うので少し変わった例を挙げます。
まず、学校を思い浮かべてみてください。
どこの教室をどこの学年・クラスが利用するかを決めたり、学年・クラスに誰がいるかを決めるのがHTMLです。
それに対し、特定の学年・クラス・個人などに指示を出すのがCSSです。
「1年生は青、2年生は赤、3年生は緑のジャージを着てください」「3年2組は学級閉鎖なので誰も学校に来ないでください」「Bくんは髪を短くしてください」のようなイメージです。
HTML / CSSの学習には以下の参考書を使用しました。
参考書に取り組む際には、いきなり全てのHTMLタグやCSSのプロパティ名を暗記しようとしなくてもいいです。
暗記というよりは、参考書のコードを写経しながらどのタグやプロパティが画面のどこに反映されているのか理解しながら進めていきましょう。
また、ここまでやると既存のサイトの構造がなんとなくわかると思います。開発者ツールでどこかのサイトの構造を調べてみましょう。
UIデザイン（Figma）
UIデザインツールは色々ありますが、私はFigmaを選びました。
Figmaは無料かつブラウザ上でも使えるため、初心者へのハードルが低くておすすめです。
Figma学習には以下の参考書を使用しました。
流れに沿って架空のポートフォリオサイトやECサイトのUIを作っていき、身体で覚える感じに近いです。
デザインするときにHTML/CSSを想像しながら作っていくと力がつくのでおすすめです。
JavaScript
前述したHTMLやCSSでは「静的サイト」を作ることができます。静的サイトとは、誰がアクセスしても同じ内容が表示されるサイトのことです。（例：阿部寛のホームページ）
一方、JavaScriptを使うと「動的サイト」を作ることができます。動的サイトとは、ユーザーの操作や何かしらのイベントをきっかけにHTMLやCSSを書き換え（るように見せ）ることで、ユーザーによって違う画面が表示されるサイトです。（例：Amazon）
学校の例を出すと、「もし客が来たら校長を呼び出して対応させてください」「4時になったら全校生徒が部活を始めなさい」といった感じです。
JavaScriptの学習には以下の参考書を使用しました。
ゴリゴリにロジックを組むというよりはデザイナー向けのJavaScriptといった感じで、Webサイトで動きを出すための方法を中心に学びます。プログラミング初心者でも拒絶反応が少なく学べます。
のちにフレームワークをやるのでJavaScriptの理解は一旦これで十分だと思います。
学習の際にはただ写経するだけでなく、どの構文がどう反映されているのか理解しながら進めましょう。HTMLやCSSについても、ただ写経するだけでなく、HTMLやCSSはどうなるのか一旦自分で想像しながら読み進めるとアウトプットにもなります。
また、競プロ（Paiza, AtCoder）などでアウトプットして慣れていくのがおすすめです。条件分岐や繰り返しといったプログラミング的な考え方に自然と慣れていくと思います。
Vue.js
Vue.jsはJavaScriptのフレームワークです。フレームワークとは、元々の言語を書きやすくするためのツールです。
JavaScriptのフレームワークにはReact, Vue.js, Angularなどいろいろありますが、なぜVueを選んだかというと、この中で最もシンプルで簡単らしいからです。Vueは設計思想がシンプルで、初学者の自分にも取っ付きやすい印象でした。
Vue.jsの学習には以下の参考書を使いました。
↑とても分かりやすかったですがVue2.5だったため知識としてはあまり使えず…
↑難しいですがVue3の基本的な書き方や機能が網羅的に身に付きました。
Vue.jsは「コンポーネント指向」という、少し特殊な書き方をします。一般的にはHTML, CSS, JavaScriptは分けて書く構成が普通ですが、Vueではコンポーネントという単位に分けて、一つのコンポーネントファイルに対しHTML, CSS, JavaScriptをまとめて書きます。学校単位で校則が決まっているのが普通のところ、教室単位で独自に校則を管理しているようなものですね。
学習の際には、どのようなデータの流れで画面に表示されるに至るのか、参考書のコードに丸や矢印を書き込みながら理解していくのがおすすめです。やるべきことが多いので丸暗記しようとしなくていいです。
PHP
PHPはバックエンド（サーバーサイド）の言語です。
フロントエンドのユーザー（クライアントサイド）からの入力（リクエスト）に対し、サーバーから何かしらのレスポンスを返す構造にしたい時（データベースを用いる、ログインを行うなど）、つまり単なるWebサイトではなくWebアプリを作りたい時に必ず使います。
サーバーサイド言語にはPHP, Ruby, Pythonなど色々ありますが、将来WordPressもやりたいと考えているならPHPがおすすめです。また、後述するLaravelが万能な点もおすすめできる理由です。
PHPの学習には以下の参考書を使いました。
これまでと同じように、ただ写経するだけでなく、どの構文がどう反映されているのか理解しながら進めましょう。
ここでもPaizaなどでアウトプットして慣れていくのがおすすめです。
Laravel
LaravelはPHPのフレームワークです。ルーティング、認証、DB操作などを簡単に書ける仕組みが最初から揃っています。
例えば私はLaravel Breezeを使ってWebアプリに認証機能を実装しました。堅牢なセキュリティの認証機能を自前で作っていたらとても大変ですし、何より脆弱性が高まってしまうのでこれはとてもありがたかったです。
Laravelの学習には以下の参考書を使いました。
とてもわかりやすいですがバージョン10と11以降で結構違うので注意です。
もうすぐバージョン12（最新版）対応版が出版されるようです↓
やることが盛り沢山ですが、コードの意味を理解しながら着実に進めていきましょう。
GitHub
GitHubというソースコードのバージョン管理ツールについても学んでおきましょう。一人で開発していたら気にならないかもしれませんが、複数人で開発する際に同じソースコードをいじって壊れてしまうなどのバグを防ぐために使います。
また、個人開発でもGitHubでソースコードを公開することで副業のクライアントや転職時の志望企業の人にコーディング力をアピールできるというメリットもあります。
GitHubの学習には以下の参考書を使用しました。
目次がコマンドと内容の一覧になっていてとても使いやすくおすすめです。
まとめ
未経験からWebアプリを作るために、自分が実践した主な学習ステップは以下の通りです。
- ITの全体像の把握（基本情報技術者試験）
- Linuxコマンドの習得
- HTML/CSSの基礎
- UIデザイン（Figma）
- JavaScript（DOM操作・基本ロジック）
- Vue.js（SPA開発）
- PHP（バックエンド）
- Laravel（フレームワーク）
- GitHub（コード管理とポートフォリオ公開）
長い道のりでしたが、学んだことを活かしてアプリが段々と出来ていく過程はとても楽しかったです。
今後はNuxt.js（Vueをもとに作られたフレームワーク）やDocker、AWSについても学んでいこうと思います。
この記事が少しでも参考になれば幸いです。