JavaScript関連のことを調べてみた │ f@ctor

1. D3 v7 入門 – Enter / Update / Exit
2. ブラウザのウィンドウをスクリーン上で動かした時の位置の変化が Babylon.js で描画したパーティクルの数・背景の色などに影響する処理【Babylon.js-3】
3. MapLibre GL JSにdeck.glレイヤーを組み込む方法
4. 同期処理と非同期処理の違いついて簡単なまとめ
5. 【日本人エンジニア必見】英語圏の優良学習コンテンツまとめ
6. 動的生成したstyleタグが可能にすること（JavaScriptで要素生成前にCSSを変更）
7. kintoneでjsカスタマイズ時の日付と小数点アリの計算をするときのポイント
8. JSで日付扱うならmoment
9. WebAssembly の過去・現在・未来
10. Rechartsの軸ラベルを見切れないようにする方法
11. Web上で使える璃奈ちゃんボードを作った話
12. フィンランド語で音声入力をしよう！
13. LINEで「ぽちずかん」外出先でのこどものぐずり対策に。3巻配布中！
14. Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。
15. 苦手克服したい「JSXの{}にはJavaScriptの式書く！！」
16. 【JointJS】DirectedGraphを利用してツリー形式の図を作成する
17. 要素からはみでたら文字を丸めるJSプラグインを作成
18. e.preventdefaultの挙動について
19. HERE Maps APIを使って避難所・避難場所を表示してみる
20. 現代開発者のためのCSS基礎技術

D3 v7 入門 – Enter / Update / Exit

本記事は D3 v7 入門のための記事です。特に Data Join (Enter / Update / Exit) の基本的なところをまとめました。少し複雑なので、あいまいさを排除するため、重複した説明を繰り返している箇所もあります。冗長に感じられたらすみません。

開発環境はテキストエディタまたは Visual Studio でコードを書き、以下の Python 標準の Web サーバを使って動作確認しています。

“`
python -m http.server

http://localhost:8000/test1.html
“`

以下、簡単なサンプルコードを示しながら、D3 の基本的な機能を説明していきたいと思います。上から順番に呼んでいただければと思います。

【参考サイト】
[D3 Getting started](https://d3js.org/getting-started)
[d3-selection](https://d3js.org/d3-selection)
[d3tutorial](https://github.com/sgratzl/d3tut

元記事を表示

ブラウザのウィンドウをスクリーン上で動かした時の位置の変化が Babylon.js で描画したパーティクルの数・背景の色などに影響する処理【Babylon.js-3】

この記事は「[Babylon.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/babylonjs)」の 20日目の記事です。

## 今回の内容
この記事では、以下の記事で書いていた「スクリーン上でブラウザのウィンドウを動かしたら、そのウィンドウの移動（位置）が描画に影響する」という内容と、Babylon.js のパーティクルの描画を組み合わせてみようと思います。

●「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ – Qiita
　https://qiita.com/youtoy/items/945edb13856417c8c901

### 実行した結果
まず、今回の内容を実行した結果から紹介します。
以下の動画内の内容についてざっくり書くと、ウィンドウが画面の上のほうにあるか、少し真ん中よりの位置（もしくはそれより下）にあるかで、パーティクルの数・背景の色が変わります。

<a href='https://qiita.com/shi-works/items/cd99cabae941facab6e4'>MapLibre GL JSにdeck.glレイヤーを組み込む方法</a></h3> <blockquote><p># はじめに<br /> :::note info<br /> この記事は [MapLibre Advent Calendar 2023](https://qiita.com/advent-calendar/2023/maplibre) 20日目の記事です。<br /> :::<br /> [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/)は2.5次元のインタラクティブな地図を描画するライブラリですが、一方で、3Dのデータ表現が弱いというところがあります。そこで、便利な方法として、3Dのデータ表現に長けている[deck.gl](https://deck.gl/)のレイヤーをMapLibre GL JSに組み込む方法を紹介したいと思います。具体には、[3D都市モデルPLATEAU 3D Tiles](https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/e4f5708633d0a62233b8b02a6f9340f50e120556/3d-tiles/plateau-3dtiles-str</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>GIS</div> <div class='tag-cloud-link'>foss4g</div> <div class='tag-cloud-link'>deckgl</div> <div class='tag-cloud-link'>MapLibre</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/shi-works/items/cd99cabae941facab6e4'>元記事を表示</a></div> <h3 id="outline__4"><a href='https://qiita.com/matsubond/items/af0b89427624d430b898'>同期処理と非同期処理の違いついて簡単なまとめ</a></h3> <blockquote><p>## 同期処理と非同期処理の違い</p> <p>**同期処理**ってのは、一つの仕事が終わるまで、ほかの仕事が待たなきゃいけないやつ。例えば、以下のJavaScriptコードを見てみる。</p> <p>“`javascript<br /> function 同期処理() {<br /> console.log(“タスク1”);<br /> console.log(“タスク2”);<br /> console.log(“タスク3”);<br /> }</p> <p>同期処理();<br /> “`</p> <p>**非同期処理**はもうちょっとフリータイムがあって、待たなくてもいい感じ。JavaScriptでこんな感じに書ける。</p> <p>“`javascript<br /> function 非同期処理() {<br /> console.log(“タスク1”);</p> <p> setTimeout(function() {<br /> console.log(“タスク2（非同期）”);<br /> }, 1000);</p> <p> console.log(“タスク3”);<br /> }</p> <p>非同期処理();<br /> “`</p> <p>### いいところと悪いところ</p> <p>**同期処理**はシンプルでわかりやすいけど、タスクが長いと待ち時間ができちゃう。</p> <p>**非同期処理</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>async</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/matsubond/items/af0b89427624d430b898'>元記事を表示</a></div> <h3 id="outline__5"><a href='https://qiita.com/phen/items/94bd9e5d5dfd665ad044'>【日本人エンジニア必見】英語圏の優良学習コンテンツまとめ</a></h3> <blockquote><p>この記事は[Nuco Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nuco)の20日目の記事です。</p> <p>:::note info<br /> 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。<br /> また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=94bd9e5d5dfd665ad044)まで。<br /> :::</p> <p># はじめに<br /> エンジニアリングの分野では、技術の進化が日々進んでおり、エンジニアにとって継続的な学習が不可欠です。新しい技術の習得やスキルの向上に有効な学習手段が重要です。</p> <p>日本では日本語のコンテンツはもちろんありますが、最先端の技術を取得するには、英語圏のコンテンツは切りたくても切り離せないことです。本記事は、日本人エンジニアが自身のスキルを向上させ、最新の技術に追いつくための優れた英語コンテンツをご紹介します。</p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>エンジニア</div> <div class='tag-cloud-link'>英語コンテンツ</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/phen/items/94bd9e5d5dfd665ad044'>元記事を表示</a></div> <h3 id="outline__6"><a href='https://qiita.com/saka212/items/05b4455d3c79a5899dba'>動的生成したstyleタグが可能にすること（JavaScriptで要素生成前にCSSを変更）</a></h3> <blockquote><p># はじめに<br /> 動的に生成される要素のCSSをあらかじめ変更しておきたい。といった稀なケースの対応方法。</p> <p>先に方法を書いてしまうと<br /> 「JavaScriptで生成したstyleタグにCSSを書いて、htmlのheadタグに追加して、動的生成にする要素に適用する」原始的な方法です。</p> <p>## 稀なケースとは？</p> <p>例えば「動的生成される要素のCSSを変更したいけど、要素の生成を監視はしない」といったお題があり、以下のような縛りまである場合。</p> <p>生成する動的要素に対して、<br /> – 新しいclassやidを追加しない<br /> – style属性を使ってCSSを書き込まない<br /> – 外部スタイルシートも修正しない</p> <p>## JavaScriptでよくある要素のCSS変更方法<br /> JavaScriptを使用したCSS変更の多くが、以下のように要素の取得が前提になっています。<br /> “`javascript:JavaScriptでよくある要素のCSS変更<br /> // 要素を取得<br /> var div = document.getElementById(‘target’);<br /> // または下記で取得<br /> // var div = document.</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/saka212/items/05b4455d3c79a5899dba'>元記事を表示</a></div> <h3 id="outline__7"><a href='https://qiita.com/j-kume/items/c1c7f39abca7b80a11fa'>kintoneでjsカスタマイズ時の日付と小数点アリの計算をするときのポイント</a></h3> <blockquote><p># 概要<br /> 日付の計算と小数点ありの場合の計算についての対処方法について学びましょう！<br /> kintoneアプリのテンプレートもダウンロードできるので、実際に操作しながらご確認いただけます！</p> <p># ポイント<br /> * 日付・時刻の計算は、思ったよりも複雑(日またぎ、月またぎ、年またぎ、うるう年など)なので、積極的にライブラリを使いましょう。<br /> * サイボウズが提供している **[CDN](https://cybozu.dev/ja/kintone/sdk/library/cybozu-cdn/)** に日付ライブラリとして **[Luxon](https://moment.github.io/luxon/#/)** が置いてあるので、それを使うとよいかなと思います。<br /> * 軽さですと **[Day.js](https://day.js.org/)** などもおすすめです。<br /> * ちなみに、**[developer network](https://cybozu.dev/ja/)** には、**moment.js** についての記述が散見されますが、現在moment.jsは**メンテナンスモード**に</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>kintone</div> <div class='tag-cloud-link'>カスタマイズ</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/j-kume/items/c1c7f39abca7b80a11fa'>元記事を表示</a></div> <h3 id="outline__8"><a href='https://qiita.com/YutaManaka/items/3b99b4812252005ad703'>JSで日付扱うならmoment</a></h3> <blockquote><p>## はじめに<br /> 私は株式会社qnoteにて、勉強会の幹事を務めております。<br /> 2023年度勉強会の珠玉のネタを2023Qiitaアドベントカレンダーに投稿していこうと思います。</p> <p>## 対象者<br /> この記事は下記のような人を対象にしています。</p> <p>– 駆け出しエンジニア<br /> – プログラミング初学者</p> <p>## 結論<br /> JSで日付扱うなら、Dateよりmomentです！</p> <p>## 解説<br /> フロントエンドで日付を加工して表示させたい時、ありますよね。<br /> Date()とMoment()の手法を比較しました。</p> <p>## Date()は冗長<br /> “`javascript<br /> const date = new Date ()</p> <p>const year = date.getFullYear() // 年<br /> const month = date.getMonth() + 1 // 月<br /> const day = date.getDate() // 日<br /> const dayOfWeek = date.getDay() // 曜日(数値)<br /> const dayOfWeekStr = [ “日”, “月”, “火”, “水”, “木”, “金”, </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>date</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>初心者向け</div> <div class='tag-cloud-link'>moment.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/YutaManaka/items/3b99b4812252005ad703'>元記事を表示</a></div> <h3 id="outline__9"><a href='https://qiita.com/sachaos/items/e3a613b018febb898fde'>WebAssembly の過去・現在・未来</a></h3> <blockquote><p>## はじめに</p> <p>WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。<br /> それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。</p> <p>まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。<br /> そして現在の　Wasm　がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。</p> <p>## WebAssembly とはなにか</p> <p><img decoding="async" width="200" alt="web-assembly-logo" src="https://github.com/carlosbaraza/web-assembly-logo/blob/master/dist/logo/web-assembly-logo.png?raw=true?test=1&y=n"></p> <p>WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wa</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Go</div> <div class='tag-cloud-link'>WebAssembly</div> <div class='tag-cloud-link'>wasm</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sachaos/items/e3a613b018febb898fde'>元記事を表示</a></div> <h3 id="outline__10"><a href='https://qiita.com/april418/items/5ee5bbfb2904bc38cc04'>Rechartsの軸ラベルを見切れないようにする方法</a></h3> <blockquote><p>この記事は　[intimatemerger Advent Calendar 2023](https://qiita.com/advent-calendar/2023/intimatemerger)　の２０日目の記事です。</p> <p>## はじめに</p> <p>はじめまして。<br /> [株式会社インティメート・マージャー](https://corp.intimatemerger.com/)開発本部でエンジニアをしています、 @april418 です。</p> <p>弊社では多くのデータを扱っています。<br /> そのデータを活かすために昨今では生成AIの活用なども行っていますが、人の目で見て判断できるようにすることも大切です。<br /> そのため、弊社の IM-DMP という製品では、グラフなどを用いてデータを可視化する機能を提供しています。</p> <p>IM-DMP では React ベースのグラフ表示ライブラリ [Recharts](https://recharts.org/) を使用しています。<br /> レスポンシブ対応や幅広い種類のグラフに対応しているなど、非常に素晴らしいライブラリです。</p> <p>しかし、日本語のラベルだと自動改行がうまくいかず、ラベルが見</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>recharts</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/april418/items/5ee5bbfb2904bc38cc04'>元記事を表示</a></div> <h3 id="outline__11"><a href='https://qiita.com/marukun_/items/534768a35bfbc389abc0'>Web上で使える璃奈ちゃんボードを作った話</a></h3> <blockquote><p>この記事は [N/S高等学校 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/n-s-highschool) 20日目の記事となります。</p> <p>https://qiita.com/advent-calendar/2023/n-s-highschool</p> <p># はじめに<br /> こんにちは。marukun_と申します。去年に引き続き、今年もN/S高等学校 Advent Calendarに参加させていただきます。<br /> 今回はWeb上で手軽に動作する璃奈ちゃんボードを作成したので、いくつかの実装を抜粋しながら紹介していきます。<br /> # 璃奈ちゃんボードとは<br /> 璃奈ちゃんボードとは、アニメ「ラブライブ！虹ヶ咲学園スクールアイドル同好会」に登場する感情表現が苦手な女の子、天王寺璃奈(CV.田中ちえ美)が感情表現を行うために使うボードです。璃奈ちゃんは普段、あらかじめペンで表情を描いておいたスケッチブック版璃奈ちゃんボードを使用しています。</p> <p>![image.png](https://qiita-image-store.s3.ap-northeas</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>WebSpeechAPI</div> <div class='tag-cloud-link'>感情分析</div> <div class='tag-cloud-link'>Next.js</div> <div class='tag-cloud-link'>face-api.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/marukun_/items/534768a35bfbc389abc0'>元記事を表示</a></div> <h3 id="outline__12"><a href='https://qiita.com/hiroki-yod/items/495975d616c854e2ef43'>フィンランド語で音声入力をしよう！</a></h3> <blockquote><p># はじめに<br /> 最近、フィンランド語の勉強をはじめたソフトウェアエンジニアです。そのうち旅行に行けたらいいなと思っています。フィンランドを勉強するにあたり困ったことは、英語などとは異なり、会話ができる教材がないことです。それならば作ってしおうと思い、フィンランド語会話アプリを趣味で絶賛開発中です。</p> <p>今回は、フィンランド語で音声入力をする方法まで解説します。</p> <p># 前提知識<br /> ### WebSpeechAPI<br /> Webブラウザで音声入力をするには、WebSpeechAPIを利用します。Web Speech API とは、ウェブブラウザが音声認識と音声合成を行うためのインターフェースを提供する技術です。このAPIを使用することで、ウェブページやアプリケーションはユーザーの話し言葉をテキストに変換したり、テキストを音声で読み上げたりすることが可能になります。Web Speech APIは二つの主要な部分から成り立っています</p> <p>https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API</p> <p>### react-speech-recogni</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>WebSpeechAPI</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>Next.js</div> <div class='tag-cloud-link'>フィンランド語</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/hiroki-yod/items/495975d616c854e2ef43'>元記事を表示</a></div> <h3 id="outline__13"><a href='https://qiita.com/ped-yui123/items/2f215087931ea2f66de9'>LINEで「ぽちずかん」外出先でのこどものぐずり対策に。3巻配布中！</a></h3> <blockquote><p>## 「ぽちずかん」：子供がぐずる時の救世主！</p> <p><iframe width="560" height="315" src="https://www.youtube.com/embed/tnQqb1iQ9J8?si=EiUbFMcCii4e0vkb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>

こんにちは、ものづくり小児科医のうえだです。
小さいお子さんのいるご家庭のみなさま、外出時のお子さんのぐずりに困りることってありますよね？
「今だけちょっと静かにしてて。。じっとしてて。。」
荷物がたくさんになるのも嫌だし、静かな場所ではスマホで動画も流しづらいし…。ボタン押す楽しみ！押すと何か出てくるわくわく！ついでに図鑑という知育要素あり！それが「ぽちずかん」です。
LINE上で使

元記事を表示

Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。

# はじめに

この記事は [2023 年の MDN 翻訳 Advent Calendar](https://qiita.com/advent-calendar/2023/mdn-translation-community-japan) 向けに作成したものです。

こんにちは。debiru です。「Firefox は利用者数が少ないので対応ブラウザから外します」とか言っているサービスは Web 標準を冒涜しているので滅んでどうぞ。

今日は記念すべき Firefox 121 リリース日なので、改めて Firefox 121 でできるようになったことをお伝えするとともに、Firefox 122 あるいは 123 でサポートされる重要な機能についてお話したいと思います。

# Firefox 121 がリリースされたよ

Firefox 121 でのキャプチャ画像です。

![Firefox 121 では :has() 疑似クラスが使えます](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178936/51947c7

元記事を表示

苦手克服したい「JSXの{}にはJavaScriptの式書く！！」

## はじめに
エンジニアになって3ヶ月経ち、それなりにコードを書いて気づいたのですが…
苦手なところってありませんか？？
いつも間違えてエラーが出たり、なかなか覚えられない文法など…

今日エラーが出たところが私の苦手ポイントでした。
もう流石に引っかかりたくないので、戒めのためにまとめたいと思います。

## 私の苦手ポイント
私の苦手ポイントは、**JSXの{}の中に何を書けばいいのかわからない**ことです。
JavaScriptの式を書くと知識として知っていても使いこなせておらず、同じようなエラーを出してしまいます。
以下、まさに今日出たエラーを具体例として紹介します。

## 具体例
### 背景
クリックすると画面遷移をするボタンがすでに実装されています。
どの画面に遷移するか？によって遷移先とボタンのラベルが異なります。
これまでは、ボタンの種類は2種類だけでしたが、もう１つボタンの種類を増やすことになりました。

### 方針
こちらが元のコードです。
元は三項演算子で書かれてました。ここに、`toPlanC`という分岐を入れることになりました。
“`react

元記事を表示

【JointJS】DirectedGraphを利用してツリー形式の図を作成する

JointJSにはDirectedGraphという、有向グラフを作成するためのレイアウト機能が用意されています。今回はそちらを使ってツリー形式の図を作成していきます。

## 完成イメージ

以下のようなツリー形式の図を作成できます。
各四角形の座標は四角形に紐づいたLinkの情報からDirectedGraphが自動計算して決定してくれます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/a1bbd5cb-c6c3-4277-4e54-ba73532c3c67.png)

## 実装

### 下準備

DirectedGraphを使用するためには、`dagre`と`graphlib`というライブラリを追加で取り込む必要があります。お手軽に利用する場合は以下の`

Back to Top

タグ
その他

© Copyright 2024 f@ctor. f@ctor by FIT-Web Create. Powered by WordPress.