JavaScriptの基礎を学ぶ

仕事上、JavaScriptの習得は免れないため、
プログラミング歴半年のぺーぺー〇んこが
JavaScriptを勉強しますよ。
先々週くらいにJavaScriptの関数について軽い記事に
しましたが、そこから全然知識が無いまま上達しない！
変化しない！理解ができない！
ちゃんと勉強しないとやっぱり人間変わりませんね。

今回の勉強本はAmazonKindle無料本の

スラスラ読めるJavaScriptふりがなプログラミング

及川卓也　監修・リブロワークス　著

です。

JavaScriptとは

JavaScriptを覚えるとできること
Webブラウザ内で動くプログラム言語。ユーザーインターフェース
（ユーザーが直接操作する部分）を作るために使われる。
UIが得意なことを活かし、Webページ以外でもテキストエディタの
AtomやスマフォアプリのSNSなどと連携するものにも使われている。
どこでも動くアプリを手軽に作りたい、それに応えられる言語。

JavaScriptは覚えやすい？
文法的にはシンプルで覚えやすいほう。ただし、JavaScriptは
変化が早く、数年経つと書き方の常識が変わることもある。
JavaScriptの正式規格名はECMAScript（エクマスクリプト）と
いい、2018年の時点で使われているのは2009年に公開された
ES5というバージョン。ES2015(ES6）という新バージョンへの
移行が進んでおり、現在入手できる入門書やWeb上の情報は
ES5とES6が混合している。

ES5：ES3に厳密なプログラムの開発を強制するstrictモードなどが追加
ES2015（ES6)：クラスやモジュールなどの大規模開発用の機能が追加

本書はES2015を基に解説。

Node.js
Webブラウザの中で動作するJavaScriptをWebブラウザ外でも使用できる
技術がNode.jsである。デスクトップアプリなども開発できる。

本書の読み進め方

繰り返し意味を目にすることで脳を訓練する
タイトル通り、コード上にふりがな（ルビ）を振って解説している。
（note上では面倒なのでしません。）
ふりがなプラス読み下し文で解説を加えている。これを理解することで
プログラムが読める。（こっちはnoteにも入れます。）

//変数answer  入れろ　数値10
  amswer       =      10;

// 読み下し文
　数値10を変数answerに入れろ

実践で理解を確かなものにする
プログラムを読めるようになるのは第一段階。最終目標はプログラムを
作れるようになること。実際にプログラムを入力して何が起きるかを目に
して、自分の体験としよう。エラーも貴重な経験。各章で起こりがちな
エラーを説明しているため、そこも読む。章末には「ドリル」も用意して
いるため、問題に挑戦しよう。

JavaScriptを書くための準備

Chromeをインスト―ル（無料）
Atomをインストール（無料）
https://atom.io/
簡単です。割愛します。日本語の表示の仕方だけ。
①＋installを押下
②検索窓に「japanese-menu」と入力
③「japanese-menu」をインストール

最初のプログラムを入力する

Chromeのコンソールでプラグラムを動かす
Chromeにはデベロッパーツールが付属されている。その中にコンソールが
ある。コンソールでは、Webページ内で動作しているプログラムのエラーを
確認できるほか、JavaScriptを入力して実行することもできる。
本体HTMLファイル上にJavaScriptを書いて実行する必要があるが、今回は
Atomでコードを書いてからコンソールにコピペして実行する。

console.logメソッドで文字を表示する
基本的なメソッドのconsole.logを使う。メソッドとは簡単にいうと
コンピュータへの命令。

console.log('ハロー!');　//　ハロー！

//読み下し文
文字列「ハロー！」をコンソールに表示しろ。

Atomでプログラムを入力して保存しよう
なぜ、いったんAtomに入力するのか？コンソールに直接入力でもできるが、
ミスをすると一から書き直す必要があるため、Atomで書いてミスがあっても
やり直しをしやすくする。プログラムは半角英数字で入力し、大文字と
小文字も区別するため、間違えないようにしよう。
ファイル保存
①Atom上で「ファイル」⇒「新規ファイル」をクリック
②プログラムを入力
③「ファイル」の「保存」をクリック
④ファイル名は何でもいいが、拡張子に「.js」をつける

プログラムをコンソールに張り付けて実行する
①Chrome起動して右上の「：」っぽい縦3点をクリック
　（Windowsなら「F12」キー、Macならcommand+option+I（アイ））
②「その他のツール」の「デベロッパーツール」をクリック
③「Console」をクリック

※Web上ならどこでも開けます
①右クリックの「検証」でデベロッパーツールを開く
　または、WindowsならCtrl+Shift+I（アイ）を押す
②上部の「Console」を開き、「＞」にコードをペースト
③エンターで実行

演算子を使って計算する

JavaScriptは式を使って四則演算ができる。演算子は＋、－、＊、/など。
今回の（）内の目的語となる部分は文字列でないため、’ や ” では囲まない。

足し算と引き算

console.log( 10 + 5 );　//　15
console.log( 10 - 5 );　//　5

//読み下し文
数値10に数値5を足した結果をコンソールに表示しろ
数値10から数値5を引いた結果をコンソールに表示しろ

掛け算と割り算

console.log( 10 * 5 );　//　50
console.log( 10 / 5 );  //　2

//読み下し文
数値10に数値5を掛けた結果をコンソールに表示しろ
数値10を数値5で割った結果をコンソールに表示しろ

整数と実数
-900、0、4000などが整数。小数点を含む数値が実数。
整数と実数はプログラム上は区別される。JavaScriptではNumber型で
同じデータ型になる。

長い数式を入力する

長い式では計算する順番を意識
プログラム上でも数学と同様に計算の式の順番は決まっている。
（）の計算が優先とか、掛け算割り算が優先とか。

console.log( 2 + 10 + 5 );　//　17
console.log( 2 + 10 *  5 );　//　52
console.log( ( 2 + 10 ) * 5 );　//　60
console.log( 5 / (4 * ( 1 - 0.2 )) );　//　1.5625

その他の演算子の優先順位一覧

変数を使って計算する

変数とは
数値や文字列などのデータ類をまとめて「値（あたい）」と呼ぶ。
同じ値で複数個所で何度も使う場合は、プログラムに値を直接入力
していると、値を修正する際に時間がかかってしまう。事前に
繰り返すことがわかっている値は変数に入れておくと便利で、
変数とは値を記憶する箱だと思うとわかりやすい。
JavaScriptの変数宣言は「let」である。由来は、

let x be ○○　xを○○とする

から。イコール（＝）は代入を意味する。変数も ’ や " は不要。

let moji = 'ハロー！';

// 読み下し文
文字列「ハロー！」を変数mojiに入れろ

変数を作成してその値を代入する
プログラムにするとこう。

let moji = 'ハロー！';
console.log( moji );　　//　ハロー！

変数を使うメリット
例えば変数kakakuに何かの商品の定価を入れて、消費税を計算して、
計算後の売値を変数urineに代入して表示する。

let kakaku = 100 ;
let urine = kakaku * 1.10 ;
console.log( urine );　　　//　110

変数kakakuに入れる数値を150に変更すると結果が変わる。

let kakaku = 150 ;
let urine = kakaku * 1.10 ;
console.log( urine );　　//　165

これが変数の便利な点である。複数個所に同じ式があった場合に変数の
中身だけを変えると他も同様に変更できるので、簡単に表示を変えられる。

変数の命名ルールとスペースの入れどころ

変数の命名ルール
1.半角のアルファベット、アンダースコア（＿）、数字を組み合わせて作る
2.数字のみ、また、先頭が数字の名前は禁止
3.予約語と同じ名前は禁止

変数OK： answer name1 name2 my_value moji BALL
変数NG：!mark 12345 1day a+b
予約語：別の目的で使われる単語で変数名には使えない。
　　　　ただし、「trueStory」のように組み合わせると使える。

半角スペースの入れどころ
少々難しい話だが、簡単にいうと、変数宣言の「let」の後はスペースを
入れなさいということ。

let answer = 10;　　変数answerが宣言
letanswer = 10;　　 変数letanswerが宣言

「letanswer」でも変数として認識されるがバグの原因になるため、
こういったことはしない。

メソッドについて

データの入力を受け付ける　prompt()

prompt()はlog()の「出力する」と反対で「入力させる」メソッド。
ユーザーがキーボードで入力したらその結果を返す。この時返される
値を「戻り値（返り値）」という。

let moji = prompt( ' 入力せよ ' );
console.log( moji ) ;

//読み下し文
文字列「入力せよ」を表示してユーザーに入力させた結果を変数mojiに入れろ
変数mojiをコンソールに表示しろ

ちょっと工夫して

let moji = prompt( ' 入力せよ ' );
console.log( ' 入力したのは ' + moji ) ;

//読み下し文
文字列「入力せよ」を表示してユーザーに入力させた結果を変数mojiに入れろ
文字列「入力したのは」と変数mojiを連結してコンソールに表示しろで

データの型とは
データの種類のことを型（Type）という。「文字列」や「数値」など。
promptメソッドの戻り値は常に文字列型になる。ここに数値型を
含めると不具合が起きる。

let kakaku = prompt( ' 価格を入力せよ ' );
console.log( kakaku + 80 );

例えばここで「2500」を入力したとすると、promptをそのまま使うと
入力値が文字列と解釈されてしまい、元々入れている「80」も
文字列として認識してしまう。どういうことかというと、
結果は「250080」になるということだ。そのため、あるメソッドで
型の宣言をしてあげる必要がある。

文字列型を数値型に変換する　parseInt()

前述した日本語はプログラム初心者には意味不明なため、
実際に入力してみよう。

let kakaku = prompt( ' 価格を入力せよ ' );　　//　2500
console.log( kakaku + 80 );　　　　　　　　　 //　250080
console.log( parseInt( kakaku ) + 80 );　　　//　2580

//読み下し文
文字列「価格を入力せよ」を表示してユーザーに入力させた結果を変数kakakuに入れろ
変数kakaku（文字列型）と80（文字列型と解釈）を連結した結果をコンソールに表示しろ
変数kakaku（文字列型）を数値型に変換し、80（数値型として解釈）を足した結果をコンソールに表示しろ

こうすることで数値型同士の計算となり、「2500＋80」が正しく
計算されることとなる。

メソッドとオブジェクト

引数と戻り値
JavaScriptでいろいろなことができるが、ここの「いろいろ」を受け持つの
がメソッドである。メソッドの後には必ずカッコがつき、文字列や式を
書く。カッコの中身は、正式には「引数」という。メソッドに仕事を
させることを「呼び出す」という。prompt（）のように何か値を
返してくれるメソッドは式の中に混ぜたり、他のメソッドの引数に
したりすることができる。

複数の引数を渡す
引数には1つの値だけでなく、複数入れられるメソッドもある。引数は
カンマで区切って、第2引数、第3引数と呼ばれる。

console.log( ' ハロー！ ' , 10 , 3.5 );

//読み下し文
文字列「ハロー！」と数値10と数値3.5をコンソールに表示しろ

メソッドの前にあるものは何か
これまでconsole.logメソッドとしてきたが、実際にはメソッドはlog()だけで
ある。consoleとは何だろうか。実はconsoleはオブジェクトが入った変数
である。オブジェクトとはJavaScriptで操作できる「何か」を表すもの。
例えば、consoleの中に入っているものはコンソールを表すConsole
オブジェクト。ほかにもWebブラウザのウィンドウを表すWindow
オブジェクトやWebページの内容を表すDocumentオブジェクトがある。
オブジェクトは複数の機能（メソッド）と変数（プロパティ）の集合体。
メソッドは関数と同じ意味ではあるが、オブジェクトに所属しているか
どうかで呼び方が変わる。
ちなみにConsoleもWindowオブジェクトのプロパティで、正式には
「window.console.log()」で「window.prompt()」だ。そういう意味で
prompt()は関数ではなくメソッドになる。

エラーメッセージを読み解こう

エラーメッセージはプログラムのおかしな部分を明示してくれる。
全部英語で拒否反応がでるかもしれないが、種類は多くない。
読み解いてプログラムの質向上に使おう。

タイプエラー
ベテランでもミスタイプはある。メソッド名をミスタイプしたら
こういったエラーがでる。

console.lag( ' ハロー！ ' );

Uncaught TypeError: console.lag is not a function at <anonymous>:1:9

// ＜匿名の＞1行9文字目にて
　　未補足の型エラー　：　console.lag　は関数ではない

×　 ：　console.lag()
〇   ：　console.log()　
「Uncaught」はエラー対応処理が用意されていないため、エラーを出すしか
ないという意味で、エラーメッセージの決まり文句のようなもの。
「TypeError」はタイピングのエラーではなく、型（Type）のエラー。
本来なら関数という型がくるはずが、console.lag()は関数ではないため、
型エラーとなる。

リファレンスエラー
変数名の間違いは別のエラーになる。

let moji = prompt( ' 入力せよ ' );
console.log( maji );

Uncaught ReferenceError: maji is not defined

//未補足の参照エラー　：　maji は定義されていない

×　 ：　maji
〇　：　moji
「ReferenceError」は参照エラーで、参照している変数majiの定義が
見つからないという意味。

シンタックスエラー
プログラムを2回張り付けてしまった場合などに起こるエラー。

let kakaku = prompt( ' 価格を入力せよ ' );
console.log( kakaku + 80 );　　　　　　　
let kakaku = prompt( ' 価格を入力せよ ' );　　
console.log( kakaku + 80 );　　　　

Uncaught SyntaxError: Identifier 'kakaku' has already been declared

//未補足の文法エラー　：　識別子'kakaku'は既に宣言されている

「SyntaxError」は文法エラーでJavaScriptの文法に沿っていない書き方を
すると表示される。ここでは前に宣言したkakakuをもう一度、「let」を
使って宣言しなおそうとしたことが原因。

コンソールに表示される「undefined」とは
これはエラーではなく、「値がない」という意味。要は、プログラムを
実行した後に実行したプログラムが戻り値を返さないことを意味している。
ちなみに「NaN」と表示されることがあるが、「Not a Number」の略で
変数に値を入れずに計算を実行した場合などに表示される。

振り返り

はい。ここまでJavaScriptの基礎を学んだというか、プログラミングを
学ぶ上での初歩の初歩を学びなおしたって感じでしたね。
ここまでがChapter1でしたが、意外と型変換とかまでやるんですね。
僕が最初のころプログラミングを学んで意味不明だったとこでしたが、
今はスラスラ入ってくるもんですね。Chapter2はひたすら条件分岐、
Chapter3は繰り返し構文、Chapter4でメソッドの作成、Chapter5は
Webページへの組み込みです。

JavaScriptの醍醐味？と思われるイベント発生時の処理については
書かれていないので別で勉強しようと思います。Chapter2以降は
さらっとまたまとめて記事にしますね。

ではまた！