Lifeblogs

情報系の海外大学に通いながら独学でWeb制作を学ぶ女子大生の学習記録

Web制作とWeb開発って何が違うの?【イメージで説明します!】

f:id:lifeblogs:20200815222255p:plain

 

こんにちは、リサです。

 

似ているようで全然違うWeb制作とWeb開発は、私も初めは勘違いしていました。

今回は、その二つを分かりやすくイメージできるように解説したいと思います。

 

 

 

Web制作とは?

f:id:lifeblogs:20200815222451j:plain

 

Web制作とは、ホームページなどの静的なWebページを作ることです。

 

 

「静的?何それ?」と思う人もいるかもしれません。
Webページには、静的と動的という考え方があります。

 

が、その前に壁に貼ってあるポスターを思い出してください。


ポスターは普通、紙でできていて当然表示される内容は変わらないですよね。
いつ見ても同じです。

 

パソコンやインターネットが普及する前は、会社の宣伝だとか事業内容の宣伝は、いってしまえばポスターのようなものでした。


貼り紙だったかもしれませんし、新聞紙の広告欄だったかもしれません。

 

 

でも重要なのは、編集して刷り直さない限り、

必ず同じ内容が表示されているということです。

 

 

ところが、パソコンやインターネットが普及するようになり、電子化したものがホームページだと思ってください。


ポスターがただ電子的にスクリーンに映し出されている、そういったイメージです。

 

それが、ホームページというやつです。
皆さんも何かしら見たことありますよね。

 

そして、それを作ることがWeb制作なのです。

 

 

Web制作では、主にHTML/CSSというマークアップ言語を使います。

 

「なにそれ?」と思った方は、画面の中央らへんでいいので右クリックをして、「検証」をクリックしてみてください。

 

f:id:lifeblogs:20200815223221p:plain

 

上半分になにやら、よく想像するようなコードが表示されると思います。
それが、マークアップ言語で書かれたコードです。
<>こういったやつです。


Webページの内容を内部的に解釈して処理できるようにするための言語です。

 

 

また、決まった範囲でアニメーションなどの動きをつけたいといった場合にはJavaScriptという言語が使われます。

 

 

したがって、Web制作はより(視覚的、実用的)デザインを重視した活動だと言えると思います。

 

 

Web開発とは?

f:id:lifeblogs:20200815223628j:plain

 

じゃあWeb開発は違うの?と思うかもしれません。

 

Web開発は違います。


違う、というかWeb制作の延長線上にあると言いえるかもしれません。

 

 

というのも、Webでは、
いつアクセスしても表示内容が変わらない静的ページがある一方で、
ユーザー(サイトにアクセスした人)が色々とクリックしたり入力したりして、サイト内をナビゲートをすることにより、表示内容が変わるものがあるんです。

 

そのような変化、変動があるWebページを、動的なWebページといいます。

 


AmazonのネットショッピングのWebページは動的なWebページです。

 

私がログインしている状態と、あなたがログインしている状態では、あらゆるところで表示内容が違ってくるからです。

 

ログインした時点でユーザーごとに表示内容が異なるのです。

 

実際に開いてみればわかります。

 

f:id:lifeblogs:20200815224256p:plain

 

左の「あなたのためのトップリンク」のすぐ上には、「こんにちは、」の後に名前が表示されています。

 

ユーザーが山田さんなら「こんにちは、山田さん」、鈴木さんなら「こんにちは、鈴木さん」と表示されます。

 

ユーザーが行った「ログイン」というアクションによって、表示内容がユーザーに合わせて表示されているのです。

 

 

このような表示を、動的な表示、動的表示というのです。

 

そしてこのような動的ページは、ただWebページを表示するという単純なことでは実現できません。

 

「こんにちは、○○さん」とユーザーによって表示内容を変えるには、
プログラムを組む必要があるからです。

 

 

例えば、このあいさつと名前の例では、まずユーザーの情報(名前)を受け取らなければいけません。


通常ログインする(アカウントを作る)とその情報が受け取れます。


そしてその受け取った情報を後でまた取り出したりできるように保管しておく必要があります。

 

ユーザーがそのページにアクセスしたときに、「こんにちは、○○さん」の○○
の部分にユーザーの情報のから名前の情報を取り出してあてはめてページを完成させたら表示して、

という命令をプログラムが実行して初めて、実現するのです。

 

 

このようなことができるWebページは通常Webアプリケーションといわれるものです。


このようなものを作ることがWeb開発なのです。

 

 

Web開発では、情報を扱ったり、情報をもとにプログラムの命令を書くことに特化したプログラミング言語を使います。

 

PythonとかRubyとか沢山の言語があり、それぞれに特徴があります。

 


<ではまた今度、Salut!!>

 

 

lifeblogs.hatenablog.com

 

lifeblogs.hatenablog.com