ネイティブのJSやったことがない技術を触ってみたシリーズをここにまとめます。随時更新中です!
(JSの基本書式についてこちら)
※参考:【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!
※2021/01/15追加:Realtime Databaseに試しにFetch APIを叩いてみたらCRUD操作できた!
JS基本
new、プロトタイプ、クラス
newとはなにか、インスタンスとはなにか、そしてJSを特徴づけるプロトタイプベースとはなにか。さらにESで新しく追加されたクラスベースとの比較。
URLのパラメータの取得
URLのパラメータ(?hoge=fuga)をlocation.searchで取得して、inputタグに入れる。そのタグをtype=hiddenで非表示にして送信する。
※参考:【JS】フォームのinputタグにURLパラメータを渡す方法
変数var、let、const
もともと変数はvarしかなかったが、追加されたlet、constはそれぞれ何が違うのか、比較してみた。
※参考:【JS】変数 varとletとconst(再代入、再宣言の挙動の違い)
アロー関数
アロー関数のいろんな書き方を試した(イベントリスナに引数付き関数を読み込む方法も)(2020/02/09追加!)
thisを読み込み時に変更したい場合はプロトタイプよりクラス構文の方がいい(2020/02/18追加)
※参考:【JS】アロー関数のthisの挙動(プロトタイプとクラスの違い)
オブジェクト
オブジェクトのプロパティの指定の仕方を検証(2020/02/28追加)
※参考:【JS】オブジェクトのプロパティをCSSのように省略した指定ができるのか検証した
多次元配列
配列の中に配列を入れ子にする多次元配列でJSONに似たデータ構造を作って、そこからデータを引っ張り出してDOMに入れ込んでみる。
※参考:JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)
「for文のi番目」ではなくキー名で指定する。多次元連想配列のキー名は外部の変数でも指定できた!(※2019/12/16追加)
※参考:【JS】多次元連想配列のキー名を外部の変数で指定できるか調べた
正規表現
雰囲気で使ってた正規表現の書き方、ちゃんと向かい合った(2020/05/09追加)
※参考:【gulp】gulp-replaceの引数に書かれている正規表現を掘り下げる
モジュール(import/export)
JSをファイル単位ではなくモジュール(部品)単位で読み込む(※2019/11/08追加!)
※参考:【JS】モジュール(import / export)でどんなことができるのか事始めてみた
プロパティ、メソッド
Math.random()
乱数Math.random()を使って、サイコロやおみくじを作ってみる。
※参考:【JS】Math.random()でつくるサイコロとおみくじ
Date、setTimeout()、setInterval()
日にちを取得するDateと時間を取得するsetTimeout()で平成から令和に変わる瞬間をカウントダウンタイマーを作った。
※参考:【JS】DateとsetTimeout()で作るカウントダウンタイマー(令和まであと何日?)
一回しか実行しないsetTimeout()と複数回実行するsetInterval()の違いといくつかの書き方。
※参考:【JS】setTimeout()とsetInterval()の違い(一回と複数回)
ローカルストレージ
localStorage
localStorageを取得してinputタグに渡して送信することで、URLパラメータでは乗り越えられなかったセッション(ブラウザを閉じたら終わり)の壁を乗り越える!
※参考:【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!
API
WebGL API
ブラウザ上での3D表現に憧れて、調べたりcanvas要素作ってみる。
※参考:周回遅れでもWebGLを事始める!canvas大地に立つ!!
Web Audio API
ブラウザ上での音楽表現に憧れて、いろいろ調べてみる。
※参考:Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪
Fetch API
多次元配列を外部JSONファイルにして、Fetch APIで読み込んでDOMに入れ込んでみる。
※参考:【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む
async/await構文を使ったFetch APIでJSONデータを読み込む(2020/06/05追加)
※参考:【JS】async/await構文で書いたFetch APIからJSONデータを読み込む
Fetch APIでデータを読み込むだけでなく送信もしてみた!(2020/07/31追加)
※参考:【JS】Fetch APIでPOST送信してみる(Form送信との比較も)
Fetch APIでJSON ServerにCRUD操作する(2020/08/13追加)
※参考:【JS】Fetch APIを使ってJSON ServerにCRUDする
Realtime Databaseに試しにFetch APIを叩いてみたらCRUD操作できた!(2021/01/15追加)
※参考:【Firebase】Realtime DatabaseにFetch APIでCRUD操作する
Web Speech API
Web Speech APIを使ってブラウザの音声を読み上げボタンを作ってみた