プログラミング言語とマークアップ言語(追記あり)

programing HTML/CSS

自分の頭の中を整理。

機械語とかプログラム言語とかマークアップ言語とかスクリプト言語とか一緒くたになっていたので、今の理解を整理。

プログラミング言語

CPU(Central processing unit)に指示を出してコンピュータを動かす際使用する機械語。CPUとやり取りする分には基本的にバイナリデータ(二進法のデータ)。

 パソコン内部のCPUやHDDは電圧の高低や磁性体の向き(すなわち1か0か)でデータを表現しています。2進法で命令やデータを処理しているのです。日経XTECH “2進法や16進法って何?

昔はコンピュータの処理能力が低かったから、まず人間の使用する言語に近いプログラミング言語でプログラムを書いた上で、完全な機械語にアセンブリする必要があった。

コンピューターの処理能力が上がってきたお陰で、人間の使用する言語に近いプログラムを書き、アセンブリせずに実行させる事ができるスクリプト言語が出てきた。
Python, Ruby, JavaScriptなど。

コンピューターは忖度してくれないので、プログラムを書く際には、手続きを明示的に1ステップずつ指示する必要があるが、このステップの内容、順番は、書く人の手続きについての理解度、考え方に依存する。

きちんと指示ができれば何百回でも手続きを繰り返す事を厭わない。この、同じ作業を寸分の狂い無く何度も繰り返せる事はプログラミングが持つ強みの一つ。

(2019/11/9追記)
下記の「Linux標準教科書」にプログラムについての的確な表現がありました。
”何かが順序立てて進むものを、プログラムと言います”
主な構成要素は
「順次実行」「条件分岐」「繰り返し」「サブルーチン」との事。

Longman dictionaryでProgramをひくと
”a set of instructions given to a computer to make it perform an operation:”
とあります。
一連の手続きの事をプログラムというのですね。

お陰様でプログラムを組む事とマークアップ言語でWeb画面を作る事の違いは明確になりました。

ちなみにこの本、PDFやEPUB版は無償だそうです。
自分はKindleにまとめたかった事もあり、こちらを購入しましたが、リファラー版でハイライトも引ける(PDF版も引けます。EPUB版は不明。)し、使い勝手は良いので満足しています。最初はコマンドの説明が並ぶだけなので中だるみしがちですが、第9章のシェルスクリプト辺りから面白くなってきました。一通りの処理を見る最初の一冊としては良いと思います。(2019/11/9 追記終わり)

マークアップ言語

コンピューターを動かすための言語ではなく、Webブラウザに表示する際のルール、規則をまとめた言語。

HTML

Webブラウザで絵や動画を表示する事ができるが、これは基本的に文字列の集合体。
それぞれの文書の構造、例えば「見出し」「段落」「画像」などをHTML(HyperText Markup Language(超最高な文書意味付け言語))で表す。

スタイルシート言語

構造化文書などにおける表示形式を制御するしくみ。
当初は、HTMLでデザインも管理していた様だが、見栄えと構造を分離するという目的で提唱されたらしい。
wikipedia “スタイルシート”

CSS

HTMLは文書構造だが、CSSは色合いや、形等もっとデザインをコントロールする言語。HTMLでもある程度デザインをコントロールできるが今ではCSSでまとめて処理する方がスムース。

まとめ:朝の準備時間で例えて言うなら

プログラミング言語:朝起きてから家を出るまでの手順

起きてからの手続きを管理するのはプログラミング言語。

人によっては

  • 起きる
  • すぐ顔を洗う
  • 服を着る
  • 化粧など
  • 朝ごはん
  • 出社

と言う人もいれば

  • 起きる
  • いきなり朝ごはんを食べる
  • 顔を洗う
  • 服を着る
  • 化粧など
  • 出社


と言う人もいるであろう。


これはその人の方針次第でもあり、体調など状況次第でもある。


顔を洗ってから食べたい人もいるし
食べてから顔を洗った方が手間が省ける、と言う人もいる
朝ごはんを食べない派の人もいる

そんな細かいやり方の違いを、方針次第でプログラミングしておけば、毎日考えずに処理ができる。

昨夜飲み過ぎたから朝ごはんは食べない、と言う場合もある。

これはプログラムの中での条件分岐で管理できる。



「プログラム記述に当たって正解はない」というのはこの朝の準備のことだけ考えても良くわかる。

正解はない中で、自分なりの考えで組み立てる事ができる、と言う意味でプログラミングを学ぶ価値はある。

マークアップ言語:オシャレなどの見た目

対して朝のお化粧、髪型、服装、カバンなどアクセサリの選択等、美的センスに関連する内容はマークアップ言語、スタイルシート言語。

どう記述すればどう表示されるか、という点を理解する必要はあるものの、HTMLは元々ある文書構造、内容を「どう読ませるか」を調整する言語であり、CSSはページを「どう見せるか、デザインするか」に関わる言語だけに、美的センス等もっと別の感性が必要な言語だし、流行り廃りと共に、ある程度の最適解が存在する様に感じる。

フレームワーク

HTML、CSSを記述するにあたって1から作り込むのは大変手間がかかる。
過去にデザイン等余り気にした事も無く、暗い気持ちになっていた私だが、最適解があるのだから、デザイン集的なものがあるのでは?と探した所、Bootstrapの様なフレームワークに行き着いた。

このBootstrap、以前から名前は聞いた事があったが、いまいち実感を伴っていなかった。
初心者でも上手く活用すれば比較的良いデザインのWebページが作れる仕組みだろう。
自分なりにカスタマイズする為にも、HTML、CSS、JavaScriptの知識は必要な様だが、何はともあれ一気にハードルが下がった気分。上手く活用して行きたい。

以上、現時点の自分の頭の中がごちゃごちゃしながらも整理したつもりになったブログでした。



イノベーティブ企業として有名なデザインコンサルティングファーム『IDEO』に所属していた著者による、デザインについての本。中古でも830円程なので、今月はKindleが140円程お得です。

コメント

タイトルとURLをコピーしました