本記事の目的
この記事は自身のJavaScriptに対する知識の定着を図るため、また、同じような初学者が理解するきっかけになればと思い作成しています。間違い等ございましたらお手数ですがご連絡いただけますと幸いです。
JavaScriptの概要とメリット
プログラミング言語の一つ。クライアントサイドに用いられる。
例えば某サイトで服を購入しようと考えた際に服→メンズ→サイズ...と選択する際にマウスのポインタを選択肢上に移動させると次々に新しい選択項目が表示されるようなものをイメージしてもらうとわかりやすいかと思う。
上記の例で話すのであれば、ページの移動なしで画面の表示を変更することができる、サーバーとの通信回数を減らすことができるというメリットがある。
コンソールパネルを用いてJavaScriptを実行する
JavaScriptのコードを実行し、その結果を表示するためにはデベロッパーツールを使用する。一般的なブラウザに付属しており誰でも使用することができる。
ブラウザ上で右クリック→検証を押す、もしくはcommand + option + cキーで表示可能。
また、デベロッパーツールは検証ツールと言われ、以下のような作業ができる。
- 表示しているサイトのHTMLの要素の確認・編集
- 表示しているサイトのCSSの確認・編集
- JavaScriptの実行
JavaScriptにおける変数について
var,const,letの三種類を用いて変数を定義する。
それぞれの違いは以下の通り。
var・・・再定義と再代入が可能。
const・・・再定義と再代入ともに不可能。
let・・・再代入は不可能だが、再定義は可能。
varの使用(検証ツールのconsoleより)
'var'
var sample = "Hello"
console.log(sample)
Hello（←が表示される）
'再定義'
var sample = "再定義"
console.log(sample)
再定義（←が表示される）
'再代入'
sample = "再代入"
console.log(sample)
再定義（←が表示される）
constの使用(検証ツールのconsoleより)
'const'
var sample = "Hello"
console.log(sample)
Hello（←が表示される）
'再定義'
var sample = "再定義"
console.log(sample)
エラーになる
'再代入'
sample = "再代入"
console.log(sample)
エラーになる
letの使用(検証ツールのconsoleより)
'let'
let sample = 'Hello'
console.log(sample)
Hello（←が表示される）
'再定義'
let sample = "再定義"
console.log(sample)
エラーになる
※2021年1月16日現時点で、Google chromeだとエラーにならない。バージョンアップにて変更した模様？
要注意です！
'再代入'
let sample = "再定義"
console.log(sample)
再定義（←が表示される）
オブジェクト
プロパティを複数集めたものの集合体のこと。また、プロパティとはキーとバリューによって構成されている。
オブジェクトの値を取得するためにはオブジェクト名.プロパティ名のように記述することで取得することができる。
'例'
const sample = { color: 'blue'}
console.log(sample.color)
blue(←が表示される)