入門

【初心者必見】Webサイト制作に必要なスキル

プログラミング初心者の方が、始めやすく、かつ早くで案件を獲得しやすいものがWeb制作です。

Web制作とは簡単に言うと、ホームページを作る作業です。

個人レベルでもホームページを作るようになった現在において、このWeb制作の需要は増えることはあっても減ることはありません。

また企業レベルでも自社サイトを作るようになった企業も多いです。

もし、特に作るものにこだわりがなく、プログラミングを何から学び始めようか、と悩んでいる人がいればモチベーションが保ちやすいかつ需要のあるWeb制作から学び始めることがオススメです!

ではWeb制作したいとなれば、何を学べばいいのでしょう?

学ぶべきはズバリ、HTML、CSS、Javascript(jQuery、React)、PHPの四つです!

え!一つの言語でできないの!?

と思った方もいるかと思います。

いくつもの言語を使用しているのは、一つ一つの言語で役割を分担しているからなのです!

HTMLはサイトを構造化して書くことを、

CSSはサイトを装飾することを、

JavaScript(jQuery、React)はサイトをユーザ側のPCで動的に変化させることを、

PHPはサイトをサーバ側のPCで動的に変化させることを、

担当しています。

難しく表現しましたが、要はHTMLは書く、CSSはデザインする、JavaScript(jQuery、React)は変化させる、PHPはサーバにあるより詳細なデータを使って変化させる、と言うようなイメージです!

でも、まだよくわからない、、、

そんな方のためにここからそれぞれの言語でできることとその学び方を紹介していこうと思います!

HTML

HTMLはサイトを構造化して書く言語です。

まずこの構造化をすることがWeb制作の一歩です!

構造化なんてしなくても文章は書けるよ!と思うかもしれません。

確かに文章を書くだけだと構造化は必ずしもいるものではありません。

しかし、サイトを装飾したり動かしたりと様々な処理をかけたいときにうまく構造化されていないと、これらの処理がやりづらくなります。

つまり、別の言語を使用する際に、書きにくくなるのです。

ですので、この構造化をまず学ぶことがこれから紹介する他の言語を綺麗に書くために必要なのです!

では、どうやれば構造化を学ぶことができるのでしょうか?

この構造化を行うための一番いい方法は、信頼できるプログラミングの師匠をつけるべきでしょう!

正しく構造化できる人に学ぶことが一番大事です!

学ぶ人がいなければ探しましょう!

正しく教えてくれる人の存在はあなたのプログラミングスキルを大きく向上させてくれます!

しかし、そんな人周りにいないって人もたくさんいますよね。

師匠を見つけるために、プログラミングスクールに通うというのも一つの手ですが、値段が高いのでちょっと、、って方も多いかと思います。

そんな方は無料でプログラミングを学べるプロゲートというサービスが無料でできるのでおすすめです。

基礎的なことはこちらで学べますので、初心者が最初にやるには最適なサービスかと思います。

CSS

CSSはサイトをデザインしてくれる言語です!

デザインはサイトのイメージを作る物なので、すごく大事です!

このデザインとは、具体的には、文字の色を変えたり、文字の配置場所を考えたり、文字の大きさを変えたりといったことを指します。

Power Pointを使ったことがある方は、Power Pointを想像していただけるとわかりやすいかと思います。

文字を書いた後、配置を考えたり、色を変えたりしますよね?

この処理をきちんと行う言語がCSSです。

このCSSは最初は簡単だと思うかもしれませんが、意外と奥深いです。

最初にきちんと学ぶ必要があります。

こちらに関しても、初めはプロゲートで学ぶのが良いでしょう。

学んでいるとわからないことなどがどんどん出てくるかと思うので、そうなったら別サービスを検討すればいいと思います。

CSSを用いて唯一無二のデザインを作成しましょう!

JavaScript(jQuery、React)

JavaScriptはサイトをユーザ側のPCで動的に変化させる言語です!

この動的に変化させるというのは、わかりやすいものでいうと時間が経つとデザインが変わるサイトを想像していただけると良いかと思います。

なんかデザインが変わっていくな、というサイトを見たことありますよね?

このようにデザインが変わっていくことを、サイトを動的に変化させるといいます。

動的に変化させるサイトを作成するためには、HTMLとCSSを動的に書き換えないといけません。

この書き換えを行なってくれるのがJavaScriptなのです!

ユーザがどのようにサイトを操作すればどう書き変わるのかをJavaScriptでは記述していきます。

このJavaScriptはHTMLとCSSと違い、少し論理性が必要となってきます。

初心者がつまづき始めるのがこの言語でしょう。

プロゲートで学ぶのも良いですが、一冊なんでもいいので本屋で参考書を買うことをお勧めします。

難しいことをしようとした時につまづかないためにも、少なくとも、コードを読んで何をしているのかはわかるようにしてください。

なお、タイトルにあるjQueryとReactはJavaScriptをもっと簡単に書けるようにと作られた言語です。

原理はJavaScriptと同じなのでJavaScriptを学んでまだ元気があれば学んでみることをお勧めします。

PHP

PHPはサイトをサーバ側で動的に変化させる言語のことです!

あれ?動的に変化させるってJavaScriptでも言ってたような・・・?

PHPとJavaScriptの違いはサイトを変化させるのがユーザ側なのかサーバ側なのかというところにあります!

簡単にイメージするためには、インターネットが使える環境で動くか動かないかということを考えてみるのが良いでしょう。

例えば、サイトのデザインが変わっていくサイトなどは、急にインターネットとの接続を切ってもサイトのデザインは変わり続けていくかと思います。

こう言ったものはJavaScriptで書かれています。

一方で、サイト内検索(右上によくある虫眼鏡マークのもの)などはインターネットが切れているとできないです。

こう言ったものはPHPで書かれています。

PHPを学ぶときは参考書などを見ながら何か一つ実際に作ってみると良いでしょう。

ここまでHTML、CSS、JavaScriptを学んだあなたであれば、簡単なサイトは作れるはずです。

実戦の意味も込めて、簡単なサイトを作りながら学ぶことをお勧めします!

サーバを動かす言語は他にもrubyやpython,javaなどたくさんあります。

以下記事で他言語のサーバサイド言語を紹介しているので、興味のある方は見てみてください。

まとめ

いかがだったでしょうか。

Web制作に必要なHTML、CSS、JavaScript、PHPについて少しはイメージできたのではないかと思います。

ただ、こう言った言語は実際に書いてみないと理解できないものです。

本当のスキルはプロゲートで実戦を積みながら、自ら何かサイトを作成してみることで徐々に身についていきます。

千里の道も一歩からです。

HTMLやCSSは比較的簡単なので、まずはこちらを習得することを目指してみてはいかがでしょうか?

もし初心者で体系的に学びたいという方は、私がオンライン講座で実際に学んだ過程を以下記事で書いています。

Udemyを使って初心者から2ヶ月でWeb制作を始めるまで

参考にしてみてください。


-入門
-, , , , ,

© 2020 はやぶさエンジニア Powered by AFFINGER5