WEBプログラミングとは?動画でわかりやすく解説!【初心者向け】

プログラミングってなに?図解でわかるWEBプログラミング超入門【初心者向け】

アルパカ君
アルパカ君

プログラミングってなんだろう?HTMLとPHPの違いがわかりません。WEBエンジニアになるための勉強方法が知りたいです。

 

こういった疑問にお答えします。

 

昨今プログラミングに興味がある方が非常に増えています。

 

今後も重宝されるスキルであるプログラミングを学びたいと思っている方も多いのではないでしょうか?

 

昔の僕も同じようなことを思っていたのですが、何から始めればいいのかわからず結局やらないまま終わってしまいました。

 

そこで今回はプログラミングに興味がある方向けに、プログラミングの概要やどのように勉強すればいいのかについて図解でわかりやすく解説します。

 

記事の内容は以下の通りです。

 

・プログラミングとは何なのか

・WEBページが表示される仕組み

・どんな技術が使われているのか

・プログラミングは何から勉強すればいいのか

 

動画でも解説しているので、見やすい方でみてみてください。

 

 

WEBプログラミングとは?

WEBにおけるプログラミングというのはざっくり言ってしまえば「WEBサイトを作る作業」になります。

 

具体的にはヤフーやクックパッドなど普段皆さんの見ているサイトはプログラミングによって作られています。

 

WEBページが表示される仕組み

WEBサイトが表示される際には、クライアントそしてサーバーという二者間でやりとりすることでWEBページが表示されるようになっています。

 

クライアントというのは普段WEBサイトを見ている私たちユーザーのことを指し、一方でサーバーはWEBサイトを提供する側です。

 

例えばYahoo!ならのYahooのサーバー、クックパッドならクックパッドのサーバーがあります。

 

クライアントとサーバーを紐付ける際にはURLが使用されます。

 

ブラウザの検索欄に「yahoo.co.jp」と入力するとヤフーのWEBサイトが表示されますが、この際にはヤフーのURLを打ち込むことによって「ファイルをください」という要求をサーバー側にしています。

 

そしてこの要求を受け取ったサーバーが、返信としてユーザーにファイルを返す仕組みになっています。

 

ユーザーはサーバーからファイルを受け取ることでWEBページを表示することが可能です。

 

このユーザー側に表示されるファイルを作るのがWEB系のエンジニアやウェブデザイナーのメインの仕事になります。

 

厳密にはもう少し色々ありますが、ざっくりイメージとして「ユーザーからの要求に対する返答となるファイルを生成する」ことがプログラミングによって行われているという風に考えてもらえればいいかなと思います。

 

ここからはこのファイルを生成する上で何が必要なのかということについてみていきます。

 

WEBプログラミングに必要な技術

このファイルの生成には「言語」と呼ばれるものが必要です。

 

言語には「HTML」、「CSS」、「PHP」、「Ruby」「Python」など非常にたくさんの種類があります。

 

こういった言語を組み合わせて使うことでWEBサイトが作られています。

 

ただこれは昔の僕も思ったことですが、最初の頃は言語の数が多すぎて「違いがよくわからなかったり、どれからやればいいのかというのが
分からない」という方も多いのではないでしょうか?

 

これらの言語には役割の違いがあり、以下のように分類することができます。

 

枠ごとに役割は異なり、例えば 「HTML」と「CSS」は全く別物で「CSS」と「PHP」も全く別物になります。

 

同じ枠内のものに関しては比較的機能が似ているので例えば PHPとPythonといったところは比較的機能が似ています。

 

なおこの紫の枠のものがプログラミング言語と呼ばれます

 

これはよくある勘違いですが、実はHTMLとCSSはプログラミング言語ではありません。

 

ここはよく間違えがちなので注意しておいてください。

 

ここからはこの枠組みごとにどういった違いがあるのかどういった役割があるのかについて説明します。

 

HTMLの役割

HTMLはプログラミングにおいて最も基礎となるものです.

 

プログラミングを家づくりに例えるとHTMLは家の骨格にあたる部分になります。

 

家を作る際にはまず柱から作っていくと思いますが、それと同様にプログラミングにおいてはこのHTMLが最も基礎となるというような
ふうに思ってください。

 

CSSの役割

CSSの役割はデザインです。

 

これも家づくりに例えると「家の大きさ」、「形状」、「色」などの部分を決めるのがCSSになります。

 

CSSに関してはプログラマーというよりはWEBデザイナーが使うことが多い言語です。

 

このCSSもこちらも先ほどのHTMLと同じようにWEB制作においては必須の知識になります。

 

続いてはPHP、Rubyなどのプログラミング言語について説明します

 

PHPやRubyなどのプログラミング言語の役割

プログラミング言語が何をしているのかというとウェブサイトに動きをつけるものです。

 

例えば家や建物に例えるとプログラミング言語はエレベーターやエスカレーターを作成するようなものになります。

 

家や建物において外観だけ整っていれば一応家は機能しますが、エレベーターエスカレーターなどがあったほうがより便利になるかと思います。

 

このように動きをつけてよりユーザーの体験を便利にするものがプログラミングの主な役割になります。

 

ただしあくまで便利にするためのものなので実はプログラミングゲームがなくてもweb サイトというのは成立します。

 

例えば阿部寛さんのウェブサイトはプログラミング言語一切使われていませんが、WEBサイトとして成り立っています。

 

ただしこういったサイトで検索機能をつけたいといったユーザーの動きに合わせてWEBサイトを変化させたいといったニーズがある場合にはプログラミングは必要になります。

 

ここまでHTML、CSS そしてプログラミング言語のそれぞれの役割が違うということを説明しました。

 

ここからは各言語のどれから勉強すればいいのか底部分についてお話しします。

 

プログラミングを学んでいく手順

結論からいうと、プログラミングを学んでいく際にはHTML→CSS→プログラミング言語(PHPやRuby)という順番がオススメです。

 

ここまでみてきてとおりで、WEB制作における土台はHTMLです。

 

HTMLがないとそもそもサイトが成り立たないので、まずはHTMLから学ぶといいでしょう。

 

次に必要になるのが外観に関するCSSです.。

 

どれだけ良いコンテンツを持っていてもやはり外観が良くないと中を見てくれないということはよくあります。

 

とはいえCSSは奥が深いです。

 

深い知識はいりませんが、CSSがどういったものだけは覚えておくといいですね。

 

このHTMLとCSSを抑えたら最後にPHPやRubyなどのプログラミング言語をやっていくといいかと思います

 

実際難易度もHTML→CSS→プログラミング言語(PHPやRuby)の順に上がっていきます。

 

特にプログラミング言語は環境構築が必要であったりと難易度が跳ね上がるので、まずはHTMLとCSSでWEBに慣れておくことをオススメします。

 

まとめ

ここまでプログラミングの概要についてみてきましたがいかがだったでしょうか。

 

今回はコードには触れていませんが、仕組みの部分や全体像というのは行動を書いていく上でとても大切になるので説明させていただきました。

 

この記事が参考になれば幸いです。

Office365を無料で使う方法

MicrosoftはWordやExcel、PowerPointなどのさまざまな便利ツールを提供していますが、費用がかかるイメージがありますよね。

でも実はこれらを無料で利用できる方法があるって知っていましたか?


▼ 下のページでやり方をまとめています

人気記事

no image 1

「エクセルやパワーポイントを利用したいんだけど、無料で使うことってできるのかな?」 「そんなに使用頻度は多くないからできればお金をかけずにOfficeを使いたい」 こんな疑問を解消します。 &nbsp ...

no image 2

  本記事では、Excel学習の最新おすすめ本30選を紹介します。   実は、現在Kindle Unlimitedが 「30日間の無料キャンペーン中」なので、 本記事で紹介する本は ...