はてなブックマーク

0. まとめ var を書かない let もなるべく書かない なるべく const を使う 関数の引数は const のように扱う function をなるべく書かない アロー関数またはクラスやオブジェクトのメソッド定義を使う 関数宣言でなく関数式を使用する 理論上どうしても function が必要な場合もある ジェネレータ関数 function* は使用出来る then() を書かない await を使う 理想的には jQuery を使わない 純粋な WEB API を使用して DOM を操作する getElementById(), getElementsByClassName() querySelector(), querySelectorAll() insertAdjacentHTML() 等 jQuery 非依存のライブラリを使用する fetch() で通信する XMLHttpR

Twitter API や OAuth を学ぶために、ブラウザ上のピュア JavaScript で認証して GET してみました。 学習目的でムリやりブラウザ上で動作させるため、実用的なコードではないです。 1. 準備 1.1. Twitter API 申請など 申請に関しては他の記事が分かりやすいので、各自で調べて申請をお願いします。英作文は必要ですが、自分の場合は申請からすぐ API を使える状態になりました。 1.2. Access token & access token secret ここでは簡単にするために、Twitter Developers のアプリ管理画面から自分用のアクセストークンを作成します。 2. サンプルソースコード ここでは話を簡単にするために以下の条件でコードを書きます。 リクエストメソッドは GET のみ POST は扱わない 認証はアクセストークンによる

CREATE TABLE test ( test TEXT, created_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime')), updated_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime')) ); CREATE TRIGGER trigger_test_updated_at AFTER UPDATE ON test BEGIN UPDATE test SET updated_at = DATETIME('now', 'localtime') WHERE rowid == NEW.rowid; END; テーブル名やトリガー名の test の部分を必要に応じて書き換えてください。 2. 説明 2.1. DEFAULT 制約で DATETIME 関数を使える 「DEF

1. 予備知識 fetch で得た Response や Blob のメソッドはテキストデータの文字コードを常に UTF-8 として扱うため、Shift_JIS 等の UTF-8 以外の文字コードでは文字化けします。 参考「Response.text() - Web API | MDN」 参考「Blob.text() - Web API | MDN」 直接 UTF-8 以外の文字コードを扱うことはできないため、バイナリデータを経由して文字コードを指定してテキストデータに変換します: 方法 1: ArrayBuffer を経由して TextDecoder を用いる textDecoder.decode(arrayBuffer) 方法 2: Blob を経由して FileReader を用いる fileReader.readAsText(blob) 古いやり方のため、本記事では不説明 参考「T

1. 調べようと思ったきっかけ 参考「非推奨の機能、廃止された機能 - JavaScript | MDN」 何となく上のページを読んでいたら、 分割代入型 for...in は非推奨です。代わりに for...of を使用してください。 とあったのですが、for...in のページを見ても「分割代入型 for...in」が何なのか書いてなかったので、気になって調べてみました。 (実は最近まで for...in が非推奨だと勘違いしていました… (汗 2. 分割代入型 for...in (非推奨) 普通の for...in は非推奨ではないですが、「分割代入型 for...in」は非推奨です。 // Array const array = [['a', 1], ['b', 2], ['c', 3]]; console.log('array'); for (const [key, value]

※2019/03/26: 本質的な内容はそのままですが、記事を全体的に修整しました。 自分が初めて JavaScript の非同期を学ぼうとした時に Promise, async, await が何をしたいのかが全然分からなかったので、中で何をやっているかを何となく分かるようにまとめたいと思います。 「外から見てどうやって使うか」は別記事にしています。 参考「もっと簡単に async, await, Promise - Qiita」 0. まとめ コールバック関数を使って非同期処理を記述することができ、実現できることが増える ただし、コールバック関数だけで複雑な処理を書こうとするとスマートに記述できず、ソースコードの品質が下がる Promise を使うことで非同期の処理をスマートに書くことができるようになる (構文の追加) async/await を使うとさらに Promise をスマート

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

※2024-09-10: 記事を全体的に編集しました。 本記事では、ユーザーが <a> 要素や <input> 要素をクリックしたタイミングでなく、JavaScript のコード中の好きなタイミングでファイル選択ダイアログを出す方法について説明します。 click イベントが発生してから何か処理をした後にダイアログを出したい場合も有効です。 ※新しいタブでファイルを表示する場合またはファイルを開く場合、ユーザーの操作によってコードが実行されなければ多くの WEB ブラウザでブロックされます。 本記事では document.createElement() で HTML 要素を作成しますが、静的な HTML でも同様です。 1. ファイルを保存する データから URL を生成する方法がいくつか有ります: オブジェクト URL を使う データ URL を使う 生成した URL を <a> 要素で