今日学んだこと 2021/01/17

学習項目

Java Script 概要

学習内容

Java Scriptとはプログラミング言語の一つでクライアントサイドで力を発揮する。
サイトに動きをつけることができ、例えば
ページ遷移なしで画面表示を切り替えられる
画面更新をせずにサーバーと通信ができる
などのメリットがあり、使い勝手の良いWebページを作成できる。

デベロッパツール

開発者ツール、検証ツールと呼ばれる。HTMLやCSSの確認・編集はElements（エレメンツ）パネル、JavaScriptの実行はConsole（コンソール）パネルにて行うことができる。
console.log: ブラウザのコンソールにテキストを表示させるメソッド。

変数、定数定義

var: 再定義、再代入可能、古い書き方
const: 再定義、再代入不可
let: 再定義不可、再代入可能

var sample = "test"
const sample = "test"
let sample = "test"

テンプレートリテラル

テンプレートリテラルは``で囲むことで使用でき、${}のなかに記入する。

let sample = "test"
console.log(`これは${sample}です`)
// => これはテストです

条件分岐

if文の書き方

if (条件式1) {
  // 条件式1がtrueの時の処理
} else if (条件式2) {
  // 条件式2がtrueの時の処理
} else {
  // どちらもfalseの時の処理
}

配列の取得

rubyの変わらない

繰り返し処理

for文

for (初期化式; 条件式; 加算式) {
  // 繰り返す処理の内容
}

// 例
for (let i = 0; i < 10; i++) {
  console.log(i)
}
// 0~9を表示する

forEach関数
rubyのeachと似たようなやつ

配列.forEach( function(value) {
  // 処理の記述
})

関数定義

rubyでいうところのメソッドをjavascriptでは関数と呼ぶ。まぁ微妙に違うらしいが。
定義方法

function 関数名(仮引数) {
  // 処理
}
console.log(実引数)

また、javascriptでは戻り値をreturnを用いて明示する必要がある。

function calc(num1,num2){
  return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))

関数宣言と関数式

見た方が早い

// 関数宣言
function 関数名( 引数 ){
  // 関数内の処理
}

// 関数式
変数 = function( 引数 ){
  // 関数内の処理
}

補足として、javascriptでは関数宣言が先に読み込まれるという性質がある

無名関数と即時関数

無名関数とはその名の通り関数名無しで定義すること。関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。

即時関数とは関数を定義すると同時に実行される構文のこと。流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。

// 無名関数
const sample = function(num) {
  console.log(num)
}
countNum(1)

// 即時関数
(function sample(num) {
  console.log(num)
})(1)

アロー関数

まぁざっくりいうと省略形のことです。無名関数または即時関数において、より省略した記述をしたい時に使用する。

const 変数名 = (引数) => {
  処理
}

javascriptにおけるオブジェクト

JavaScriptにおけるオブジェクトとは、データや処理といった情報を1つにまとめた集合体のこと。
データはキーとバリューのセットとなったプロパティを指し、突き詰めると、オブジェクトはプロパティの集合体から成り立っている。

JavaScriptにおけるメソッド

JavaScriptおけるメソッドとは、プロパティに紐づけられた処理のこと指し、関数を用いることで代入できる。

let sample {
  name: "sample",
  test: fuction(){...},
}

sample.test()

もともとあるオブジェクト

windowオブジェクト
ブラウザの情報を持っているオブジェクト
documentオブジェクト
ブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクト

DOM

Document Object Model(ドキュメントオブジェクトモデル)の略。HTMLを解析し、データを作成する仕組み。
ざっくりいうとHTMLの要素をJavaScript上で取得し操作するための仕組み

HTML情報を取得する方法

document.getElementById("id名")
引数に渡したidを持つ要素を取得。
document.getElementsByClassName("class名")
classを指定して取得する。getElementsは複数形。
document.querySelectorAll("セレクタ名")
セレクタ名を指定して取得する。
document.querySelector("セレクタ名")
HTML上から引数で指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得する。

まとめ

似てるところも多いけど、フロントよりの言語ということもあって、混乱する。
ゆっくり整理する。
ただ、他の言語を学ぶことで、オブジェクトとは何なのか、returnをどう使うのかとか、より内側を知ることができた気がする。

学習の書き留めプログラミング勉強中

プログラミングで学んだことを日記として残して行こうと思います

今日の学習