Help us understand the problem. What is going on with this article?

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

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

(JSの基本書式についてこちら)
※参考:【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!

※2020/06/05追加!async/await構文を使ったFetch APIでJSONデータを読み込む

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(再代入、再宣言の挙動の違い)

アロー関数

アロー関数のいろんな書き方を試した(イベントリスナに引数付き関数を読み込む方法も)(2020/02/09追加!)

※参考:【JS】アロー関数の複数の書き方を試してみた

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データを読み込む

Web Speech API

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

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

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした