絵でわかるWebプログラミング入門

プログラミング入門!プログラムとは?

初心者向けにプログラムやプログラミングについて解説している入門ページです。パソコンを使ったことがある程度の方を対象にしていますが、一部HTMLが出てくるので不安な方はまずHTML入門!10分後には制作開始!をご覧ください。

人間とコンピュータ

人間がコンピュータに計算などの仕事をさせたいとき、口頭で命令してもコンピュータは反応できません。コンピュータには日本語や英語が理解できないからです。


コンピュータが理解できるのは機械語だけです。機械語とは0と1の羅列で表現される言語です。コンピュータはこの2通りの情報(1ビット)の連続を読み込むことで働くことができます。


しかし、機械語を実際に見るとわかりますが、人間が機械語を書いたり読んだりするのはとても難しいことなのです。


これは、外国人が何を言っているのかわからないのと同じことです。

プログラミング言語とは

そこで、人間にとってもう少しわかりやすい言葉を開発し発展させたのが、プログラミング言語なのです。つまり、機械語しかわからないコンピュータと、英語や日本語しかわからない人間との中間にあるのが、プログラミング言語というわけです。


一般的には、このプログラミング言語で書かれたコンピュータへの命令書のことを、プログラムと呼びます。プログラムは最終的に機械語に翻訳されてからコンピュータに届くことになります。


プログラミング言語を学ぶということは、外国の恋人に想いを伝えるために外国語を学ぶのと同じようなことなのです。


プログラムはときにはスクリプトやソースコードなどとも呼ばれます。また、プログラミング言語にはいくつもの種類があります。


JavaScriptやPHPもプログラミング言語のひとつです。どちらもウェブが得意なプログラミング言語なので、ウェブページやウェブアプリを作るときによく使われます。

プログラミングの前に

ここでは入門ということで、JavaScriptというプログラミング言語を使います。

JavaScriptはブラウザ上で実行することができるので、HTMLの<script>内にスクリプトを書けばブラウザ上やコンソールですぐにプログラム結果を確認することができるので、プログラミングの入門として向いています。


コンソールというのはプログラムの出力などを実際に表示するもので、プログラミング入門者には欠かせないツールです。コンソールの使い方はブラウザによって違います。F12を押しても出てこなければ「コンソール ブラウザ名」で検索してください。

はじめてのプログラミング

それでは、実際にプログラミングをしてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <script>
      alert('Hello');
    </script>
  </head>
  <body>
    <script>
      console.log('World!');
    </script>
  </body>
</html>

サンプルコードを入力またはコピペしてhtmlファイルとして保存し、ブラウザでアクセスしてみましょう。


ポップアップで「Hello」、コンソールに「World!」とメッセージが表示されれば、プログラミングは成功です。

HTMLの<script>は<head>内や<body>内で使えます。書いたスクリプトは上から実行されていきます。

プログラムの解説

JavaScriptのスクリプト部分は次の2行だけで、ほかはHTMLです。

		alert('Hello');
		console.log('World!!');

「alert(データ)」はデータをポップアップで表示し、「console.log(データ)」はデータをコンソールに表示せよというコマンド(命令)です。


JavaScriptの場合、データが数値ではなく文字列の場合は「'」や「"」で括ります。また、文末には「;」と書きます。このように、プログラムの書き方にはルールがあり、これらのルールはプログラミング言語によってそれぞれ違います。


JavaScriptの「console.log(データ)」というコマンドは便利なので、意味はまだわからなくても覚えておきましょう。


また、プログラムとして処理されない部分をコメントと呼び、メモや説明などに使われています。JavaScriptの場合は「//」と書くとそれ以降の行がコメントになります。

		console.log('World!!'); // console.log('出力されない');

プログラミングにおいてコメントは有用な技術なので、ほとんどのプログラミング言語に備わっていると思いますが、それぞれ記述方法が違ったりするので注意してください。


これであなたもプログラマの仲間入りができました。さらなるプログラミング技術を習得するにはプログラミング入門!変数と配列とは?に進みましょう。