JavaScript

JavaScript map関数を使用して必要な要素のみで配列を生成する

こんにちは。ふっくんです。 今回は、 javascript の map 関数をご紹介します。 map関数の使い方 map関数で何ができるかというと 配列の全ての要素の中から必要な要素のみを取り出し、新たな配列を生成することができます! 例えば、以下のような連想配列があるとしましょう。 const animals = [ {‘id’: 1, ‘category・・・続きを読む

Bootstrap4ドロップダウンで選択した項目をボタンに表示したい!

こんにちは!ふっくんです。 Bootstrapを使用してドロップダウンボタンを作って、選択した項目をボタンに表示させたい時ありますよね? こういうドロップダウンで「項目1」を選択すると、 こんな感じで。 Bootstrapの公式ページには、このような動作をするドロップダウンは用意されてなかったため、処理を書いてみました。 ちなみに、JavaScriptの処理・・・続きを読む

JavaScript でフォーカスの当たっているボタンなどからフォーカスを外す

ブラウザー上のボタンを押して HTML などでダイアログを描画した場合、ボタンが隠れていたとしてももともと押されたボタンにフォーカスが当たったままになっているため、 Enter キーなどを押すとまたボタンが押されたことになってしまい、イベントが再発してしまいます。 これを防ぐ方法を考えてみます。 対策 Enter キーでボタンの Click イベントが発火す・・・続きを読む

Gmail で未読メールを一覧表示するブックマークレット

Gmail は便利ですが、簡単に「未読メールをまとめて読む」機能がありません。 標準では受信トレイにすべて未読メールが格納されるのでよいのですが、フィルター等で受信トレイをスキップ (アーカイブ) するようにしている場合は、未読メールを確認するのに複数のラベルを渡り歩く必要があります。 検索で label:unread と叩けば、「未読メールをまとめて読む」・・・続きを読む

Koa.js v2 入門 2 ルーティング (koa-route/koa-router)

最近 Express.js から Koa.js に乗り換えました。 前回の記事 (Koa.js v2 入門 1 (async/await を使ったNode.jsの新しいWeb開発)) では Koa v2 の思想と最初のステップを見てきました。 今回は middleware のうち、たいていのアプリに不可欠なルーティング機能です。 ミドルウェアの一覧を確認 ル・・・続きを読む