GitHub - azu/url-cheatsheet: URL manipulation cheatsheet for JavaScriptYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e5439b69c83b50834bd0c07600f1b23fd865e34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
JavaScriptのデバッグにはdebugger文を使おう - Qiita
JavaScript初心者のため、デバッグ力がまだまだ拙くどうしたらデバッグ力ってつくのだ…と悩んでいたら 👨💻 < スタックトレースするといいよ！ 👨💻 < スタックトレースするにはdebuggerとかconsole.trace()使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので🙏 スタックトレースとは スタックトレース (stack trace)とは エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 スタックトレースを使って問題をどう切り分けるか まずは問題が起きている箇所のスコープを狭くしていきましょう💡 問題の切り分け方として ざっくり入口と出口の関数に適切な値が入って
Prism
Download Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. Dead simple Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done! Intuitive Language classes are inherited so you can only define the language once for multiple code snippets. Light as a
Bookmarklet Creator with Script Includer - Peter Coles
Why have a bookmarklet creator? I think bookmarklets are great! However, it’s a pain to smoosh your JavaScript into one line and properly URI encode everything. It’s even more of a pain if you want to rely on external scripts in your bookmarklet. Fortunately, I have just packaged all of these features into the above tool! Enter your JavaScript code Choose if you want to include jQuery* and/or spec
ブックマークレットを作るコマンドラインツール
使い方 使い方は簡単で、ファイル名を渡すかパイプでJavaScriptコードを渡せば、javascript: から始まるブックマークレットとして使える文字列を返してくれます。 $ bookmarkletter code.js # or $ cat code.js | bookmarkletter # Broserifyと合わせるケース $ browserify code.js | bookmarkletter
GulpとTypeScriptでブックマークレット開発環境を作ってみた | Trial and Spiral
Trial and Spiral試行錯誤顛末記録。 或いは日記的な何か。 Web技術寄りな雑記Blog Vue.jsRubyMacガジェットゲーム革工芸旅本 Bookmarkletってご存じですか？ 最近ではあまり聞かないですが、ブラウザのブックマークに登録しておくと選択したらちょっと便利な機能があるやつです。例えば簡単に文字列を整形してコピーしたり、凄く単機能な拡張と思えば近いでしょうか。 作ろうと思った背景前にも書いたように最近ちょこちょことブログをVuePressに移行しててよしぼちぼち完成だ！ と思った矢先にアルファ版だったVeuPressが正式版になって同時にブログ関係のプラグインもアップデートされました。そしたら今まで進めてた移行用のものが使えなくなってしまった。 あとは、よくある他サイトのリンクをブログカードみたいなリンク表示するやつをVueのコンポーネントで実装しようと思っ
Bookmarklet スクリプト変換
ブックマークレット名 スクリプト alert(new Date()); ブックマークレットに変換 テスト実行
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
アンサー: named exportは有害なのか - uhyo/blog
こんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed exportが有害であるとは1ミリグラムも思っていません。 しかし、自分と異なる意見は当然に下等・幼稚なものであるというのは筆者が最も嫌う考え方ですから、このような異なる意見を分析・理解する必要があると思い、アンサー記事という形でまとめました。具体的には、異なる意見に達する理由としては前提が異なることと論理が異なることが主に挙げられます。前提が異なることが分かれば、自分と異なる意見に至った理由を理解でき、場合によっては取り入れることもできます。論理が違うのであれば、それは瑕疵であり指摘しなければいけません。 なお、そもそ
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
)
Javascript: call functions without using parentheses (what?!)
Let's dig in a not-well-publicized ES6 feature: calling functions without using parentheses. If you are familiar with Ruby, you know that in Ruby you can omit parentheses when they're not ambiguous: puts 'hello world' puts('hello world') //-> same result! But we're in javascript and this is not allowed. Uhm... in some forms it IS allowed! How I've discovered this: SQORN In my search for new librar
Node.js Playground | Katacoda
Your environment is currently being packaged as a Docker container and the download will begin shortly. To run the image locally, once Docker has been installed, use the commands cat scrapbook_nodejs_playground_container.tar | docker load docker run -it /nodejs_playground:20220320 Oops!! Sorry, it looks like this scenario doesn't currently support downloads. We'll fix that shortly.
javascriptとの$ってなに - Qiita
JSに触ったばかりですが書いていてよく気になるのが$というサイン。個人的には何か関数や変数を宣言しているときによく使われているといった感覚。 「頭が$で始まる JavaScript の変数名―jQuery の命名則でドルマークを使う意味・由来」という記事には … $ doesn’t have any special meaning in JavaScript—it’s treated just like a letter of the alphabet. It’s simply a popular convention in jQuery code to use the $ prefix as a reminder that the variable contains a reference to a jQuery object … (簡訳)…JavaScriptにおいて「$」はなんら特別
.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、.mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読み
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
Greasy Fork – 便利で安全なユーザースクリプト
ユーザースクリプトについて ユーザースクリプトは、あなたにサイト閲覧時の主導権を与えます。サイトを使いやすく。機能を追加する。余分なものを消す、など。いったんインストールすれば自動でサイトを改善します。Greasy Fork は、ユーザーが作成し投稿したスクリプトを共有しています。自由にインストールでき使うのも簡単です 1. ユーザースクリプト管理ツールをインストール Tampermonkey (Chrome 版) ユーザースクリプトを使うには、まずユーザースクリプト管理ツールをインストールする必要があります。使用できるスクリプト管理ツールの種類はブラウザにより異なります。 デスクトップ モバイル (Android) モバイル (iOS) Chrome: Tampermonkey / Violentmonkey Firefox: Greasemonkey / Tampermonkey /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Closure Compiler Service
Backticks (`…`) calling a function in JavaScript