このレッスンはただ今 無料公開中 です。

初学者向け マンツーマン プログラミング・レッスン

無料体験入門へようこそ！

このコースは「プログラミングははじめて」という初学者の方を対象に、プログラミング言語のひとつである「Javascript」を用いた学習を行なっていきます。

Javascript体験入門へようこそ！

このコースは「プログラミングははじめて」という初学者の方を対象に、プログラミング言語のひとつである「Javascript」を用いた学習を行なっていきます。

最終的には、次のようなBMI計算アプリを完成させます。

bmi

環境準備

Javascriptを学習するための最低限の環境を整えます。

最も手っ取り早いのは、HTMLファイルに組み込んでブラウザからスクリプトを実行し、コンソールでその結果を確認することです。Javascriptは世界中の多くのWebサイトでも使用されている通り、HTMLとの相性が良いのが特徴のひとつです。

使用ツール

  • テキストエディタ
  • Google Chrome（ブラウザ）

テキストエディタについては、Newmonzでは次のいずれかを推奨しています。Windows版・Mac版どちらもあります。

これ以外にも優れたエディタはたくさんありますので、ご自身にあったものをご用意ください。 尚、Windows付属のメモ帳は文字化けが起きたりしてプログラミングには向いていません。必ず専用のコードエディタを使うようにしましょう。優れたツールを積極的に使うことは、プログラマに必須の素養です。

ブラウザについては、現在世界中で圧倒的なシェアを誇るGoogleのChromeを使うようにしましょう。特に付属の「ディベロッパーツール」は非常に強力です。本コースではこのディベロッパツールを使って、Javascriptの実行結果を確認していきます。

Javascriptとは

JavaScriptは1995年に開発された、ブラウザ操作と相性の良いプログラミング言語です。
登場した当初は、Webサイトにちょっとした動きをつけるくらいしかできませんでした。ページ上でマウスを移動させると、キャラクターやキラキラエフェクトが追随してくるような、そんなお遊び的なものが多かった記憶があります。

ところで、当時の２大ブラウザであったNetscape NavigatorとInternet Explorerとでは、Javascriptの仕様が異なっていました。さらにその他のブラウザでも仕様が乱立していたため、開発者泣かせの言語として有名でした。

しかしやがて、ECMA Internationalという機関によって仕様が標準化されたり、jQueryが登場してブラウザ間の異なる仕様を気にせずに済むようになってくると、ブラウザで動く というその大きな特徴が功を奏して、爆発的に人気が高まっていきました。

その後も度重なるバージョンアップや、豊富なライブラリ・フレームワークの登場によって、その重要性は右肩上がりに高まっています。現在ではJavascriptが使われていないWebページを探すことの方が難しいほど、世界中で最も利用されている言語のひとつです。

本コースではそんなJavascriptを使って、プログラミングを体験する学習を行なっていきます。

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

学習用フォルダの作成

それではさっそく、プログラムを書いてみましょう。そのためにはまずファイルを作成しなくてはなりません。自身のPCのアクセスしやすい適当な場所に学習用のフォルダを作り、その中に必要なファイルやフォルダを作成していきます。
Windowsならマイドキュメント、Macならユーザーフォルダが良いでしょうか。あるいはデスクトップでもかまいません。作成する学習用フォルダの名前は「js-basic」としましょう。今後はこのjs-basicフォルダで作業を行なっていきます。

ファイルの作成

js-basicフォルダ内に次の名前で２つのファイルを新規作成してください。中身は空っぽで構いません。

  • index.html
  • main.js
ただしWindows・Macどちらとも、あらかじめ「拡張子を表示する設定」にしておきましょう。そうでないとプログラムはうまく動作しません。やり方がわからない場合は
拡張子 表示 Windows
または
拡張子 表示 Mac
というキーワードで検索してみて下さい。

index.html には次のコードをコピー＆ペーストして保存してください。このファイルはプログラムの実行結果を確認するのに使うだけなので、今はその内容を理解する必要はありません。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのJavascript</title>
  </head>
  <body>
    <h1>はじめてのプログラミング</h1>
    <script src="main.js"></script>
  </body>
</html>

次に、main.jsには次のコードを書いて下さい。このファイルが本コースの学習用にメインで使っていくものになります。練習のためにも、こちらはコピー＆ペーストせずに手打ちで入力するようにしましょう。

main.js
var text = 'Javascriptを勉強中です。';
console.log(text);

プログラムの書き方

プログラムは原則として「半角文字」を使って記述していきます。
半角スペースもプログラムにとっては大事な意味を持つので、正しく入力して下さい。 上記のコードでは var と text の間、及び = の前後に半角スペースが入っています。
くれぐれも「全角スペース」を使わないように注意してください。このことは、Javascriptに限らずほぼ全てのプログラミング言語で共通です。全角スペースはプログラムからは訳のわからない文字として認識され、エラーが起きたり表示が乱れたりします。全角スペースを唯一使って良いのは「文字列の中」だけです。

文字列とは

コンピュータに「ここからここまでは文字」として認識してもらうためには、シングルクォーテーションかダブルクォーテーションでその部分を囲います。

'これは文字列です'
"これも文字列です"
これは文字列ではありません

このクォーテーションも、全角文字にならないように気をつけて下さい。その他の記号も同様です。

  • ' と ’
  • " と ”
  • , と 、
  • ; と ；
  • : と ：
  • + と ＋
  • - と ー

ぱっと見て区別がつきにくいですが、いずれも左側は半角文字、右側は全角文字です。プログラミング入門者は、この間違いによるエラーが多いです。早め気づけるようになりましょう。
全角文字は基本的に、クォーテーションで囲った「文字列の中だけ」でしか使いません。

行末のセミコロン ;

Javascriptでは、命令の記述の最後にはセミコロン ; を付けるようにしましょう。
これは省略可能です。セミコロンがなくても、改行がされていればmain.jsは正しく動作します。しかしながら、その違いを深く知ろうとすると底なし沼にハマってしまうので、最初のうちはセミコロンをつけるようにしておきましょう。「省略もできる」と頭の片隅においておけば充分です。
尚、セミコロンももちろん半角文字です。全角の ； は使用できません。

実行してみよう

さて、書き方についての説明は以上になります。

main.js
var text = 'Javascriptを勉強中です。';
console.log(text);

このたった２行のコードが実際にどのような結果となるのかは、実行してからのお楽しみです。

さっそく実行してみましょう。

index.htmlファイルをダブルクリックしてみてください。ブラウザが起動してこのファイルを読み込むはずです。

この時に、もしも起動するブラウザがChromeではなく他のブラウザだった場合は、これを機にデフォルトブラウザをChromeに変更することを検討してください。
どうしてもChromeをデフォルトブラウザにしたくないたい場合は、先にChromeアプリのアイコンをダブルクリックして起動させておき、その画面にindex.htmlをドラッグ＆ドロップしてください。あるいは、index.htmlファイルを右クリックして、起動するアプリケーションでChromeを選択する方法でも構いません。

gyazo

Chromeでこのように表示されたでしょうか？

「はじめてのプログラミング」という文字列は、main.jsには書かれていません。これはindex.htmlに書かれたものをそのままWebページとして表示しているだけです。残念ながら、これは「プログラミング」ではありません。

index.html（抜粋）
<h1>はじめてのプログラミング</h1>
※ index.htmlに書かれた内容が表示されただけ

main.jsに書かれた「Javascriptを勉強中です。」という文字列は、一体どこへ行ってしまったのでしょうか？

ディベロッパーツールを開こう

ブラウザの画面を右クリックしてメニューを表示させてください。

gyazo

メニューから「検証」を選択すると、ディベロッパーツールがブラウザの下部、または右側に開きます。（配置は変更可能です）

gazyo

Consoleと書かれたタブを開くと、コンソールの内容が表示されるようになります。そしてここに「Javascriptを勉強中」の文字列が出力されていることが確認出来ると思います。

var text = 'Javascriptを勉強中です。';
console.log(text);

2行目の console.log(text) が実行された結果です。
consoleオブジェクトのログ出力機能 log() を使って、text の中身を出力させる命令です。それでは text は一体何者かというと、１行目の

var text = 'Javascriptを勉強中です。';

この部分です。

var とは変数を宣言するのに使います。ここでは text という変数を使えるように宣言しました。そして = で「値」を変数に代入します。その値こそが 「Javascriptを勉強中です。」 という文字列データです。
変数とはデータに名前をつけることと思ってもらって構いません。（詳しくは次章で学習します）

つまり言い方を換えれば、次のような命令をコンピュータに与えていると言えます。

1行目：
「Javascriptを勉強中です。」という文字列データに text という名前をつけよ。

2行目：
text という名前のついたデータをconsoleにを出力せよ。

たったの２行ですが、コンピュータに命令を与えて処理を実行させることができました。これこそがプログラミングなのです。

計算させてみよう

それでは次に、main.jsに下記のようにコードを２行追加してください。

main.js
var text = 'Javascriptを勉強中です。';
console.log(text);
var number = 3 + 5;
console.log(number);

編集して保存したら、ブラウザのページを更新してみて下さい。コンソールに出力結果が増えているのがわかります。

Console
Javascriptを勉強中です。
8

3行目：
3 + 5 の計算結果のデータに number という名前をつけよ。

4行目：
number という名前のついたデータをconsoleにを出力せよ。

このような命令を追加したのでした。結果として 3 + 5 の合計である 8 という値が、コンソールに出力されました。

コメントをつけよう

プログラムには開発者がわかりやすいようにコメントをつけておくことができます。

１行コメント

// を行頭につけるとその行はコメントとして扱われます。次の行はコメントではなくなります。
コメントとして記述した内容は、プログラム実行時には一切無視されます。処理内容に影響を与えることはありません。

main.js
// 文字列をコンソールに出力する処理
var text = 'Javascriptを勉強中です。';
console.log(text);

// 計算結果をコンソールに出力する処理
var number = 3 + 5;
console.log(number);

処理の説明をコメントに書いておくことで、他人や未来の自分がコードを見た時にわかりやすくなります。コメントをうまく活用するようにしましょう。

このコードを保存して実行（ブラウザ更新）してみると、先ほどと同じ出力結果になります。

複数行コメント

また、/* からはじまって */ で終わるまでの間に書かれたものもコメントとして扱われます。こちらは複数行にわたってコメントを書く時に使われます。

main.js
/*
 データをコンソールに出力する処理
 textは文字列
 numberは整数
 */
var text = 'Javascriptを勉強中です。';
console.log(text);
var number = 3 + 5;
console.log(number);

コメントアウト

コメント機能を使って、プログラムのある部分を一時的に実行させなくすることができます。 これを「コメントアウト」と呼びます。

main.js
var text = 'Javascriptを勉強中です。';
// console.log(text);
var number = 3 + 5;
console.log(number);

コメントアウトされた２行目の console.log(text) は無視されるので、コンソールには 8 しか表示されません。
プログラムに潜むバグを見つけるのによく使われる手法でもあります。エラーが起きていそうな部分をとりあえずコメントアウトしてみて、もしそれで処理が通ったとしたら、コメントアウトした部分に何らかのバグが存在したことが考えられるというわけです。

まとめ

いかがでしたか？

本章では、Javascriptでごく簡単なプログラムを書いてみて、その命令をコンピュータに処理させることを体験しました。

次の章では、今回少しだけ扱った「変数」についてより詳しく学習していきます。また「データ型」という概念も登場します。本章にも「文字列」や「数値」という単語が登場しましたが、これこそがデータ型です。プログラムでは「データ型」というものがとても重要になります。 体験レッスンは 45分 しかありません。レッスンだけでこのコースの全てを学ぶことは難しいですが、プログラミングとはどのようなものかを体験してみる時間と捉えてください。そして少しでも興味が持てたら、ぜひご自宅でも最後のチャプターまで自習して完了させてみて下さい。

最終的には、次のようなBMI計算アプリを完成させます。

bmi

次のChapter