Javascript

1/3ページ

Typescript 3.x と Webpack 4.x を合わせて使う方法まとめ

Typescript 3.x と Webpack 4.x を合わせて使う Typescript はコンパイルすることで Javascript のコードに変換できますが、複数ファイルをバンドルする機能はありません。したがって何らかの方法で複数ファイルのモジュールを1ソースにバンドルしなければなりません。 今回は Webpack を使って、Typescript をビルドして得られた Javascrip […]

[Javascript] Mapクラスを使った連想配列の定義方法

Javascriptで連想配列を定義 連想配列(あるいは辞書型やハッシュテーブル)は、従来のJavascriptの機能として直接的には提供されていませんでした。代わりに、Javascriptでは連想配列の機能を実現するためにObjectを使っていました。 上記の通り、一通りデータの操作は可能ですが、若干無理しているところはあります。特にデータの削除は delete を使ってオブジェクトのプロパティ […]

Javascriptでファイル選択した画像を表示する方法

<input type="file">で選択した画像を表示したい <input type="file">を使って選択した画像を、ファイルをサーバーにsubmit(アップロード)することなくブラウザ上にJavascriptで表示する方法をまとめます。 ファイルをアップロードする前にブラウザ上で選択された画像が確認できるので、プレビュー表 […]

Hashids で短いユニークUUIDを生成する方法

短いけどユニークなIDを生成したい アプリやサービスを開発していると、ユニークなIDが必要になる局面に出くわすことがあります。ユニークなIDというと、UUID が使えると思いますが、これは16進数表記の文字列で非常に長い(例: 550e8400-e29b-41d4-a716-446655440000) です。 長いIDになっても問題ない場面であればUUIDを使うのがよいと思いますが、できるだけ短く […]

[Javascript] Webページからの離脱時に確認メッセージを表示する方法

Web画面上でのよくある誤動作 Webページでデータを入力している最中に、誤ってリロードしたり別ページに遷移してしまうことがあります。場合によっては入力内容がすべて消えたり入力途中のデータが破棄されて最初からやり直しになってしまいます。 そのようなことがないように、対策としてページから離脱する場合に確認のメッセージを表示するとよいでしょう。 以下、その方法をまとめます。 Webページのアンロード時 […]

[Javascript] 経過時間や経過日数を計測する方法(getTime)

Javascriptで経過時間を計測する Javascriptの処理のパフォーマンスを計測したり、あるいはタイマーみたいな機能を実装する際に、ある時点からの経過時間や経過日数を計測したいということがあると思います。 今回はその方法をまとめます。 Date オブジェクトと getTime 関数 Javascriptで日付を扱うには Date オブジェクトを利用します。Date オブジェクトは get […]

[Javascript] オブジェクトから指定したプロパティを削除する方法(delete演算子)

オブジェクトからプロパティを削除したい Javascriptでオブジェクトから特定のプロパティを削除する方法についてまとめます。 具体的には hasOwnProperty 関数で false を返すように、プロパティを削除します。 例えば 次のようなオブジェクトを定義したとき、a, b, c の各プロパティがあるので hasOwnProperty 関数が true を返します。d は定義していない […]

[JS] 分割代入(Destructuring assignment)構文について

分割代入(Destructuring assignment)構文とは 分割代入 – JavaScript | MDN 分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 例えば、オブジェクトのプロパティを取り出す時に、いちいち […]

[Javascript] オブジェクトが指定されたプロパティを保持しているかどうかの判定

オブジェクトのプロパティ判定 Javascriptにおいて、オブジェクトが指定されたプロパティを保持しているかどうかを判定したいことがあります。 判定するための方法として、in 演算子と hasOwnProperty 関数があるので、それぞれの使い方と違いをまとめます。 in 演算子 in – JavaScript リダイレクト 1 | MDN 概要と構文 in 演算子は、指定されたプ […]

[puppeteer] ヘッドレスブラウザの操作でスクレイピング、クローリング

puppeteer とは GitHub – GoogleChrome/puppeteer: Headless Chrome Node API puppeteer とは、GUIを操作することなく、プログラムからAPIでブラウザ(Chrome)を制御できる Node.js で作られた ライブラリ です。ヘッドレス(GUIなし)でも制御できるので高速です。 Node.jsのライブラリとして提 […]

1 3