Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。

Javascript

2/5ページ
Javascript

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

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

続きを読む
Javascript

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

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

続きを読む
Javascript

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

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

続きを読む
Javascript

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

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

続きを読む
Javascript

React, JSX で条件分岐(If)やループ(For)を使う方法

ReactコンポーネントのJSXで条件分岐やループを使いたい ReactコンポーネントをJSXで書いて切るときに、条件分岐やループを使いたくなります。VueやAngularなどでは属性を使ってうまく書くことができますが、JSXでは直接IF文やFor文を使うことができません。 ここでは特定の条件でのみ要素を表示したり、複数の要素をまとめて表示するための方法をまとめます。 条件分岐 JSX内インライン […]

続きを読む
Javascript

React で publicフォルダ内の静的ファイル(画像)を参照する方法

Reactで画像を表示させる方法 create-react-app で環境を作ったReactアプリの場合、Reactで画像をコンポーネントに表示するには、画像ファイルを import することで Javascript から参照することができます。 例えば、以下の例はロゴ画像を表示するヘッダーです。内部で動いているWebpackがモジュールとして組み込んでくれるため、このようにJavascriptか […]

続きを読む
Javascript

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

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

続きを読む
Javascript

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

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

続きを読む
Javascript

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

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

続きを読む
Javascript

Firebase Hosting 静的ファイルを公開する方法

Firebase で 静的ファイルを公開する Hosting を使ってみる | Firebase Firebase の提供するサービスの1つに、静的ファイル（HTML、CSS、JavaScript など）をホスティングできる Hosting というものがあります。無料プランでもコンテンツを HTTPS で配信可能です。 Fibrase Hosting Hosting を使ってみる | Fireba […]

続きを読む
1 2 … 5