Leaflet地図 リスト by 晴歩雨描
ブログ：Leaflet地図、作成記事「まとめ」 Step1：OpenStreetMap。地図にマーカー表示（東京タワー） [ブログ] Step2：OpenStreetMap。ラベル表示（東京タワー） [ブログ] Step3：国土地理院地図、Esri World Topo Map 切り替え（東京タワー） [ブログ] Step4：Googleマップ 追加（東京タワー） [ブログ] Step5：緯度・経度、標高を表示（富士山） [ブログ] Step6：現在地表示ボタン（東京タワー） [ブログ] Step7：フルスクリーン表示。Leaflet.fullscreen版。 [ブログ] Step8：フルスクリーン表示。requestFullscreen()版。 [ブログ] GPX表示(1) [ブログ] GPX表示(2)（移動距離、所要時間表示） [ブログ] GPX表示(3)（＋標高グラフ：Highcha
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだ
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
SweetAlert2
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID の
regex101: build, test, and debug regex
An explanation of your regex will be automatically generated as you type.
VSCodeのJavaScript用拡張機能Quokkaが便利 - 背筋を伸ばしてスタートアップするブログ
VSCode用の拡張機能「Quokka」が便利だったので紹介します。JavaScriptのコーディングの際にエラーになる箇所を実行前に評価してくれてリアルタイムに表示してくれる拡張機能です。 使い方 エディタ左側のExtensionsにて「Quokka」と検索し、インストールします。 その後、実行したいファイルを開き、 Cmd + Shift + p > 「Quokka.js: Start on Current File」を選択すればOKです。 何が便利なのか リアルタイムにコードの内容を実行、評価してくれる コーディングと同時にコードの内容を実行評価してくれて、エラーがある場合はその内容を当該コードの右側に表示してくれます。 また、変数の値をconsole.logなどを使うことなく表示してくれます。 コードカバレッジがわかる 左側の色のついた四角は実行されたコードのカバレッジになります。
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
JavaScriptのイベントをたくさん見られるサイト
JavaScriptでよく使うイベントの概要をざっくりまとめ、それぞれのイベントオブジェクトをコンソールで確認できるサイトです。
スマートフォンサイトのイベント〜jQuery – IT工房｜Webデザイン入門
スマートフォンなどのモバイルサイトを作成するときには専用のイベントが必要になります。 今回はタップ、スワイプのイベントに対応する方法を解説します。 タップイベント タップとは、画面を指先で短く1回叩くことをさします。通常はPC用ページのクリックイベントでもタップに対応していますが、少し挙動がおかしかったりレスポンスが悪かったりすることがあります。 次のサンプルは通常のclickイベントです。サンプルをPCとスマホで確認して挙動を確認してください。 clickサンプル $('.button').on('click',function(){ $('.result').text('touchした！'); }) clickイベントでも特に問題なく動いていることが確認できます。 では、次にスマホ用のイベント「touchstart」を使用したサンプルを確認してみましょう。 touchstartサンプル
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita
動的に生成された複数の要素に、生成されたタイミングで処理を行いたい
JavaScript Promiseの本
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
three.js - JavaScript 3D library
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
