Javascript 超入門 #2

はじめに

このシリーズはブラウザで動くプログラミング言語 Javascript を使えるようになるために必要なことを実践とともに学ぶものになります。実際に自分で手を動かせてはじめて人はスキルを身につけるので面倒でも、読むだけではなく実際に手を動かしながら本シリーズを進めることをおすすめします。前回は実際にプログラミングをする上で実生活と紐付けるために細かい仕様の説明がない投稿でした。今回はプログラミング言語の取得に必要な制御構文と呼ばれるものをメインに見ていくたいと思います。

プログラムを作れる環境

まず、プログラミングをする上で最低限必要なものはエディタとインタプリタです。急にカタカナが出てきましたが、イディタはプログラミングを実際に書くところで、インタプリタはそのコードを実装するものです。この2つがないとプログラミングはどうあがいても完成しません。Javascriptのインタプリタはブラウザの役目で、エディタは簡単に用意することができますので環境構築をするにはかなり簡単な言語と言えるでしょう。この2つを同時に提供しているブラウザがFirefoxです。なので、ひとまずFirefoxをインストールしましょう。

Firefoxのインストール

https://www.mozilla.org/ja/firefox/new/

上記のサイトに行くと下の画像のようなWebサイトが出てきますので、「今すぐダウンロード」ボタンを押してFirefoxを手に入れてください。

スクラッチパッド(JSのエディタ)

 

ツール>ウェブ開発>スクラッチパッドからスクラッチパッドを開いてください。

スクラッチパッドはFirefoxが提供しているJS専用のエディタになります。ここで実際のプログラミングを書いていくことになります。

Hello World !!

プログラマーが新しい言語を学ぶときにまず叫ぶ言葉はこの「Hello World!!」です。つまり、はじめて言語を走らせるときに「Hello World !!」という文字を表示(出力)させる慣習があります。そしてそれらのプログラムをHello Worldといいます。それではみなさんも実際にHello Worldという文字を出力してみましょう。

console.log("Hello World");

 

なんて難解で複雑なプログラムなのでしょうか。思考がフリーズしてしまいそうですね。

落ち着いて読み続ければあなたもスラスラとこのようなコードを何行にもわたってかけるようになります。

ですが、まず集中することはこのコードを実際にFirefoxのスクラッチパッドに打って実行することです。

実行ボタンを押しても何も表示されないと思いますが慌てないでください。

このconsole.logというコマンドはその名の通り「コンソール」に文字を出力するものになります。なのでコンソールを開いてあげる必要があります。

ツール>ウェブ開発>ブラウザーコンソールを開いてあげましょう。

そしてもう一度実行ボタンを押して、以下のようにHello World !! と出れば成功です。

「だからなんだ?」と思われたかもしれませんが、はじめは文字をコンソールに出力することでプログラムを動かしていきます。のちのち、これをブラウザのページとして表示させたりもしますが、それはもう少し手順がかかりますので、プログラムの結果を簡単に確認できるようにコンソールに文字を表示することを覚えることは大事なことなのです!

コメント

ほとんどのプログラミング言語にはコードの中に実際に挙動には全く関係のしないコメントをつけることができます。これは主にわかりにくいコードの説明だったり、目的だったりを自然言語をしようして表すものです。Javascriptでのコメントは前に「//」をつけることで表します。

// これはコメントです。コードの説明や目的を記述します。

データ型

僕たち人間は数値をみても文字をみても意識して分別する必要はありませんが、パソコンは文字と数値の違いをはっきりとしてあげないといけません。例えば、「私は+プログラミングが +好きです」というのは「私はプログラミングが好きです」というふうに足してあげますが、「1+1」は「2」となり同じ足し算でも数値と文字で異なる処理をして上げる必要があります。なのでパソコンにはそのデータの型がはっきりと決められています。その中で代表的なものをいくつか紹介します。

文字列

文字列はわかりやすと思いますが、日本語や英語の文字の羅列のことです。ただし、これらをプログラムで使用するときはクォーテーションマーク(”)で囲って上げる必要があります。

"文字列の表し方"

数値

これは数字のことです。プログラムで使用する際はときに気をつけずにそのまま書くことができます。小数点もそのまま書くことができますが、実際のデータの方は別であります。

98765434561

論理値

聞き覚えがないものですが、これの値は2つしかないのでわかりやすいです。真か偽かです。実際に書くときはtrueかfalseを使用します。正しいか正しくないかの表すものですね。

true
false

Null

これは「なにもないこと」または「空」を表します。プログラムの世界では何もないことを表すときに何も表示しなければわかりにくいので、空のさいはnullというふうに書きます。Javascriptではnullですが、他の言語ではnilなどとも呼ばれます。

null

リスト

そのままです。いくつかのデータを一つのまとまりとして変数に保存することができます。

[1,2,3, "moji", nil]

オブジェクト

直訳すると「もの」というふうになりますが、これは情報を一つの箇所に集めた構造体になります。あまり深く考えずに実際に使用していくほうが理解しやすいと思いますのでわからなくても、わかったふりをして進みましょう。

{ "名前": "五石凪", "職業": "エンジニア" }

変数

プログラミングをするときには必ずデータを一時的に保存する必要が出てきます。日常生活でも電話番号をどこかにメモしておかないと、次に使用する際に不便ですよね?それと同じですぐにデータを取り出せるように情報を保存する場所が変数ですJavascriptで変数を使うときには決まった手順があります。

宣言と代入です。

まず宣言は今から〜という変数を使いますと、パソコンに教えておかないと急に決められた文字しかしようしてはいけないパソコンは「こんな文字登録されていないぞ!」とエラーを出して怒り出します。例えば「phone_number」という変数の宣言は以下のようにします。

var phone_number;

簡単ですね。varと前につけてこれから使いたい変数の名前をあとに書くだけです。最後のセミコロン(;)は一行の終わりを表します。

次は代入です。

代入は実際にデータを保存することを意味をします。例えば、保存したいデータが電話番号が「050 5532 9371」でしたら(実際の僕の番号ですので質問があったら連絡ください)

phone_number = "05055329371"

というふうにイコールサインで代入を行います。イコールサインを挟んで左側にデータを保存したい変数、右側に実際に保存したいデータを置きます。ほとんどのプログラミング言語ではイコールサインはイコールという意味ではなく代入の意味になります。ちなみに、この代入のコードを読む際は「”05055329371″をphone_numberに代入する」というふうに右側から左側に読みます。

宣言と代入は同時におこないことができて以下のように書くことも可能です。

var phone_number = "05055329371"

演算

日常生活において四則計算が大事なようにプログラミングでも多用します。ですが、大抵のプログラミング言語ではJavascriptも含めて感覚的に四則計算をさせてくれます。

1 + 1;
3 - 1;
5 * 5
10 / 2;

「+, -, *, /」のように組み合わせるために使用されるものを演算子といいます。

四則演算の演算子は説明がいらないほどに明確だと思いますが、他にもたくさん演算子がありますのでよく使うもののみを紹介したいと思います。

等価演算子

等価か確認するときに使う演算子です以下のようなものがあります。

// 等しい
1 == 1

// 同一
1 === 1

// 等しくない
1 != 2

// 同一ではない
1 !== "1"

これらはみなさんがご存知の意味でのイコールです。等しいと同一の違いは確認するときの厳しさにあります。ここでは割愛しますが、基本的には同一(===)を使いましょう。

論理演算子

論理演算子は条件を組み合わせるさいに使います。例えば、家を決める際に治安や価格や最寄り駅の近くであることなど、いろんな条件が必要になると思います。それをプログラミングをしようして条件を分けようとするとこの論理演算子が必要になります。

A && B AとBどちらの条件も揃っていれば(trueだった場合)
A || B AとBどちらかの条件が揃っていれば(trueだった場合)

 

上記のふたつのように「かつ」と「または」と普段でも使うような条件ですね。使用例としては以下のようにします。

// 実際は条件のところも英語で決まった方法があるのですが、
// 日本語で書くと以下のようになります。
駅から徒歩5分以下 && 価格が10万円以下
// => だったら借りる

条件分岐 (If … else …)

たとえ、いくつもの条件を定義できてもそれを使わないことには意味がありません。

if文を使用することでそれぞれの条件に合わせて実行するコードを変更することができます。

if (条件1) {
  // 条件1が正しければ実行される
} else if (条件2) {
  // 条件2が正しいときに実行される
} else {
  // 上記の条件以外の場合は実行される
}

 

繰り返し処理(for, while, forEach)

同じ処理をする際に同じコードを何度も書くなんてナンセンスです。

プログラミングの世界では何回も同じ行のコードを実行することができます。

繰り返し処理(ループ)にはいくつかの方法があり今回は for, while, forEachの3つを紹介します。

すべてのコードは0から9を表示させるということをしています。

それぞれ書いてみて実行結果を確認してみましょう!

while

// ループを管理する変数iを0に定義する
var i = 0;

// whileのカッコの中にはループを続けるかどうかの条件を書く (i < 10)
while (i < 10) {
  // ループを制御する変数iを表示する。1, 2, 3 ...と数が増えていくはず。
  console.log(i);
 // iの数を一つ上げる(インクリメント)
  i++;
}

for

forループは上記のようなwhileループのために作られた繰り返し処理です。

「変数の初期化 (var i = 0)」「ループを続ける条件 (i < 10)」「一度実行されたあとの処理 (i++)」をカッコ内に書くことができます。

// for ループ

// 3つの設定
// 1. var i=0 はループを管理する変数を作成します。
// 2. i<10 はループが続く条件を表します。
// 3. i++ 一回のループが終わったあとの処理を行います。

// はじめに var i=0 で 変数 i 
に0を代入して、
// iが10以下であればforループ内にあるコードの実行に続けます。
// ループが一度実行されれば、i++ でiに1を足しています。
for (var i=0; i<10; i++) {
  console.log(i);
}

forEach

上記で出てきたリストで使用できる便利なものです。

リストの中身を一つづつ取り出しすことができます。

functionは次の章で説明します。

// 0から9の数字が入ったリストから一つづつiとして取り出して表示しています。
[0,1,2,3,4,5,6,7,8,9].forEach(function (i) {
  console.log(i);
})

関数

コードは長くなると読みにくくなります。なので、名前をつけていくつかのコードを人まとまりにすれば、コードが簡単で読みやすいものになります。そのようなひとまとまりにすることをJavascriptでは関数といいます。

関数はなにか値を受け取り、それを変換してその値を返してくれます。

この受け取る値を引数、返してくれる値を返り値といいます。

// 足し算をする関数

function add(a, b) {
  return a + b;
}

最後に

ひとまず、これらがプログラミングをする上で最低限必要な知識です。

今回の記事はたくさんもの概念を紹介したので深く説明できなかったですが、

ある程度「このようなものがあるんだなあ」という雰囲気で問題とりあえず問題ないです。

ですが、これからの記事このような用語がでてくるのでその際にこの記事に戻って参照してください。

 

大阪桐蔭高校中退。TECH::CAMP梅田でプログラミングを学習する。 同じくTECH::CAMPでメンターを経験する。 その後、渡米しカリフォルニアの大学に行きながら シリコンバレーで現役のエンジニアとして働いている。 同時にTECHACADEMYのメンターをしている
投稿を作成しました 5

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る
%d人のブロガーが「いいね」をつけました。