- 1. 【JavaScript】文字列とUnicode
- 2. 【JavaScript】配列⑤ 〜メソッドチェーン〜
- 3. 【JavaScript】配列④ 〜配列を反復処理するメソッド〜
- 4. 【JavaScript】配列③ 〜配列を操作(要素の追加・削除)するメソッド〜
- 5. 【JavaScript】配列② 〜配列から要素を検索するメソッド〜
- 6. 【JavaScript】配列① 〜配列の作成とアクセス〜
- 7. 【JavaScript】データ型とリテラル
- 8. 【JavaScript】値の評価と表示
- 9. 定期的にブラウザ上で〇〇を実行する処理をTypeScriptで実装してみる
- 10. p5.js で createGraphics() と SVGフィルターを組み合わせて使う（CanvasRenderingContext2D.filter で適用）
- 11. 【JavaScript】コメント
- 12. 【JavaScript】オブジェクト（+配列）について復習する
- 13. 【JavaScript】演算子
- 14. 【JavaScript】ラッパーオブジェクト
- 15. 【JavaScript】JSON
- 16. 【JavaScript】Math
- 17. 【JavaScript】Date
- 18. 【JavaScript】条件分岐
- 19. 【JavaScript】ループと反復処理
- 20. 【JavaScript】文と式
【JavaScript】文字列とUnicode
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JavaScriptにおける、Unicodeの構成要素との関係# Code Point
* Unicodeはすべての文字に一意のIDが定義されており、そのIDを`Code Point（符号位置）`と呼ぶ。
* Code Pointを扱うメソッドとして`codePointAt`メソッド、`String.fromCodePoint`メソッドが存在する。
* それぞれ`ES2015`から導入された。## codePointAtメソッド
* 文字列の指定インデックスにある文字のCode Pointの値を返す。“`js
// 引数にインデックスを
【JavaScript】配列⑤ 〜メソッドチェーン〜
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 配列におけるメソッドチェーンを利用した処理方法# メソッドチェーンとは
* メソッドを呼び出した返り値に対して、さらにメソッド呼び出しを行うパターンのこと
* `.`で繋げていく。
* 処理の`見た目を簡潔にできる`ことが特徴(途中の一時的な変数を省略できたり..)
※メソッドチェーンのことを知らないと最初は複雑に見える(た)
* `長過ぎるメソッドチェーン`は読みにくくなる。“`js
const numbers1 = [1, 2, 3, 4];
const numbers2 = [5, 6, 7, 8];// 異なる配列を結合(
【JavaScript】配列④ 〜配列を反復処理するメソッド〜
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 配列の反復処理方法およびメソッド# 配列の反復処理でよく利用されるメソッド
* `foreach`、`map`、`filter`、`reduce` メソッド。## Array.prototype.forEach
* 配列の要素を`先頭から順番にコールバック関数へ渡し`、反復処理を行う。
* コールバック関数へ`要素`、`渡された要素のインデックス`、`反復処理対象の配列`を引数として渡す。“`js
const array = [“One”, “Two”, “Three”];// forEachでの反復処理
array.forEach
【JavaScript】配列③ 〜配列を操作(要素の追加・削除)するメソッド〜
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 配列の要素の追加、削除方法
* 配列の結合方法
* 配列の展開方法# 配列の要素の追加、削除
* 要素を配列の末尾へ追加(`push`)
* 配列の先頭へ要素を追加(`unshift`)
* 末尾から配列の要素を削除(`pop`)
* 配列の先頭から要素を削除(`shift`)## 要素を配列の末尾へ追加(`push`)
“`js
const numbers = [ 100, 200, 300 ];// 配列の末尾へ要素を追加
numbers.push(400);
console.log(numbers); // => [ 100,
【JavaScript】配列② 〜配列から要素を検索するメソッド〜
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 配列の要素を検索、取得するメソッド# 配列から要素を検索するメソッド
* ある要素のインデックスを取得する方法(`indexOf`、`findIndex`)
* 条件に一致する要素を取得する方法(`find`)
* 指定範囲の要素を取得する方法(`slice`)
* ある要素が存在するかの真偽値を取得(`includes`、`some`)## ある要素のインデックスを取得する方法(`indexOf`、`findIndex`)
### indexOf
* 内部的に`厳密等価演算子（===）`で比較する。
* 一致する要素が存在する場合`その要素
【JavaScript】配列① 〜配列の作成とアクセス〜
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 配列とは
* 配列の要素の取得
* 配列の分割代入# 配列
* 値に`順序をつけて`格納できるオブジェクト。
* 配列に格納した値を`要素`、位置を`インデックス`と呼ぶ。
* `配列[インデックス]`と指定することで`要素`を参照できる。
* インデックスは`1`ではなく`0`から始まるということがポイント。“`js
// 配列リテラルで名簿のような配列を作成(変数:nameListに代入)
const nameList = [“Taro”, “Hanako”, “Mike”]; // インデックス:要素 = 0:Taro、1:Hanak
【JavaScript】データ型とリテラル
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。
# この記事で理解できること
* JavaScriptの値のデータ型について
* データ型の分類(プリミティブ型、オブジェクト)
* 主要なデータ型のリテラル# データ型とリテラル
* JavaScriptでは、変数に対する型は存在しないが、値には型(`文字列、数値、真偽値など`)が存在する。
* その値の型のことを`データ型`と呼び、大きく分けると二つ(`プリミティブ型`、`オブジェクト`)に分類される。## プリミティブ型
* `文字列や真偽値、数値`など一度作成すると、値自体を変更できない`イミュータブル`な特性を持つ基本的な型。|型|例・備考|
|–|–|
|真偽値(Boolean)|t
【JavaScript】値の評価と表示
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 値の評価とは
* ブラウザにおける値の評価、表示方法# 前提
当記事における動作環境
* PC：MacBook
* コードエディタ：Visual Studio Code
* ブラウザ：Google Chrome# 値の評価とは
* 入力した値を評価してその結果を返すこと。> **評価**(※Wikipedia一部参照)
> 数学や計算機科学において、変数に関連づけられた値などをもとに関数（関数 (数学)、関数 (プログラミング)）などの式・表現が表す値を計算すること。> あるいは、不等式により値の範囲を絞り込むこと。# ブラウザでJa
定期的にブラウザ上で〇〇を実行する処理をTypeScriptで実装してみる
フロントエンドの開発では、「ブラウザ上で定期的に〇〇を実行する」という処理を実装したい場合があります。
単純な処理であれば、定期的に関数を実行する`setInterval`や、再帰的に関数を呼び出す`setTimeout`を使用すれば十分です。しかし、まれに、「定期的に○○を実行したいが、処理Aの実行中は一時的に○○を停止し、処理Aの終了後に再開したい」などの条件が追加されることがあります。
これらの条件が加わると、定期処理のコードは妙に複雑になってしまいます。
そこで、TypeScriptで定期処理を行うための汎用的で使いやすいコードを書いてみました。
## サンプルコード
“`ts
const setRoutine = ({
callback // 定期的に実行する関数
interval = 5 * 1000, // callbackの実行間隔（ミリ秒）
}: {
callback: Function
interval: number
}) => {
// タイマーID
let timerId = -1
// 再帰関数
const repe
p5.js で createGraphics() と SVGフィルターを組み合わせて使う（CanvasRenderingContext2D.filter で適用）
この記事は、前に以下の記事で書いていた「SVGフィルター」に関するものです。
●p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用） – Qiita
https://qiita.com/youtoy/items/217bfe7e940f2a7e2626もう少し補足すると、上記の記事では `createCanvas()` で作成したキャンバスに、 `style(“filter”, ‘url()’)` という形の [style()](https://p5js.org/reference/#/p5.Element/style) を使ったやり方を用いましたが、今回の内容はそれとは少しだけ違う方法で SVGフィルターを適用する話です。
## CanvasRenderingContext2D.filter を使う
「少しだけ違うやり方」と書いた部分の具体的な内容は、タイトルにも記載している「[CanvasRenderingContext2D.filter](https://developer.mozilla.or
【JavaScript】コメント
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JavaScriptにおけるコメントの種類
* JavaScriptにおけるコメントの書き方# コメントとは
* プログラムの`補足・説明`を行うもの。
* (動作確認や諸事情により)一時的にプログラムを無効化するためにコメント化(`コメントアウト`)することもある。
* JavaScriptでは「`一行コメント`」「`複数行コメント`」の方法がある。
※他、HTML-likeコメントという方法も存在するが割愛## 一行コメント
* 一行ずつコメントを書く方法。
* 「`/`(バックスラッシュ)」を2つ続けて記載した後にコメントの内容を
【JavaScript】オブジェクト（+配列）について復習する
# 目次
[1. 背景](#1背景)
[2. 環境](#2環境)
[3. オブジェクトって何？](#3オブジェクトって何)
[3-1. （補足）シンボルについて](#3-1補足シンボルについて)
[4. オブジェクトの使い方](#4オブジェクトの使い方)
[4-1. 追加する](#4-1追加する)
[4-2. 取り出す](#4-2取り出す)
[4-2-1. 値（バリュー）のみ](#4-2-1値バリューのみ)
[4-2-2. 名前（キー）のみ](#4-2-2名前キーのみ)
[4-2-3. 全体](#4-2-3全体)
[4-3. あるかどうか確認する](#4-3あるかどうか確認する)
[4-4. 削除する](#4-4削除する)
[5. 配列とオブジェクトの違い](#5配列とオブジェクトの違い)
[6. まとめ](#6まとめ)
[7. 参考](#7参考)
[8. 最後に](#8最後に)# 1.背景
実務でJavaScriptを使っているのですが、
:man:「オブジェクトについて復習しといてね」
と教育係の先輩に言われました。そこで今回はオブジェクト（+配列）についてまとめて
【JavaScript】演算子
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JavaScriptのよく使われる演算子について
* 各演算子の評価結果例# 押さえておきたいキーワード
| 名称 | 演算子 |
|———–|————|
| 被演算子(オペランド) ***1**| 計算や(文字列)結合などされる対象|
| NaN | どの数値とも一致しない特性を持つが、Number型の値を表現しているもの|***1** 以降「被演算子」については「オペランド」と表記する
# JavaScriptの演算子
* 使用頻度の高いと思われる各演算子について記載していく。## 二項演算
【JavaScript】ラッパーオブジェクト
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* ラッパーオブジェクトとは
* ラッパーオブジェクトの挙動# ラッパーオブジェクト
* `null`、`undefined`を除くプリミティブ型のデータには、対となる`ラッパーオブジェクト`が存在する。
* JavaScriptでは、プリミティブ型の値の`プロパティへアクセス`する際、自動で対となる`ラッパーオブジェクトに変換されている。`
* 結果的に、プリミティブ型のデータでも、各Objectが持つプロパティにアクセスができる。|ラッパーオブジェクト|プリミティブ型|例|
|——|——|——|
|Boolean|真偽
【JavaScript】JSON
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JSONとは
* JSONで扱える値と型
* JSONオブジェクトの関連メソッド等の使用方法# JSON(JavaScript Object Notation)とは
* JavaScriptの`オブジェクトリテラルをベース`に作られた軽量なデータフォーマット。
* 多くのプログラミング言語がJSONを扱う機能を備えている。
* JSONでは、オブジェクトリテラルのキーを必ず`ダブルクォート`で囲む必要がある。## JSONで値として扱える型
|型|例|備考|
|–|–|–|
|文字列|文字列|
|数値|1、1.234|小数点から始まる
【JavaScript】Math
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* Mathオブジェクトとは
* Mathオブジェクトを利用した数値の生成や比較方法(一部)# Mathオブジェクト
* Mathオブジェクトは`数学的な定数`と`関数`を提供するプロパティとメソッドを持つ、ビルトインオブジェクト。
* 詳細なプロパティ、メソッドは「[こちらのMDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)」に表記されている。# 乱数を生成(randomメソッド)
“`js
// 最小値
const
【JavaScript】Date
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* Dateオブジェクトとは
* Dateオブジェクトのインスタンス作成方法
* Dateオブジェクトに関連するメソッドの使用方法# Dateオブジェクト
* ECMAScriptで定義された`ビルトインオブジェクト`
* Dateオブジェクトにおける時刻は、`UTC`の`1970年1月1日0時0分0秒`を基準とした相対的なミリ秒として保持される。# Dateオブジェクトのインスタンス作成
* インスタンスの作成には`new演算子`を使用する。
* `現在の時刻`、もしくは`任意の時刻`をインスタンス化する方法がある。## 現在の時刻をインス
【JavaScript】条件分岐
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* 条件分岐とは
* if文、switch文による条件分岐の方法# if文
* 条件式の結果によって、「もし変数strがAであれば〇〇をする」のような条件によって`処理を切り替え、分岐`できる。
* 条件式として、比較演算子などを用いた結果(真偽値:`true`、`false`)によって処理を分岐させることもできる。
* また、真偽値以外も指定できるが暗黙的型変換が行われ、その結果によって処理を分岐する。
(参考:[falsyな値](https://qiita.com/andota05/items/1bd440d07660bda0558e)は`
【JavaScript】ループと反復処理
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JavaScriptにおける反復処理の構文、方法# while文
* 条件式が`true`の間、反復処理が行われる。
* 条件式が`false`となる文(処理)が存在しないと`無限ループ`が発生する。“`js
while (条件式) {
// 条件式がtrueの間繰り返す処理
}
“`
“`js
let i = 1;// 変数iが5以下の間処理を繰り返す
while (i <= 5) { // 条件式がtrueの間繰り返す処理 console.log(`${i}回目の処理です`); i++; //
【JavaScript】文と式
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。
# この記事で理解できること
* JavaScriptにおける文、式
* ブロック文の用途# 式
* 式を評価すると結果の値(`評価値`)を得られる。
* `評価した結果を変数に代入できるもの` = `式`という理解で問題ない。“`js
// (数値、文字列などの)リテラルも式
1;
“これも式”;// リテラル(式)と演算子の組み合わせも式
1 + 1;// 「関数を呼び出す」という処理も式
function returnNumber() {
return 7;
}
returnNumber();// これらは全て変数に代入できる
const one =
