プログラミングを始める前に知っておいて欲しいWebサイトの仕組み

2018年1月28日

 

 

どうも普段は、
割と中級者向けと言うか、
自分が試してみたことを発信していますが、
今回は時間ができたので、
プログラム初学者向けに発信していきたいと思います。

 

最近、

 

プログラミングを最初に学ぶ際に一番はじめ
に学んでおいておいた方が良いこと

 

を考えていました。
現状の答えとして、
一番最初に学んで欲しいことの一つとしての

「Webサイトの仕組み」を理解すること

についてつらつらと書いていきます。

 

これからそれなりの文字数を割いて説明しますが、

プログラミングは立体的に理解することが重要

だと考えています。

 

私がWebサイトの仕組みと言っているのはこの図のようなものを
イメージできれブラウザがリクエストを投げてからレスポンスが返され再度
ページを描画する仕組みが説明できるかということです。

これが説明できる初学者とそうではない人で
理解度に大きな違いが出ると思うので、
この重要性についても語って行きます。

 

webサイトの仕組み

 

 

プログラミング初学者はWebサイトの概要図を把握しよう

 

 

プログラミングは、
はたから見ているとひたすら画面に向かって

文字をカタカタ打ち込んでいる作業

見えますが、

実際は違います。

 

実際のところは、

 

自分の作っているプログラムがどの場所(サーバ側かクラアント側)や
どのタイミングで呼び出されるのかを想像しながら、
開発を行なっています。

それが実際に先に見せた画像のイメージになります。
(実際私が開発している際にここまで
カラフルな図は連想していないのですがw)

少し大げさに言うと

PHPのコードを触っている場合は、「今はサーバ側を触っている」
Javascriptのコードを触っている場合は「今は画面側だな」
と言うようなことを意識してコーディングしています。
(まぁこの程度なら意識下で意識する感じになるかと思いますが・・)

 

プログラミングをいきなり勉強するのもいいですが、
それと並行して瞬間的にこういったイメージができるようになるよう
意識して勉強していると、
かなりプログラミングへの理解が進むし、
ただ画面に文字を打ち込んでいく作業ではないと気づけるはずです。

 

 

プログラミング初学者は自分の居場所を見失いがち

 

 

システムの仕事をしていたり勉強していると
カタカナの言葉だったり、
アルファベットの略語がたくさん出てきてなんのことやら
全然わかりません。
(特に初学者にとってはより難しいはずです)

わからないからググって見ても、
難しくとっつきにくい言葉で書かれた文章の説明に辟易しがちです。

こういった状況が続くと自分が勉強していることはわかるけど、
なんかしっくりしないと言う状態になります。
PHPの文法とかはわかるけど
自分がどこにいるかわからない、他にどういう知識が必要がわからない
という様になりがちです。

また、
サーバーと言う言葉一つとっても
「自分がブラウザからリクエストを送った時にhtmlを返してくれるコンピュータ」
のことだと実際の構成をイメージとして理解しているのと

 

サーバとは、ネットワーク上のコンピュータの中で、
他のコンピュータ(クライアント)から要求や指示を受け、
情報や処理結果を返す役割を持つコンピュータやソフトウェアのこと。

サーバとは – 意味の解説|ITトレンドのIT用語集より引用

と字面で説明されるのでは理解度が違います。
(ここでは、説明が悪いと言っているのではなく、学習の態度として、字面で覚えるのではなく、
実際の処理のフローなどと結びつけて想像力を働かせながらが良いと言うことです。)

 

はたまた
「PHPとjavascriptの違い」を説明する場合に、
jsはクライアント側で動いてユーザのアクションに対して表示を変化させるプログラムで、
PHPはサーバ側でHTTPリクエストをさばいて、HTMLなどレスポンスを生成するためのプログラムです。

と言う本質的な説明ができるようになるには、
上に載せた画像のようなシステム全体の地図が頭に描けていることが重要です。

さらに言うと、
自分がPOST送信と言う言葉やGET送信と言う言葉を聞いた時に、
あの部分で使う技術だと勘が聞くか聞かないのでは、
物事の習得度合いや、理解度がだいぶ違ってきます。

自分の頭にWebサイトの全体図があると言うことは、
ある意味初学者にとっての地図になります。

例えば自分が今PHPのプログラミングを勉強しているのであれば
「サーバサイドを勉強している」
「UNIXコマンドを勉強しているのであれば、サーバー側のOS部分を勉強している」
と言うことがWebサイトの全体像を知っていることによって
情報を整理して習得できたり、

システム全体を立体的でよりリアル

に理解できることになります。

初学者の方は、
プログラミングの自習を続けつつも、
常に上の画像の自分はどこにいるのかということを
意識して勉強すべきです

 

 

プログラミングは必要に応じて自習が必要

 

私は一般的に「プログラミングを勉強したい」と言う人は
「アプリケーションを作りたい」と言う人だと理解しています。

が、
プログラミングを勉強した”だけ”では、
悲しいことにアプリケーション開発に十分な知識を持っている
とは言えません。

 

システム開発には、

gitでのソース管理の知識やHTML、CSS、配色、
レイアウトなどのフロントエンドの技術。
設計プロセスやプロジェクトの進め方に関する理解、
データベースのSQLなどの知識

などなど様々な技術があります。

 

その中でプログラミング(さらに言うと”プログラミング言語”)の知識しかない
エンジニアと言うのはチームとしても個人としてもシステム開発を
行う上では大きな障害になります。

 

 

覚えるべきことは多いですが、
それら全てを理解しているエンジニアと言うのはかなり希少で
ほとんどのエンジニアには自分が作りたいものや高めたいスキルによって
情報を取捨選択して自習する態度が求められます。

それらのスキルを高めるためたり知識を得たりするのには
どう学ぶかと言うのは自分で決めて行かなければなりません。

その際にも、

自分にはどの部分のスキルが足りないのか知らないのかと言う
ことが地図を持っているだけで明白になります。

 

自分の目的地を選択するのに必ず地図は必要です。

 

早いうちにシステムの全貌を意識しながら学習を進めて行きましょう。

 

まとめ

 

色々と
自分の考えていることを書きましたが
一番良いたいのは、

 

 

どのエンジニアも
自分のPCの繋がっている先のサーバやサーバ内で動いているデータベース
などを全体像を意識しながら日々の作業を行なっているということで、
プログラミング初学者にもそういった
プログラミングを立体的に理解する姿勢が求められると言うことです。

 

個人的な意見ではありますが、
エンジニアにはこれらのヴァーチャルな物体をイメージしながら
システムを開発をしていく想像力が求められます。

 

プログラミング初学者は、
PHP入門やJava入門のような技術書から学び、
プログラミングが画面にひたすら文字を打ち続ける作業に思えて
挫折してしまうことがあるように思いますが、

 

 

システム全体のことを考えながら
自分が打っているコードがそれをどのように操作しているか
考えながら勉強ができると感動度や理解度
もだいぶ違ってくるはずです。

今回は自分の頭にシステムの全体像の地図を持つことの
重要性を書きましたが、
次回以降はちゃんと仕組みについても説明してこうと思います。

では