概要
初心者向けにJavaScriptの基本についての記述です。参考になれば嬉しいです。
JavaScriptとは
Javascript(ジャバスクリプト)とは、プログラミング言語のひとつ。RubyやPHPがサーバーサイドの言語であるのに対し、JavaScriptはクライアントサイドの言語。つまりユーザーから見て目に見える部分のフロントの実装となる。
Javascriptを使用することで実際にユーザーにとっての使いやすいアプリケーションを作ることが出来る。
デベロッパーツール
デベロッパーツールとは開発者が使うツールで、一般的なブラウザ上にあり、誰でも使用することができる。
これを使うことで下記のことができる。
Elements(エレメンツ) ：Webページに対応するHTMLやCSSの確認
Console(コンソール) ：JavaScriptのコードの実行
使い方：使いたいブラウザ上で右クリック→検証をクリック
console.log
ブラウザのコンソール上でJavaScriptのコードを表示するメソッド。
console.log()の()に文字列や値をいれることでその値が表示される。
console.log("Hello World")
変数定義
変数とは文字列や値に名前をつけることで繰り返し使えるようにする機能。
JavaScriptは、変数を定義するのに let, const, var の３つがある。
- let
letは、変数を再代入することが可能な変数定義。正し、再定義は出来ない。
let greet = "おはよう"
//再代入OK
greet = "こんにちは"
//再定義はエラーとなる
let greet = "おはよう"
- const
constは変数の値を再代入出来ない変数定義。
一度代入したら変更出来ないのは一見不便に思えるかもしれないが、そうすることによって思わぬ変更やエラーを防ぐことが出来る。特にチーム開発の場合、他の人が見て変更してはいけない値だということが一目でわかる。
const greet = "おはよう"
//再代入はエラーとなる
const = "こんにちは"
//再定義はエラーとなる
const greet = "おはよう"
- var
varは再代入、再定義することが可能な変数定義。だが最近の開発現場ではあまり使われていない。
var greet = "おはよう"
//再代入OK
var = "こんにちは"
//再定義OK
var greet = "おはよう"
現在は基本的にvarは使われていない為、letまたはconstで変数定義をする。
変わる予定のある値の場合はlet、変わらない値はconstで定義すると良い。
テンプレートリテラル
テンプレートリテラルとは、Javascriptの構文。
ダブルクオートやシングルクオートの代わりにバッククオートで囲むことで文字列の中に挿入することができる。
テンプレートなし
const name = "太郎"
const.greet = "おはよう" + name + "さん"
console.log(greet)
//=> おはよう、太郎さん
テンプレートあり
const name = "太郎"
const.greet = `おはよう、${name}さん`
console.log(greet)
//=> おはよう、太郎さん
例として記述したのは変数定義が少ないが、記述が多くなればなるほどテンプレートリテラルを使用すると記述量が少なくて済む。
以上です！わかりにくいところもあるかもしれませんが、最後まで見て頂きありがとうございました！