javascriptの基礎知識 -立ち位置，主な機能，変数，数値と演算子-
目次
この記事の目的
- javascriptの関しての知識をまとめています．
- 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
- 「5. 数値と演算子」以降では参考サイトの一部または全部が英語のためそれの翻訳を含んでいます．
- コード上の明らかな間違いがありましたらコメントいただければ幸いです．
- その2（文字列など）はこちら
- その3（条件式と繰り返し文）は[こちら](https://neigetale.hatenablog.com/entry/2020/09/29/065237）
javascriptとは何か，何ができるのか
javascriptとは何か
- 動的なwebページを作成する際に広く使われている技術
- DOM（後述）を介してhtml, cssを変更し，見た目（ユーザーインターフェース; UI）を更新する．よってhtml, cssより後に読み込まれ，実行される必要がある．
- コードが実行される場所により，サーバーサイドコードとクライアントサイドコードと呼び分けがされ，javascriptはどちらにも使われる．サーバーサイドコードには他にPHP、Python、Ruby や ASP.NETなどがある．
- html内に
<script> your code </script>とする書き方と.jsという拡張子で別ファイルコードを書くやり方がある．分量とそのコードの汎用性に応じた場合分けが必要．
何ができるのか
- 変数への値格納，文字列に対する操作，イベント（ボタンのクリックや画面遷移）発生時の動作
- ブラウザAPIを用いた複雑な動作の容易な実行（DOM APIを用いたHTMLの生成，削除，変更，動的なページの見た目の変更，Geolocation API による地理的な情報の取得，Canvas と WebGL APIによる2D や 3D グラフィックでのアニメーションなど）
- サードパーティAPIを用いた外部機能の読み込み（Twitter API を使用したツイート表示Google マップAPIを使用した地図を埋め込みなど）
参考サイト
javascriptを書くための基礎知識
プログラミング的思考
- あるものをプログラミングを用いて作成する際には，実現したい機能（こういうことをしたい）についての言葉をプログラムにて実行可能な動作に置き換えた言葉に言い換えなければならない
- 言い換えとはユーザーの操作とそれに対する動作との関係を順序よく追いかけ，場合分けすることである．
変数の定義
- 変数は
letまたはverにて定義する．プログラムを通じて変化しない変数であればconstをつけ，定数化する． - htmlのタグ内で
class ="A"やfor ="A"と設定したものは，javascriptにおいて
const const_val = document.querySelector('.A');
と記述することにより操作可能になる．
関数
- 関数は再利用可能なコードのかたまり．同じ操作を繰り返したい際に用いる．
- 特定の機能を実現するためにも関数を使いコードを部品の集合体とする．
演算子
- おなじみの加減乗除演算子は他の多くの言語と共通で
+, -, *, /を用いる．文字列に対する+は文字列同士の結合を表す． - C/C++でおなじみの
+=のような追加演算子も使える．（a = a +1;とa +=1;は同じ意味） - 論理演算子は
===, !==, <, >を用いる．（===は厳密に等しいという意味でjavascriptにおいては==と異なる演算子）
条件式 - C/C++と書き方は同じで，
if (condition) {} else if (condition) {} else {}
の3つを駆使して組み立てる．
ループ
- ループは
for (let i = 1; i < n; i ++) { roop process }
と記述できる．letを使うこと以外はC/C++と同じ．
イベント
- イベントとは，特定の操作（例：ボタンをクリックする）に対して特定のコード（例：入力された値を足し算する）を実行すること．
- イベントリスナーにてイベント発生を検知し，イベントハンドラー内の処理を実行する．
オブジェクト
- htmlの一つ一つのタグで囲まれた部分はオブジェクトとして扱われるのでそのオブジェクト属性（名前やID,クラス）を指定することでオブジェクトを操作できる．（入力値を読み取る，色を変える，余白を設定するなど）
参考サイト
javascriptのエラー処理
エラーは大まかに文法のエラーと論理のエラーに分けることができる．
- 文法のエラーとは，コンパイル段階で検出されるタイプのエラーでスペルミス，大文字と小文字，存在しない関数（これもスペルミスによるものが多い），全角文字，文末の
;や), }のつけ忘れ（始めと終わりの記号がペアになっていない）などが該当する． - 論理のエラーとは，コンパイルは通るがプログラムが意図した通りに動かないようなエラー．配列の領域外アクセス，
if文の条件分岐間違い，and, orの使い分け，代入=と比較===の取り違え
文法エラーへの対処
論理のエラーへの対処
- エラー箇所は自分で発見する他ない．基本的には1行ずつどういった計算（処理）を行っているか確認しながら進めていく．
alertやconsole.log()などの値を出力しながら意図しない数値がや文字列が出現している箇所を特定し，処理の妥当性を検証する．
参考サイト
変数
変数の基本
- 変数とは，値を格納しておくための「箱」のようなもの．（実際のところ少なくともC言語においてはメモリ空間の先頭アドレスと型に応じたバイト数として確保される）
- 変数は，数値，文字列，論理値，（広義的には）関数やクラスなどを格納することができる．
- つまるところ変数はその要素として，アドレス（メモリ空間上の格納場所），型（文字列，数値など），バイト数（型に応じて規定される），格納情報（
"abc",1024など）をもっている.
変数の宣言と初期化
- 変数は，宣言と初期化をすることで使用可能となる．
- 宣言は「型+変数名」と記述すること．使用する前に必ず宣言する必要がある．
let myName; let myAge;
- 初期化は実質的に必須であり，（コンパイラによって数値は
0，文字列は""などが自動で入ることもあるが安全とコード記述の統一のためには必要）宣言した変数に最初の値を入れること．
myName = "Tom";
myAge = 25;
- 宣言と初期化は同時に行うことができる．行数が減らせるので推奨．
let myName = "Tom"; let myAge = 25;
- 変数は基本的に
letを用いて宣言する．(verは使わない)verは変数の初期化後に宣言できるverは好きな場所に同じ変数を何度でも宣言できる
などの特徴があり，太字部分が混乱やバグを招きかねないので，（IE11以前をサポートする必要がない限り）使用しない．
変数の命名ルール
- 一般的には
0-9,A-Z,a-z,_のみを用いて宣言する． - 先頭に
0-9，-は使えない - 大文字と小文字は区別される．
- 予約語(
let, function, forなど)は使えない． - 長すぎる語，短すぎる語は可読性を下げるので避け，簡潔で意味の伝わる名前にする
- 2語以上を連結する際は
myName, myAgeなど小文字始まりのキャメルケースを用いる．（これは使う人により様々なルールが考えられる．要は変数だとわかる連結方法をとればよい，ということ）
変数の型
- 数値型 - 整数値と実数値が入る．クオーテーションマークで囲まない．
let myAge = 17;
- 文字列型 - 文字の連結，シングル(
'')またはダブルクオーテーション("")で囲む．
let myName = "Tom";
- 真偽型 -
trueまたはfalseの2値のみを持つ．is,hasなどをつけることが多い．以下の例ではtrueとなる．
let isLarge = 6 > 3;
- 配列型 複数の値を格納できる．角括弧
[]を用いて宣言し，番号を入れることでアクセスできる．（番号は0始まり）
let myFamilyNameArray = ['Tom', 'Lisa', 'Bob', 'Sara']; myFamilyNameArray[1] // 'Lisa' と表示．
- オブジェクト型
let prefecture = { name : '石川', capital : '金沢' }; prefecture.name // メンバーの取り出し方．
- プログラムを通じて変わらない（変えれたくない）ものは
constを用いて宣言する．変更しようとするとエラーが発生．
const monthsInYear = 12; monthsInYear = 10; // これはエラー
参考サイト
数値と演算子
数値の種類
- 整数
integer，浮動小数点数（倍精度実数）float，倍精度浮動小数点数（倍精度実数）doubleの3種類がある． - 進数上の分類として10進数，2進数，8進数，16進数（cssの色設定で出てきた）もあるが10進数以外は基本レベルでは扱わない．
型の自動推論
- C/C++などでは数値の区別があり宣言時にユーザー（プログラマー）が決めなければならないが，javascriptでは全て
numberという型で扱う
let myInt = 5; let myFloat = 6.667; myInt; // 「5」と表示 myFloat; // 「6．667」と表示 typeof myInt; // 「number」と表示 typeof myFloat // 「number」と表示
Numberオブジェクトのメソッド
- 小数点以下を任意の桁数で丸める
toFixed()メソッド
let lotsOfDecimal = 1.766584958675746364; lotsOfDecimal; // 「1.766584958675746364」と表示 let twoDecimalPlaces = lotsOfDecimal.toFixed(2); twoDecimalPlaces; // 「1.77」と表示．小数第2位までに丸められた．
- データ型を変換（キャスト）する
Number(変換元の変数)メソッド
let myNumber = '74'; // 文字列としての「74」 myNumber + 3; // 文字列の結合として認識され，結果は「743」となる Number(myNumber) + 3; // 整数に変換（キャスト）されるので結果は「77」となる
算術演算子と演算子の優先順位
+, -, *, /, %, **が基本的な算術演算子．+, -, *, /は四則演算%は数学で言うmodで，左側の数値を右側の数値で割った際の余りを計算する．**は累乗を計算する．3乗以上の計算ではこちらを使う方が記述量が少ない．- 演算子には優先順位があり，例えば乗除計算は加減計算に優先する．優先させて計算させたい項がある場合にはその項を括弧で囲む．
let num1 = 8; let num2 = 3; num1 % num2; // 「2」と表示 num1 ** num2; // 「512」と表示
インクリメント/デクリメント演算子
let num1 = 8; let num2 = 3; num1++; // 値を表示してから加算を実行する． 「8」と表示される ++num1; // 加算を実行してから値を表示する． 「9」と表示される num2--; // 値を表示してから減算を実行する． 「3」と表示される --num2; // 減算を実行してから値を表示する． 「2」と表示される
代入演算子
=のことであるが，もう少し複雑な+=,-=,*=,/=も用意されている．
let x = 9; let y = 3; x += y; // x = x + y; と同じ意味で，結果は「12」 x -= y; // x = x - y; と同じ意味で，結果は「6」 x *= y; // x = x * y; と同じ意味で，結果は「27」 x /= y; // x = x / y; と同じ意味で，結果は「3」
比較演算子
trueかfalseかを判定したいときに用いる演算子．主なもので6種類．
let num1 = 8; let num2 = 3; let num3 = 3; num1 === num2; // false num1 !== num2; // true num2 < num3; // false num2 > num3; // false num2 <= num3; // true num2 >= num3; // true
- C/C++で用いられる，
==,!=はjavascriptでは値として等しいかのみ判定し，型が等しいがまでは判断しない．
let num1 = 1; let isBool = true; num1 === isBool; // 型が違うため「false」 num1 == isBool; // trueを値で表すと「1」であり，値が等しいため，「true」
