10分で出来る!はじめてのプログラミング体験

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

いよいよ実際のプログラミングです。ここでは JavaScript(ジャバスクリプト)というコンピューター言語を使って、簡単なプログラミングを行います。

JavaScript とは?

JavaScript は Microsoft Edge、Google Chrome、Safari 等のインターネット閲覧アプリ(ブラウザ)上で動くコンピューター言語です。

インターネット閲覧者は皆 JavaScript の利用経験がある、といってもよいほど身近な言語で、Yahoo! JAPAN、Google、Twitter、Facebook、Instagram、Youtube、Amazon、楽天といったお馴染みのWebサイトをはじめ、ありとあらゆるWebサイトで使用されています。

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

さっそく JavaScript によるプログラミンングを体感していきましょう!

1. 何を作るかを決める

プログラミングではまず何を作るかを決めます。今回は画面に「Hello, World!」と表示するだけの簡単なプログラムを作りましょう。

2.ソースコードを書く(コーディング)

何を作るか決まったら、いよいよコーディングです。Windows の「メモ帳」アプリを起動し、新規ファイルを作成しましょう。

2.1 メモ帳の起動

まずは「メモ帳」アプリを起動します。「メモ帳」は「Windowsアクセサリ」の下にあります(下図はWindows10の例)。

メモ帳の開き方

もしくは下図のように検索ボックスに「メモ帳」と入力して起動することもできます。

メモ帳を起動

2.2 ソースコードを書く

メモ帳が起動したらソースコードを書いていきます(コーディング)。まず以下をそのまま書いてみましょう。

プログラミングの流れがわかれば良いので、ソースコードを理解する必要はありません。「プログラミングをしたつもり」になるだけで大丈夫です。

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
document.write('Hello, World!');
</script>
</body>
</html>

実際の作業画面はこのようになります。

ソースコードを書く

2.3 保存する

書き終わったら保存します。

ソースコードの保存

以下のようにファイル名を「sample1.html」、ファイルの種類を「すべてのファイル」、文字コードを「UTF-8」として保存します(保存先フォルダはどこでも良いですが、今回はデスクトップに保存しました)。必ずファイルの種類を「すべてのファイル」、文字コードを「UTF-8」にするのがポイントです。

ソースコードを保存する

今回のソースコードは日本語を含んできませんが、日本語を含む場合は保存時の文字コードをUTF-8にしないと文字化けを起こす可能性があるので注意しましょう。

3. 実際に動かす!

プログラムを動かす

作成した sample1.html をダブルクリックします。Windows 10 の場合、Microsoft Edge が開かれて、画面の左上に小さく「Hello, World!」と表示されれば成功です!

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

うまく表示されない場合

ソースコードは1言1句、全角半角の打ち間違いさえも許されません。英語のつづりが間違っていないか、全角文字で入力していないかを確認しましょう。

どうしてもうまくいかない場合はソースファイルをこちらからダウンロードして試してください。

ソースコードのポイント解説

プログラミングを一度経験することが目的なので、ソースコードについて理解する必要はありませんが、少しだけ説明します。

HTMLとJavaSriptの構造

今回作成したソースファイルはHTML文書というもので、パソコンやスマートフォンのWebブラウザで閲覧することができます。上図の赤で囲った箇所はHTML文書の雛形で、HTML文書を書く上での決まりごとです。

HTMLを覚える必要はありませんが、詳しく知りたいならWikipedia の HTMLを一読してみましょう。

実際のWebサイトで表示するHTMLには多くの情報を書く必要がありますが、ここでは必要最小限にとどめています。

ポイントは青く囲った箇所で、ここがJavaScriptの記述箇所です。

<script>
document.write('Hello, World!');
</script>

document.write(‘●●●’); で書かれた●●●の箇所が画面に表示されます。document.write() とすると画面に表示できることを頭に入れておきましょう。

本格的な開発現場では document.write() を使うことは推奨されませんが、ここではプログラムを体験することが目的のため、お手軽に画面表示ができる document.write() を使っています。

以上、お疲れさまです。

簡単すぎて拍子抜けかもしれませんが、広く実用されているコンピューター言語による立派なプログラミングです。これまで「得体の知れないもの」だったプログラミングというものが、少しだけ身近に感じられるようになったら幸いです。

次回「変数と基本的な構文」では少し本格的なプログラミング体験をしていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です