プログラミングを始めたいと思っても、最初に何から学べばいいのか迷いやすいです。
HTML、CSS、JavaScript、PHP、WordPressなど、名前だけでもたくさんあります。
この記事では、WEBプログラマーを目指す初心者向けに、独学で学ぶ順番をまとめます。
WEBプログラマーを目指すなら、最初はHTML/CSSから始めて、次にJavaScript、Git/GitHub、WordPressへ進む流れが分かりやすいです。
プログラミング初心者が最初に決めること
最初に決めることは、「何を作れるようになりたいか」です。
プログラミングといっても、作れるものはいろいろあります。
たとえば、Webサイト、Webアプリ、スマホアプリ、ゲーム、業務システム、AIを使ったツールなどがあります。
WEBプログラマーを目指すなら、まずはWebサイトやWebアプリに関係する技術から学ぶのが分かりやすいです。
いきなり全部の言語を学ぶ必要はありません。
最初は、Webページを作るためのHTML/CSSから始めるのがおすすめです。
HTMLとは
HTMLとは、Webページの内容や構造を作るための言語です。
正式には「HyperText Markup Language」といいます。
Webページにある見出し、文章、画像、リンク、リスト、表などは、HTMLを使って配置します。
たとえば、ブログ記事のタイトルは見出し、本文は段落、他のページへ移動する文字はリンクとしてHTMLで書きます。
HTMLは、Webページの見た目を細かく整えるためのものではありません。
どこに見出しがあるのか、どこが本文なのか、どこに画像を置くのか、といったページの骨組みを作る役割があります。
たとえば、HTMLでは次のように書きます。
<h1>はじめてのWebページ</h1>
<p>これはHTMLで書いた文章です。</p>
<a href="https://example.com">リンクはこちら</a>このようにHTMLを書くことで、ブラウザに「これは見出しです」「これは文章です」「これはリンクです」と伝えることができます。
CSSとは
CSSとは、Webページの見た目を整えるための言語です。
正式には「Cascading Style Sheets」といいます。
HTMLで作った見出しや文章、ボタン、画像などに対して、色、文字サイズ、余白、配置、背景色などを指定できます。
HTMLだけでもWebページは表示できますが、そのままだと見た目はかなりシンプルです。
CSSを使うことで、読みやすく、見やすいデザインに整えることができます。
たとえば、CSSでは次のように書きます。
h1 {
color: blue;
font-size: 32px;
}
p {
line-height: 1.8;
}このように書くと、見出しの色や文字サイズ、文章の行間などを変えることができます。
HTMLとCSSの違い
HTMLとCSSの違いは、役割で考えると分かりやすいです。
HTMLは、Webページの中身や構造を作ります。
CSSは、その見た目を整えます。
- HTML：見出し、文章、画像、リンクなどを配置する
- CSS：文字色、余白、背景色、配置などを整える
最初はHTML/CSSから始める
WEB系を目指すなら、最初はHTMLとCSSから始めるのがおすすめです。
理由は、Webページの基本になるからです。
JavaScriptやPHP、WordPressを学ぶ場合でも、HTML/CSSの知識があると理解しやすくなります。
HTML/CSSで作れるもの
- 自己紹介ページ
- 簡単なブログ風ページ
- お問い合わせページ
- サービス紹介ページ
- ポートフォリオサイト
- ランディングページ
最初はきれいなサイトを作るより、構造を理解することが大事です。
次にJavaScriptを学ぶ
HTML/CSSに慣れたら、次はJavaScriptを学びます。
JavaScriptを使うと、Webページに動きをつけられます。
たとえば、ボタンを押したら表示を変える、入力内容をチェックする、メニューを開閉する、といった動きです。
JavaScriptで学ぶこと
- 変数
- 条件分岐
- 繰り返し
- 関数
- 配列
- オブジェクト
- DOM操作
- イベント処理
最初から難しいフレームワークに進まなくても大丈夫です。まずは素のJavaScriptで、簡単な動きを作れるようにするのが大事です。
GitとGitHubも早めに触る
WEBプログラマーを目指すなら、GitとGitHubも早めに触っておくといいです。
Gitはコードの変更履歴を管理するための道具です。
GitHubは、Gitで管理したコードを保存・公開できるサービスです。
- GitHubアカウントを作る
- リポジトリを作る
- ファイルをアップロードする
- 変更を保存する
- ポートフォリオを公開する
WordPressも学ぶと仕事につながりやすい
WEBプログラマーを目指すなら、WordPressも学んでおくと役立ちます。
WordPressは、ブログや企業サイトなどでよく使われているCMSです。
- ブログを作る
- 会社のホームページを作る
- 固定ページを編集する
- テーマを調整する
- お問い合わせフォームを作る
- 簡単なカスタマイズをする
PHPまたはReactに進む
HTML/CSS、JavaScript、Git/GitHubに慣れてきたら、次は目的に合わせて学ぶ内容を選びます。
WordPressを深く学びたいなら、PHPを学ぶと理解しやすくなります。
Webアプリを作りたいなら、ReactなどのJavaScriptライブラリを学ぶ選択肢もあります。
学習に使うもの
- Progateなどの入門サービス
- YouTubeの入門動画
- HTML/CSSの入門書
- Udemyの初心者向け講座
- 公式ドキュメント
教材を増やしすぎると迷いやすいので、最初は1つ決めて最後まで進める方がいいです。
独学で挫折しやすいポイント
- 何から学ぶか決められない
- エラーが出た時に止まってしまう
- 作りたいものがないまま教材だけ進める
特に、教材を見ているだけだと身につきにくいです。小さくてもいいので、自分で手を動かして作ることが大事です。
最初に作るもの
最初に作るものは、難しくなくて大丈夫です。おすすめは、自己紹介ページです。
- 名前またはニックネーム
- 簡単なプロフィール
- 学習中の言語
- 作ったもの
- お問い合わせリンク
WEBプログラマーを目指す学習順番
- HTML
- CSS
- JavaScript
- Git/GitHub
- WordPress
- PHPまたはReact
- ポートフォリオ作成
すべてを一気にやる必要はありません。まずはHTML/CSSで1ページ作るところから始めるのが現実的です。
最初の目標
最初の目標は、完璧な知識を身につけることではありません。まずは、自分で1ページ作れるようになることです。
- タイトルがある
- 自己紹介文がある
- 画像がある
- リンクがある
- 背景色や文字サイズをCSSで変えている
まとめ
プログラミング初心者がWEBプログラマーを目指すなら、最初はHTML/CSSから始めるのがおすすめです。
HTMLはWebページの構造を作る言語です。
CSSはWebページの見た目を整える言語です。
HTML/CSSに慣れたら、JavaScript、Git/GitHub、WordPressへ進むと、Web制作やWebアプリの理解につながります。
最初から完璧を目指す必要はありません。まずは小さなページを1つ作ることから始めてみましょう。
