Edited at

ネイティブJSでいろいろやってみたシリーズ(随時更新)

ネイティブのJSやったことがない技術を触ってみたシリーズをここにまとめます。随時更新中です!

(JSの基本書式についてこちら)

※参考:【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!

2019/11/08追加!モジュール(import / export)


JS基本


new、プロトタイプ、クラス

newとはなにか、インスタンスとはなにか、そしてJSを特徴づけるプロトタイプベースとはなにか。さらにESで新しく追加されたクラスベースとの比較。

※参考:【JS】newとプロトタイプとクラス


URLのパラメータの取得

URLのパラメータ(?hoge=fuga)をlocation.searchで取得して、inputタグに入れる。そのタグをtype=hiddenで非表示にして送信する。

※参考:【JS】フォームのinputタグにURLパラメータを渡す方法


変数var、let、const

もともと変数はvarしかなかったが、追加されたlet、constはそれぞれ何が違うのか、比較してみた。

※参考:【JS】変数 varとletとconst(再代入、再宣言の挙動の違い)


多次元配列

配列の中に配列を入れ子にする多次元配列でJSONに似たデータ構造を作って、そこからデータを引っ張り出してDOMに入れ込んでみる。

※参考:JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)


モジュール(import/export)

2019/11/08追加!

JSをファイル単位ではなくモジュール(部品)単位で読み込む

※参考:【JS】モジュール(import / export)でどんなことができるのか事始めてみた


プロパティ、メソッド


Math.random()

乱数Math.random()を使って、サイコロやおみくじを作ってみる。

※参考:【JS】Math.random()でつくるサイコロとおみくじ


Date、setTimeout()

日にちを取得するDateと時間を取得するsetTimeout()で平成から令和に変わる瞬間をカウントダウンタイマーを作った。

※参考:【JS】DateとsetTimeout()で作るカウントダウンタイマー(令和まであと何日?)


ローカルストレージ


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に読み込む


Web Speech API

Web Speech APIを使ってブラウザの音声を読み上げボタンを作ってみた

※参考:【JS】Web Speech APIを使ってページのテキスト読み上げボタンを実装してみた