こんにちは、ECF Techブログ
担当のMichiharu.Tです。
本記事はプログラミングを始めてみたいという方のために作成された連載記事の第１回です。実際にプログラムを作って動かしながら学べるWeb教材となっています。Web教材全体の目次は下記のリンクからご覧いただけます。ぜひ、日ごろのプログラミング学習にご活用ください。
プログラムとは
プログラミングを説明するために、まずはプログラムについて説明します。私たちの身のまわりにはコンピュータがあふれています。パソコンやスマートフォンをはじめ、エアコンや冷蔵庫などの家電製品の中でもコンピュータが動作しています。
私たちの身近なところにコンピュータはあふれている
ただし、コンピュータはひとりでに動くわけではありません。人間が「あんな風に動いてね。こんな風に動いてね。」と事細かな指示を書いて覚えさせることによって、期待する動きをしてくれます。この 「コンピュータへの指示を書き並べたもの」 がプログラムです。このプログラムを記述することを プログラミング と呼びます。
プログラムはどうやって書くの？
プログラムは紙と鉛筆を使って日本語で書く。というわけにはいきません。プログラムはパソコンを使ってプログラム言語で書く必要があります。プログラム言語は、コンピュータが理解できる言語です。Java、Python、JavaScriptなど、様々なプログラム言語があります。
JavaScript
JavaScriptはプログラム言語の１つです。JavaScriptの特徴や歴史など様々ありますが、ここでは筆者が考えるJavaScriptがプログラミング初学者に最適な理由を述べたいと思います。それが下の３つです。
- ブラウザとメモ帳があれば始められる。
- 直感的に記述がしやすい。
- プログラマーとして仕事をする際には、ほぼ必須の知識。
というわけで、本連載はJavaScriptを使ってプログラムの書き方を学ぶ内容となっています。早速準備を始めましょう。
プログラミングの準備をしよう
ブラウザの確認
本連載ではプログラムの動作確認をブラウザを使って行います。ここでは、そのために必要なブラウザの設定を確認します。ブラウザの種類ごとに確認方法を示します。
Google Chromeの場合
- ブラウザ右上のメニューボタンをクリックし、設定を開きます。
- 左メニューから「プライバシーとセキュリティ」をクリック、次に「サイトの設定」をクリックします。
- 「JavaScript」をクリックします。
- 「サイトがJavaScriptを使用できるようにする」が選択されていることを確認します。されていなければ、クリックします。
Microsoft Edgeの場合
- 右上メニューをクリックし、「設定」をクリックします。
- 「Cookieとサイトのアクセス許可」をクリックし、「JavaScript」が「許可済み」であることを確認します。「許可済み」でなければ、右の「＞」をクリックします。
- 「許可(推奨)」右のスイッチをＯＮにします。
Safariの場合
- Safariのメニューから、「環境設定」をクリックします。
- 「セキュリティ」をクリックし、「JavaScriptを有効にする」がチェックされていることを確認します。チェックされていなければ、チェックを入れます。
ブラウザの準備はこれで完了です。
HTMLを少しだけ学びましょう
本連載で用いるJavaScriptの動作方法を実行するためにはHTMLの知識が少しだけ必要です。ここではHTMLのことを少しだけ説明します。
HTML
HTMLは「Hyper Text Markup Language」の略です。ブラウザ上で表示されるWebページを作るのに用いられるプログラム言語の1つと考えてください。HTMLではタグと呼ばれる記述を使って文書に意味づけを行い、文書全体の構造を作ります。出来上がった文書はHTMLファイルと呼ばれます。HTMLファイルをブラウザに表示すると、ブラウザはタグを解釈しWebページとして表示してくれます(下図)。
<xxxx>の部分を 開始タグ 、</xxxx>の部分を 終了タグ と呼びます。この２つで文書を囲むことで、意味づけをします。
図に表示されているHTML文書に使われている各タグの意味を簡単に説明します。
| htmlタグ | HTML文書であることを示す。 |
| headタグ | ヘッダと呼ばれる領域であること表す。 |
| bodyタグ | ブラウザに表示される領域であることを表す。 |
| h1タグ | 見出しであることを表す。(※h1～h6まで6段階の見出しがある) |
| imgタグ | 画像を表示することを表す。 |
| olタグ | 数字つきリストであることを表す。 |
| liタグ | 数字つきリストの各項目であることを表す。 |
現時点ではこれらタグの詳細について理解しておく必要はありません。WebページがHTMLを使ってこのように作られている。ということを理解頂ければOKです。この数あるタグのうち scriptタグ というタグを使うと、 Webページの中にJavaScriptのプログラムを記述することができ、Webページを表示するタイミングで実行する ことができます。本連載ではこの方法を使ってプログラムの動作確認を行います。そのために簡易なWebページを1つ作成ししたいと思います。
JavaScriptでHello World
少し難解な説明が続きましたが、百聞は一見にしかず。です。ここから実際にプログラムを動かしていきたいと思います。
HTMLファイルの作成
まずは下のHTML文書をメモ帳などのエディタソフトにコピーして、index.htmlというファイル名で保存します。保存場所は任意で構いません。
<html> <head> <title>Hello JavaScript</title> </head> <body> <script> </script> </body> </html>
メモ帳(Windows)とテキストエディット(Mac)、それぞれのエディタでの手順について掲載しておきます。
メモ帳(Windows)の場合
- 画面左下の検索ウィンドウに「メモ帳」と入力し、候補のメモ帳アプリが表示されたらクリックします。
- 上のHTML文書をコピーして貼り付けます。
- メニューから「ファイル」、「名前を付けて保存」を選びます。
- 保存先を選択し(例ではデスクトップを選択しています)、各項目を次の通りに設定し、保存ボタンをクリックします。
- ファイル名:index.html
- ファイルの種類:すべてのファイル
- 文字コード:UTF-8
テキストエディット(Mac)の場合
- 画面右上の虫めがねをクリックします。
- テキストエディットと入力し、Enterキーを押します。
- メニュー「フォーマット」から「標準テキストにする」をクリックします。
- HTML文書をコピーして貼り付けます。
- メニューから「ファイル」を選び「保存」をクリックします。
- 各項目を次のように入力し、保存をクリックします。
- 名前:index.html
- 場所:デスクトップ(※任意の場所で構いません。)
- 標準テキストのエンコーディング:Unicode(UTF-8)
- 拡張子が未指定の場合は、*.txtを使用:オフ
テキストエディットでファイルを開く際は少し注意が必要です。次のような手順となります。
- メニューから「ファイル」を選び、「開く」をクリックします。
- 開くファイルを選択、「リッチテキストコマンドを無視」にチェックを入れ、「開く」をクリックする。
このHTMLファイルはJavaScriptの動作確認のために準備したものです。文書中の scriptタグ (下図)内にJavaScriptのプログラムを書いて動作確認をすることができます。
プログラムを書く
次にJavaScriptのプログラムを書きます。下のプログラムをindex.htmlファイルのscriptタグ内に記述し、上書き保存します。
プログラム00_01
console.log('Hello World!');
index.htmlファイルは下図のようなイメージになります。
これでプログラムの記述は完了です。
プログラムを動作させる
それでは早速動作させてみましょう。作成したファイルをダブルクリックします。ダブルクリックするとブラウザが開きます。ブラウザが開いた後の操作はブラウザごとに少し異なりますので、それぞれに分けて説明します。
Google Chromeの場合
- 画面の任意の場所で右クリックし、メニューから「検証」をクリックします。
- コンソールタブをクリックします。画面のように「Hello World!」と表示されていれば、プログラムが正しく実行ができています。
Microsoft Edgeの場合
- 画面の任意の場所で右クリックし、メニューから「開発者ツールで調査する」をクリックします。
- 「コンソール」タブをクリックします。画面のように「Hello World!」と表示されていれば、プログラムが正しく実行ができています。
Safariの場合
- メニューから「開発」を選び、「JavaScriptコンソールを表示」をクリックします。
- 下図のように「Hello World!」と表示できていればOKです。
コンソールって何？
おめでとうございます! JavaScriptの最初のプログラムを動作させました。といっても、ブラウザの画面に表示されずちょっと拍子抜けしている方もいるかもしれません。今回プログラムの実行結果を表示した場所は コンソール(console) と呼ばれる場所です。コンソールを一言でいうと「コンピュータに情報を入力したり、コンピュータの情報を出力(表示)したりする装置」です。どのブラウザも基本的にこのコンソールという機能を備えており、JavaScriptの命令の１つである。console.log('xxxx')は、カッコ内の情報をコンソールに表示することができます。
本連載では、しばらくはこのコンソールを使ったプログラミングがメインとなります。ブラウザの画面上を操作するプログラムも徐々に取り扱っていく予定です。
プログラムに変更を加える
それでは作成したプログラムに変更を加えて、再度動作してみましょう。エディタを使って、index.htmlのscriptタグ内を次のように書き換え、保存してください。
プログラム00_02
console.log('おはようございます。');
console.log('こんにちは。');
console.log('こんばんわ。');
保存ができたらブラウザ上で再読み込みをします。再読み込みをすることで書きかえたプログラムが実行されます。ブラウザごとに手順を示します。
Google Chromeの場合
- 下図赤囲み部分をクリックします。
Microsfot Edgeの場合
- 下図赤囲み部分をクリックします。
Safariの場合
- 下図の赤囲み部分をクリックします。
コンソールを確認しましょう。下図のようになっていればOKです。
このようにプログラムを書き換えて再読み込みをすることで、色々なプログラムを試していくことができます。
以上でJavaScriptでプログラムを始める準備は完了です。というわけで今回はここまでとなります。最後までご覧くださり、ありがとうございました。次章からJavaScriptの文法について、少しずつ学んでいきます。
