★本記事は5分で読み終えることができます。
Webサイトを初心者が制作する時に必要なプログラミングスキル4つを紹介しています。
プログラミング初心者の方が、始めやすく、かつ案件を獲得しやすいものがWeb制作です。
Web制作とは簡単に言うと、ホームページを作る作業で、筆者も様々な案件を引き受けてきました。
個人レベルでもホームページ・ポートフォリオを作るようになった現在において、このWeb制作の需要は増える一方です。
企業で自社サイトを持っていない企業はないですよね。
もし、特に作るものにこだわりがなく、プログラミングを何から学び始めようか、と悩んでいる人がいればお金に直結しやすいモチベーションの保てるWeb制作から学び始めることがオススメです！
Webサイト制作に必要な4つのスキル
ではWeb制作したいとなれば、何を学べばいいのでしょう？
学ぶべきは、HTML、CSS、Javascript（jQuery、React）、PHPの４つのスキルです！
え！Webサイトって一つのプログラミング言語で作れないの！？と思った方もいるかと思います。
いくつもの言語を使用しているのは、一つ一つの言語で役割を分担しているからです！
それぞれのプログラミング言語の役割は以下のようになります。
・HTML：サイトを構造化して書くこと
・CSS：サイトを装飾すること
・JavaScript(jQuery、React)：サイトをユーザ側のPCで動的に変化させること
・PHP：サイトをサーバ側のPCで動的に変化させること
難しく表現しましたが、HTMLでサイトの内容を作り、CSSで綺麗に見た目をデザインする、JavaScript(jQuery、React)はアクセントのためにサイトに変化をつけ、PHPでサーバにある必要な詳細なデータを取ってくる、と言うようなイメージです！
でも、まだまだよくわかりませんよね。。
そんな方のためにここからそれぞれの言語のスキルの概要・学び方を詳しく紹介していこうと思います！
HTML
HTMLはサイトを構造化して書く言語です。
まずこの構造化をすることがWeb制作の一歩です！
Webサイトは「head（頭）」「body（体）」「foot（足）」で構成されています。
まずタイトルがあり、内容がありと構造があるんですね。
この骨格をかたち作るのがHTMLとなります。
構造化なんてしなくても文章は書けるよ！と思うかもしれません。
確かに文章を書くだけだと構造化は必ずしもいるものではありません。
しかし、サイトの装飾やアニメーションなど様々な処理を行う時に、構造化が綺麗にできていないと、これらの処理がやりづらくなります。
つまり、別の言語を使用する際に、書きにくくなるのです。
ですので、HTMLによる構造化のスキルを身に着けることがこれから紹介するCSS、Javascript、PHPを綺麗に書くために必要なのです！
勉強方法
どのようにHTMLを学ぶかでですが、オススメのサービスがあります。
無料でプログラミングを学べるプロゲートというサービスです。
初心者の人にはまずやってもらいたいサービスで下の参考書と合わせて学習すれば誰でもHTMLが身につけられると思います。
CSS
CSSはサイトをデザインしてくれる言語です！
デザインはサイトのイメージを重要な要素です！
Webサイトのデザインとは、具体的には、「文字の色」「文字の配置場所」「文字の大きさ」と言う基礎的な部分から、背景、画像の透明度、行間といった細かい部分までを指します。
Power Pointを使ったことがある方は、Power Pointを想像していただけるとわかりやすいかと思います。
文字を書いた後、配置を考えたり、色を変更し、相手に見やすく伝えますよね？
Webサイトを見やすく伝えやすくするためのプログラミング言語がCSSです。
このCSSは最初は簡単だと思うかもしれませんが、意外と奥深いです。
勉強方法
最初にきちんと学ぶ必要があります。
こちらに関しても、初めはプロゲートのCSS講座で学ぶのが良いと思います。
勉強の際に、合わせて読みたい本としてHTMLと同じ書籍と
デザイナーでない人のためにデザインの基礎知識をまとめている「ノンデザイナーズ・デザインブック」もオススメです。
CSSを用いて唯一無二のデザインを作成しましょう！
JavaScript ( jQuery、React)
JavaScriptはサイトをユーザ側のPCで動的に変化させる言語です！
画面上の要素に対して「変化させるタイミング」と「どのように変化させるか」をプログラミングすることができます。
スクロールするとデザインが変わるようなサイトを見たことありますよね？
このようにデザインが変わっていくことを、サイトを動的に変化させるといいます。
動的に変化させるサイトを作成するためには、HTMLとCSSを動的に書き換える必要があります。
この書き換えを行なってくれるのがJavaScriptなのです！
ユーザがどのようにサイトを操作すればどう書き変わるのかをJavaScriptでは記述していきます。
このJavaScriptはHTMLとCSSと違い、少し論理性が必要となってきます。
勉強方法
プログラミング初心者がつまづき始めるのがこの言語でしょう。
HTMLやCSSと同様に、プロゲートで学ぶのも良いですが、この言語に関しては練習量が物を言います。
そのため、サンプルコードがたくさんのってあり、まずサンプルコードで色々な動きをやってみることをオススメしています。
ぜひ買って練習して欲しいのがこの本です。
サンプルコードが充実していて、身につけておく基礎的な要素の動きが分かります。
そして、jQueryとReact というのは、JavaScriptをもっと簡単に書けるようにと作られたライブラリです。（ライブラリとは便利ツールだと考えてください）
原理はJavaScriptと同じなのでJavaScriptを学んで、より効率的にWebサイトを作りたい人は学んで欲しい物です。
PHP
PHPはサイトをサーバ側で動的に変化させる言語のことです！
あれ？動的に変化させるってJavaScriptでも言ってたような・・・？
PHPとJavaScriptの違いは、サイトを変化させるプログラムがユーザ側にあるのかサーバ側にあるのかというところにあります！
ここは少し難しい話です。
ここでは違いをイメージできる例だけお話します。
簡単にイメージするためには、インターネットが使える環境で動くか動かないかを考えてみると良いです。
具体的には、トンネルの中に入ってしまい電波が届かない状況でも、サイトのデザインが変わっていく場合はJavasciptでプログラミングされています。
電波が届かない ＝ サーバ側にあるプログラムは繋がらないため動かない ＝ ユーザ側のプログラムが動いている ＝ Javascript
一方で、サイト内検索（右上によくある虫眼鏡マーク）などはインターネットが切れているとできないですね。
こう言ったものはPHPで書かれています。
勉強方法
PHPを学ぶときは何か一つ実際に作ってみましょう。
オススメはUdemyという動画学習サービスです。
PHPでTodoリストのサイトを作ることを目標にした初心者が始める教材があるので載せておきます。
基礎だけ学ぶ PHPプログラミング講座
ここまでHTML、CSS、JavaScriptを学んだあなたであれば、簡単なサイトが作れるはずです。
実戦の意味も込めて、簡単なサイトを作りながら学ぶことをお勧めします！
有名なWordpressはPHPで全てが作られています。
WordPressのカスタマイズや独自テーマの作成をする際にもPHPの知識が必要となるのでぜひ学んでみてください！
まとめ
いかがだったでしょうか。
Web制作に必要なHTML、CSS、JavaScript、PHPについて少しはイメージできたのではないかと思います。
ただ、こう言った言語は実際に書いてみないと理解できないものです。
本当のスキルはプロゲートで基礎を知って、自ら何かサイトを作成してみることが何よりの近道です。
千里の道も一歩からです。
HTMLやCSSは比較的簡単なので、まずはこちらを習得することを目指してみてはいかがでしょうか？
もし初心者で体系的に学びたいという方は、私がオンライン講座で実際に学んだ過程を以下記事で書いています。
参考にしてみてください。