console.logをもっと使いこなす！ - Qiita
ブラウザ上でのデバッグにconsole.log()をよく使いますが、MDNのConsole APIのページを見ると色々ありましたので調べてみました。 よく使うコンソールメソッド console.log()： ログ情報の一般的な出力用。 console.info()： 有益な情報の出力用。 console.warn()： 警告メッセージの出力用。 console.error()： エラーメッセージの出力用。 console.log()のカスタムCSSスタイル console.logの引数にCSSを指定し、%cディレクティブを使用すると出力結果にスタイルを適用できます。 ディレクティブの前のテキストは影響を受けず、ディレクティブの後ろのテキストが装飾されます。 文字列の置換 文字列を受け取る console オブジェクトのメソッド (log() など) の 1 つに文字列を渡す場合、次の置換文
極限環境で最終ビルドを絞るためのフロントエンド設計
https://3rdpartyjs.connpass.com/event/289558/
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
PromiseとAsync/Awaitについて - Qiita
Promiseとasync/awaitについて自分の中では理解しているけど、上手く説明できなかったので整理します。 一言で説明できるようになることを目的とします。 JavaScriptは処理を待てません！ console.log("1"); // 1秒後に実行する処理 setTimeout(() => { console.log("2(1秒後に実行)"); }, 1000); console.log("3");
[初心者向け]GoogleMapJavascript APIを用いたマップと検索ボックスの表示方法 - Qiita
googlemapAPIを使ってアプリ上にマップを追加する方法です。 基本的には公式ドキュメントをコピペに沿って記述すれば実現できますが、Javascript初心者の私は解読するのにやたらと時間がかかったので同じ様なことを始める方のために共有しておきます。 出来ること ･マップの表示 ･検索ボックスの表示 ･マップ、検索ボックスの装飾 少し手を加えれば以下のように 装飾することもできます。 手順 1.マップを配置したいhtmlファイルにidを記述 2.javascriptファイルにWebAPIに関する記述をする 3.CSSをいじってマップを装飾する これだけ。 手順1:マップを配置したいhtmlファイルにidを記述 以下公式ドキュメントからの引用です。 ポイントはAPI呼び出し用scriptに libraries=places を記述すること。 これにより検索&検索位置へ画面を切り替えるラ
![[初心者向け]GoogleMapJavascript APIを用いたマップと検索ボックスの表示方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/549d695b8528da41ea3f9b86eb06e49c5bfdf547/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVER29vZ2xlTWFwSmF2YXNjcmlwdCUyMEFQSSVFMyU4MiU5MiVFNyU5NCVBOCVFMyU4MSU4NCVFMyU4MSU5RiVFMyU4MyU5RSVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MSVBOCVFNiVBNCU5QyVFNyVCNCVBMiVFMyU4MyU5QyVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVCOSVFMyU4MSVBRSVFOCVBMSVBOCVFNyVBNCVCQSVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yzg3Y2U0YmNjZmFlY2M1OTEzMzM2NWRhNmUzNGRkNGQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0a2hzaGlxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jMTRiMjMxZjBlNDhmM2ZkNzdlNzBlMjE4ODgzZmVkZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0fba2385ebfb427bfe934068309e03c2)
JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript
JavaScriptの上限・限界値 - Qiita
JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。 テストに使ったスクリプト類は https://github.com/minoki/javascript-limits に置いてあります。 文字列の長さ まずは文字列の長さです。 規格には The String type is the set of all ordered sequences of zero or more 16-bit
正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ
先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て「これは危険だな」と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。 結論 長い記事になるので、最初に「とりあえずこれだけ知っ
require()とは何か？何が便利なのか - Qiita
などとついていますが、このrequire()ってよくわからない。 具体的には、 どうやって使えばいいの？ 普通にscriptタグで読み込む場合とどう違うの？ 「require」でググっても英和辞典とかしかでないんだけど！ ということでざっと調べてみました。 commonJS 以下、要約 そもそもの発端は、「Javascriptって良いよね。ブラウザ以外（ServerSide）でも使おうぜ」ということからだったらしいです。 しかし、scriptタグで読み込むこと前提だったので、HTMLがない（レンダリングエンジンがない）場合に外部ライブラリを参照する方法がない。。。 （さらに言えば、FileやNetwork、標準入出力など色々と不便。） これじゃ困るということで、ServerSideの標準仕様を定めたのがcommonJS。 その中で外部ライブラリを参照する方法が、各JSファイルをモジュール化
WEB AND ME
addEventListenerでthisをbindしつつremoveEventListenerをする。2020.03.10(更新日:2022.02.24) document.addEventListener('click', callback)を書くと、callback()では、thisの参照先が、documentになります。addEventListenerを使うと、thisの参照先は、イベントをかけている要素になります。 その中で、コールバック内のthisの参照先の変えたい時があります。 たとえば、クラスの場合は、callbackに、.bind(this)をつけることによって、thisの参照先をバインドすることができます。 class Sample { constructor() { this.hoge = 'HOGE' this.init() } callback() { conso
js-beautify
This little beautifier will reformat and re-indent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as partly deobfuscate scripts processed by the npm package javascript-obfuscator. Open beautifier.io to try it out. Options are available via the UI. Contributors Needed I'm putting this front and center above because existing owners have very limited tim
ウェブアニメーション API の使用 - Web API | MDN
ウェブアニメーション API により、JavaScript でアニメーションを構築したり、再生を制御したりすることができます。この記事では「ふしぎの国のアリス」を利用した楽しいデモとチュートリアルで正しい利用方法を説明します。 ウェブアニメーション API は、ブラウザー内のアニメーションエンジンを開発者に公開し、JavaScript で操作できるようにします。この API は CSS アニメーションと CSS トランジションの両方の実装基盤となるように設計されており、将来のアニメーション効果への扉を開いた状態にしています。これは、ハックや強制、Window.requestAnimationFrame() なしで、ブラウザーに自分自身で内部最適化をさせる、ウェブ上でアニメーションするためのほとんどのパフォーマンスの高い方法の 1 つです。 ウェブアニメーション API を使うと、インタラク
WeakMap と WeakSet
チャプター ガベージコレクション で学んだ通り、JavaScriptエンジンは、それが到達可能な(そして潜在的に利用される可能性がある)間、メモリ上に値を保持しています。 例: let john = { name: "John" }; // オブジェクトへはアクセス可能です。john がその参照を持っています // 参照を上書きします john = null; // オブジェクトはメモリから削除されるでしょう 通常、オブジェクトまたは配列の要素、もしくは別のデータ構造のプロパティは到達可能と考えられ、そのデータ構造がメモリにいる間は保持され続けます。 例えば、あるオブジェクトを配列に入れた場合、その配列が生きている間は、他の参照がなくてもそのオブジェクトは生きていることになります。 例:
JavaScriptエンジン - Wikipedia
この項目「JavaScriptエンジン」は翻訳されたばかりのものです。不自然あるいは曖昧な表現などが含まれる可能性があり、このままでは読みづらいかもしれません。（原文：英語版 "JavaScript engine" 2019年10月16日 (水) 18:18(UTC)） 修正、加筆に協力し、現在の表現をより自然な表現にして下さる方を求めています。ノートページや履歴も参照してください。（2019年11月） JavaScriptエンジン (英語: JavaScript engine) は、JavaScriptのコードを実行するコンピュータプログラムである。初期のJavaScriptエンジンは単なるインタプリタであったが、近年の全てのエンジンは、性能の向上のためにJITコンパイルを利用している[1]。 JavaScriptエンジンは通常、ウェブブラウザのベンダーによって開発されており、全ての主要
Rails で JavaScript を利用する - Railsガイド
本ガイドでは、JavaScript機能をRailsアプリケーションに統合する方法について解説します。外部のJavaScriptパッケージを利用する場合に使えるオプションや、RailsでTurboを使う方法についても解説します。 このガイドの内容: Node.jsやYarnやJavaScriptのバンドラーを使わずにRailsを利用する方法 JavaScriptをimport maps・Bun・esbuild・Rollup・webpackでバンドルする新規Railsアプリケーションを作成する方法 Turboの概要と利用法 Railsが提供するTurbo HTMLヘルパーの利用法 1 import maps import mapsは、バージョン付けされたファイルに対応する論理名を用いてJavaScriptモジュールをブラウザで直接importできます。import mapsはRails 7から
【JavaScript入門】undefined徹底解説！使い方や判定方法まとめ | 侍エンジニアブログ
undefinedとは？ undefinedは、未定義であることを示す値です。 この説明だけだとちょっとわかりにくいですね。具体的な例で見てみましょう。 例えば、下記のように変数を宣言したとしましょう。 var sample; この場合、「sample」という名前の変数を宣言したことになります。 しかしこれでは、宣言をしただけで変数の中身はありませんよね？ このような状態は「変数に値が定義されていない」という状態になります。 言い方を変えれば未定義。そう、この状態がundefinedという値になるということです。 undefinedを使う場面 では、どのような時にこのundefinedは登場するのでしょうか？ いくつかのケースをこれからご紹介します。 変数の初期値として利用する javascriptである変数を定義したあと、その変数に代入が一度も行われていない時には、その変数にundefi
JavaScriptで書く「var,let,const」の違いと使い分け方法
var、let、constとは JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。 var、let、constとはすべてJavaScriptで変数を宣言する際に使うキーワードです。 たとえば、以下のように記述することで変数を宣言できます。 var techacademy = 'テックアカデミー'; let techacademy = 'テックアカデミー'; const techacademy = 'テックアカデミー'; let、constは新しい記法 3つの宣言キーワード内のletとconstは、ECMAScript2015から採用された宣言方法のキーワードです。 ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。 現在では、国際団体で標準化されたうえでGoogle Chrom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Output48 - 新しく知ったことは、48時間以内にアウトプットしよう
2ality – JavaScript and more
How to validate domain name using regex?