2020

Hashimoto

薄っぺらな
プログラミング入門
HTMLJavascript Part. 1

この連載のターゲット
なんとなくプログラミングに興味はあるけど、何がわからないかわからなくて、何から初めて良いかわからない方

この連載の目標
HTML
CSSJavascriptを通じてプログラミングの初歩を理解してもらう

とりあえず入門記事でも書いてみようかと思い立ったものの、自分がそんなテーマでちゃんと記事として書けるくらいプログラムを理解できているのかと自問した時点で数分間脳が硬直してしまい、あまり真面目に考えると病みそうなので、実はインターネットを使用する人は日常的に触れている、HTMLJavascriptというプログラム言語を題材にお伝えしてくのが妥当なのではないかと判断しました。

突然ですが、今あなたが見てるのはHTMLです

HTMLJavascriptはインターネットでWEBサイトを利用するにあたって、日常的に触れているプログラム言語です。 HTMLは正確にはプログラム言語とは言えないのですが、ここでは仲間に入れてしまいます。 1つの伏線として、連載を読み進めて頂いた結果感覚的に違いがわかってくれたら嬉しいです。 ざっくり書いてしまうと

HTML…見た目を整える書式
Javascript(JS)
…動きを制御する書式

ということになります。
書式に合わせた文字を書くと、文字に対応した命令をコンピュータが実行してくれます。 実行とは主に出力・入力・制御・演算を組み合わせて目的を達成することをいいます。 この書式をプログラム言語と呼び、一連の行動をプログラミングと言います。

今ご覧のこのカッコイイブログページも、HTMLで書かれています。 皆様はChromeFirefoxSafariEdge等の”ブラウザ”と呼ばれるアプリで見ている事と思われます。

基本的にインターネット上の文章情報というのは”HTML”という書式に従うことでレイアウトや色、文字の大きさが製作者のデザインの意図に従って表示されるように作られています。 使う人に情報を見せることを”出力(Output)”と言います。 ”ブラウザ”は情報の配信元と通信を行いHTMLや関連情報を取得し、その書式を解釈して表示したりJavascriptによる画面の入出力制御を行うソフトウェアなのです。

ですが、HTMLで”見る”だけではアマゾンさんでお買い物はできません。 ほしい商品を自分で選んで、個数を選択し、送り先を入力して支払情報を入力する必要があります。 この様に、WEBサイトや画面を見ている人の意思を受け付ける仕組みが存在し、その行為を”入力(Input)”と言います。

例えば、名前を入力しないで注文を確定しようとすると画面が進まず、入力枠が赤くなって”名前を入力して下さい”と怒られることがあると思います。 これは多くの場合、Javascriptがユーザーの操作に応じて反応するように作られており、入力項目に漏れがあった場合にHTMLの入力枠の色が表示が赤くなる等、Javascriptが情報を書き換える”制御”を行うことにより実現されています。

また、商品を個数分の小計に送料を加算して支払いの合計額を算出する”演算”も行われていたりします。 HTMLは表示や情報の定義に特化した言語です。 その性質上HTMLだけでは入力の際の細かい制御ができないのでJavascriptを用いて処理を行い、HTMLの表示内容を必要に応じて書き換えたりします。

実は、プログラミングの入門に小難しいものは全く必要なくお使いのブラウザでインターネットを見れているという時点であなたがプログラミングを行う準備は既にできています。

まずはその前段階として、出力を行うためのHTMLに触れていただくため次回はHTMLの書式について触れていきたいと思います。

この記事の連載記事

このサイトはThoughtを使って運用されています。

最近更新された
タイムオフスクラップ