【初心者向け】Web製作をする上で学ぶべきプログラミング言語【図解あり】
こんにちは、氷犬（@icedog_410）です。
こんな疑問に答えます。
僕はWeb制作ができるようになるため、完全に独学でプログラミングを学んできたという過去があります。
独学ならではの挫折や苦しみも味わいましたが、その経験をもとに記事を書いてみました。参考になれば幸いです。
クリックできるもくじ
Web系エンジニアになるために必要なプログラミング言語
Web系エンジニアとは、Web製作の仕事が中心のエンジニアのことです。
フロントエンドエンジニアともいいます。
Web系エンジニアになるために必要なプログラミング言語は『５種類』です。
- HTML/CSS
- Javascript/jQuery
- PHP
- Bootstrap（フレームワーク）
- WordPress（Web管理ツール）
※正確に言えば、BootstrapとWordpressはプログラミング言語ではないです。
ひとつずつわかりやすく解説していきます。
プログラミング言語の違いを解説【図解あり】
ひとくちにプログラミング言語とは言っても種類がいろいろあります。
最初はどんな違いがあるのかよくわからないと思うので、ひとつずつ見ていきましょう。
１：HTML/CSS
HTML/CSSはWebページの見た目を作るための言語です。
Webサイトのレイアウトを決めたり、色をつけたりなど、自由にデザインすることができます。
まず、見た目を作らないことには何も始まらないので、HTML/CSSの知識は絶対に必要です。
HTMLでホームページの土台を作って、CSSでレイアウトを整えて装飾するようなイメージ。
作業量は体感でHTML：CSS＝３：７くらいですね。
細かい点はさておき、慣れてしまえば割と簡単に扱えるようになります。
ちなみにHTML/CSSはWebサイトの構造を作る言語なので、正確にはプログラミング言語ではなく、マークアップ言語といいます。
２：JavaScript/jQuery
Javascriptはざっくり言うと、「HTML/CSSに動きをつけるための言語」です。
HTML/CSSだけで作ったページは基本的に見た目を動かすことができません。
たとえば、ボタンをクリックしたら画像が入れ替わるような動きはJavaScriptを使って作ります。
jQueryはJavaScriptを扱いやすくしたもの
しかし、Webサイトでよくあるスライドショーなどの動きをJavaScriptでゼロから書こうとすると、コード量が多くなって大変です。
そこで、JavaScriptでよく使うシステムをより簡単に扱えるようにしたものがjQueryです。
jQueryを使うと少ないコード量で複雑な動きを実装できるようになります。
３：PHP
たぶん、PHPは「調べてもどういう言語なのか」がイマイチピンと来ないと思います。
実際に扱ってみるとわかるのですが、PHPは「サーバーに保存したデータを扱うための言語」ですね。
たとえば、このブログ記事は普段サーバーに保存されていて、「対応するURLが呼び出されると、PHPがサーバーからこの記事を引っ張って表示する」ような仕組みになっています。
PHPを使うと、サーバーをデータから取り出したり、逆にWebページに入力されたデータをサーバーに保存することができます。
あとで説明しますが、WordPressを動かすのにもPHPが使われています。
４：Bootstrap（フレームワーク）
BootstrapはTwitter社が作ったHTML/CSSのフレームワークです。
先ほど「Javascriptでよく使う動きをまとめたものがjQuery」と説明しましたが、BootstrapはそのHTML/CSS版だと思ってください。
Bootstrapを使うと、簡単に今風のデザインを作ることができます。
こんなボタンをゼロから作るのは多少手間なんですが、Bootstrapなら１行コードを書くだけで作れてしまいます。
世界中で使われているフレームワークなので、使えるようになっておいた方がいいですね。
５：WordPress（Web製作・管理ツール）
WordPressは世界中で使われている、Webサイトを楽に制作・管理するためのツールです。
Webサイトをコードのまま扱おうとするとめんどくさいんですが、WordPressを使うとWebサイトのメンテナンスが楽になります。
このブログもWordPressを使って管理していますね。
WordPressには、HTML/CSS/Javascript/PHPが使われていて、この４つの言語を扱えるようになると実質WordPressも使えるようになります。
「PHPはサーバーにあるデータを取り出すための言語」ですが、WordPressの構造はこんな感じです。ファイル名がphpで終わっているのがわかるかと思います。
テーマにもよりますが、OPENCAGEのテーマは基本的にBootstrapが使われているみたいです。
【コラム】Rubyってどうなの？
ところで、プログラミング学習について調べるとRubyが人気らしいけど、こっちを勉強したらダメなの？
結論からいうと、「興味があるなら勉強してもいい」と思います。
RubyはPHPと同じように、サーバーのデータを扱うための、いわゆる「サーバーサイドの言語」です。
学習サイトでもよく取り上げられますし、メインの言語として推されていることも多いですよね。
PHPの方が人気だが、興味のある方を勉強するべき
ただ、勢いが増してきたのは最近なので、まだPHPの方が人気なのかなーと思います。
まあ、これからRubyの案件も増えてくるでしょうし、興味があるならRubyを勉強するのも悪くないですね。
「Web製作」という観点から言うと、WordPressがある分だけPHPの方がおすすめです。
実を言うと、僕もRubyやRailsをダラダラと勉強していた時期があったのですが、「別にWebサービス作りたいわけじゃないな」と気づいてやめた、という経緯があります。
学習する順番は「HTML/CSS→JavaScript→PHP」
ここまで、「HTML/CSS/JavaScript/jQuery/PHP/Bootstrap/WordPressを勉強するといい」と説明してきました。
学習する順番はこんな感じがおすすめです。
- HTML/CSS：見た目を作る
- Bootstrap：早く作れるようになる
- Javascriptの基礎：jQueryを扱うために
- jQuery：ページに動きをつける
- PHP：データを管理する
- WordPress：Webサイトを管理できる
完全にマスターする必要はなくて、「なんとなくわかってきたかなー」と思ったら次に行きましょう。
たぶん、進めていくうちに自分なりにこうした方がいい、というのが見えてくると思います。
学習サイト・書籍・Googleをうまく使って学習していきましょう。
最初はProgateがおすすめ
プログラミング学習は最初で挫折しがちなので、本当に簡単なところから始めた方がいいです。
Progateならスライド形式でわかりやすく、重要なところをピンポイントで学習できるのでおすすめです。
プログラミングは動画を使って学ぶのが効率的
プログラミングを学ぶためには、以下のようなツールを活用するのがおすすめです。
- 学習サイト：Progate・ドットインストール
- 書籍：Amazonで購入する
- 動画：YouTube・Udemy
人それぞれ相性があると思うので、とりあえずいろいろ触ってみて、「これなら続けられるな」と思ったもので勉強してみてください。
関連記事
HTMLとかJavascriptとかいろいろあって、違いがよくわからないです。
初心者でもわかりやすいように誰か解説してください。