デザイナーにもWEBプログラミングがわかるように買物や料理に例えてみた

プログラムをしたことがない、またはあまりわからないという人に対して、どういったものなのかを伝えるにはどうしたら良いか。

それを考えてみた。

今回は、WEBプログラミングの話、ホームページを表示したり、その中でアニメーションさせたりするのが主な役割。

ここでいきなり、「Javascript」がどうとか、「データベース」がどうとか言っても、さっぱりわからない人もいると思います。

そこで、日常で行われる「買物」や「料理」で、例えてみたら流れはわかるんじゃないかと考えてみました。

大まかな流れ

WEBプログラミングの流れを、買物から料理を出すところまでの5つの項目で例えてみます。

買い物お手伝いの紙冷蔵庫台所食卓テーブル

買い物(インプット)

まずは買い物、スーパーや八百屋などで食材を手に入れます。

・牛肉
・豚肉
・カレー粉
・卵
・にんじん
・ナス
・みそ
・たまねぎ
・アイス

今回はこれらの食材。

お手伝いの紙(SQL)

この「お手伝いの紙」がプログラミングの肝と言っても過言ではありません。

買ってきた食材を、子どもにお手伝いをしてもらって冷蔵庫に入れてもらうことを思い浮かべてください。

通常なら口頭で「アイスを冷凍庫に入れといてー」と言うところですが、今回は紙に書いて子どもに渡したと思ってください。簡単にいうと指示書です。

・カレー粉、卵を冷蔵庫に入れといて。
・アイス、みそを冷凍庫に入れといて。
・牛肉、豚肉をチルド室に入れといて。
・にんじん、ナス、たまねぎを野菜室に入れといて。

今回はこのような指示です。

冷蔵庫(データベース)

お手伝いの紙を元に、冷蔵庫に正しく食材を入れると、

・冷蔵庫には、カレー粉、卵
・冷凍庫には、アイス、みそ
・チルド室には、牛肉、豚肉
・野菜室には、にんじん、ナス、たまねぎ

が入っていることになります。

台所、料理(プログラム)

買ってきて冷蔵庫に入れておいた食材を使って料理をします。これがプログラムに当たります。

ここで冷蔵庫から取り出す時に、再び「お手伝いの紙」が登場します。

・冷蔵庫から、カレー粉を取って。
・チルド室から、牛肉を取って。
・野菜室から、にんじん、たまねぎをとって。

と子どもに指示をします。

食材が揃ったら、一口大に削ったり、適量を計ったり、形状を変えたりします。

食卓テーブル(アウトプット、HTML)

料理が完成したら、食卓テーブルにお披露目。

ここでも、ドレッシングやトッピングをかけたりし、て少し料理をアレンジできます。

食卓テーブル(ホームページ)に出たものを食べて(見て)楽しみます。

料理のミス(プログラミングのミス)

もし、冷蔵庫に入れるものが違っていたり、出した料理に違うものが入っていたり、見た目がおかしいことになっていたりすると、

それはプログラミングのミスということになります。


WEBデザイナーは、この食材の形状を変えたり、トッピングをするところのお手伝いをしているということになります。