未経験エンジニアのおすすめロードマップ(3)

IT

今日は、Web系のプログラミング言語の役割について書いていきます。

 

未経験でエンジニアを目指している方の中には、とりあえず何か勉強してみようとドットインストールやProgateでPHPやRubyを学習したことがあるのではないでしょうか。

 

私も未経験の頃、Progateで言語を選んで学習したことがあります。

 

ただ今振り返ってみるとあまり効率の良い学習ではなかったと思っています。

 

というのも、初学者のプログラミング学習ツールにありがちなのが、

言語の特性よりも言語の書き方を学ぶように設計されていることです。

どのように使われるのかわからないまま、ひたすら書き方を学習させられます。

 

学生の時に部室にあったギターを練習していたときに思ったことなのですが、

曲が弾きたいのにひたすらコードを覚えないといけないのが苦で結局続かない

あの感覚を思い出した気がします。

 

少し脱線してしまいましたが、どのように使われるから覚える、もしくは使いこなせるようになる必要があるかを理解してもらってから、プログラミング言語の書き方について学習してもいいと思います。

 

ということで本題ですが、Web系のプログラミング言語は主としてデータベースから取ってきた情報をブラウザに出力することがメインの役割になります。

 

まず、前提知識としてブラウザに表示されている情報は、

HTMLとCSSというもので描画されています。

そこに動きをつけたり処理をつけているのがJavascriptです。

この三つで大体のことはできますが、扱う情報量が大きくなったり、処理が複雑になると対応できくなります。

 

知らない方のために簡単にどういうものかを記載します。

 

HTMLはマークアップ言語といって、「＜」と「＞」で囲ったさまざまなタグと呼ばれるものを使用して

ブラウザに表示される情報を構成していきます。

 

例えば下記をメモ帳で、test.htmlとして保存して、ブラウザにドラッグ＆ドロップすると

こんにちはと表示されます。これがHTMLです。

―――――――

<html>

<head></head>

<body>

  <p>こんにちは</p>

</body>

</html>

―――――――

 

次にCSSは文字やレイアウトの装飾を担当します。

先ほどのhtmlファイルの<p>のところに style="color:red;”を追加してみてください。

―――――――

<html>

<head></head>

<body>

  <p style="color:red;">こんにちは</p>

</body>

</html>

―――――――

こんにちはが赤字になったでしょうか。

これがCSSの役割です。

 

次にjavascript

先ほどのhtmlファイルの<p>のところに id=“test”を追加して、

少し長いですが、下記を<p>の下に追加してください。

―――――――

  <script>

   document.getElementById("test").onclick = function() {

      document.getElementById("test").style.color = "blue";

    };

  </script>

―――――――

その後に、先ほどのhtmlを再読み込みし、クリックしてみてください。

文字の色が青に変わったでしょうか。

 

お疲れ様です。ここまでは、準備運動になります。

本題は、Web系のプログラミング言語が何をしているかですね。

特定の言語だと実行環境が必要になってしまうので、例で示していきます。

 

例えば、よくあるWebサイトでログインした後にこんにちは〇〇さん、などと表示されるものがあると思います。

これは、ログイン画面で入力したIDとパスワードに基づいて顧客情報をデータベースから拾ってきて

画面に表示しています。

どういうことかというと、データベースから顧客情報をひろってきて（ここはわからなくて良いです）

――――――――――――――――――――――

<query name=‘user’>

SELECT name FROM user WHERE id = 001;

</query>

――――――――――――――――――――――

先ほどのhtmlファイルに#user.name#さんを追加すると

データベースから拾ってきたデータをブラウザに表示することができます。

―――――――

<html>

<head></head>

<body>

  <p style="color:red;">こんにちは　#user.name#さん</p>

</body>

</html>

―――――――

 

しかもWeb系のプログラミング言語だともちろんWebとの親和性が高いので、

HTMLのタグに直接条件等を記載して、操作することできます。

 

たとえば、こんな感じ。

田中太郎さんの時だけ赤字にしました。（こんなことは現実ではやりません）

それ以外の方は、黒文字で出力されます。

―――――――

<html>

<head></head>

<body>

  <p <if user.name == “田中 太郎”> style="color:red;" </if>  >こんにちは　#user.name#さん</p>

</body>

</html>

―――――――

 

 

少し長くなってきましたので、次回もWeb系のプログラミング言語について書いていきます。