JavaScriptの便利な記法や関数の紹介およびそれらの注意点について - Qiita
はじめに JavaScript初学者を抜けたあたりの方にむけて、便利な記法や関数、その注意点について紹介します。 初歩的な文法やデータ型などの知識は前提として解説を省きます。 JavaScriptの巨大なテーマとしては非同期処理などもあるのですが、巨大すぎるために本稿では割愛させていただきます。 let/constの使い分けについて 変数は不変なconstおよび可変なletを利用することができます。原則的にはconstを使い、再代入が必要な個所のみletを使うのが標準的です。 letを利用している時点で 「処理のどこかで再代入される」 と処理内容の推論を働かせてコードを読む人が多いと思います。このようなコードの読み方をするという前提を踏まえてコードの可読性を高めるうえでも、再代入されるかされないかを意識してconst/letを使い分けることが重要です。
JavaScript 実行エンジン V8 の JIT 出力コードを読んでみよう
Chrome の JavaScript はとても高速なことでも有名ですが、その実行エンジンは V8 と呼ばれます。V8 自体は独立したモジュールであり、Node.js 等にも使われております。 V8 が JavaScript を高速に実行する技術の一つが JIT (Just In Time) コンパイルです（一般的に JIT と呼ばれます）。これは、そのまま実行すると遅い JavaScript を実行中にリアルタイムに直接マシンコードに変換し（これが Just In Time と呼ばれる所以です）、途中からそのコードに入れ替えて実行することで高速化を達成しています。特に何度も実行される関数で効力を発揮します。 JIT という名前は聞いたことがあろうとも、実際に JIT がどのようなコードを実行しているのかを確認する機会は滅多にないでしょう。この記事では、実際に V8 の JIT の出力を確
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
The problem with new URL(), and how URL.parse() fixes that | Kilian Valkhof
As someone building a browser I need to parse a lot of URLs. Partially to validate them, but also to normalize them or get specific parts out of the URL. The URL API in browsers lets you do that, but it’s ergonomics aren’t ideal. The problem with new URL() The “new” in front of new URL() indicates that it’s used as a constructor: calling it creates a new URL instance for you. When you give it a ma
JavaScriptのカリー化について - Qiita
const addCurry =(a) => { return (b)=>{ return (c)=>{ return a+b+c } } } console.log(addCurry(2)(3)(5)) // 10 えっ何で引数のあとにまた別の引数が？ addCurry(2, 3, 5)ではなくaddCurry(2)(3)(5)で動けるの？ （早速真似して動かせてみた）動け..た！？ 何この書き方、はじめて見た！（新大陸発見した気分です） そして何日かいろんな参考文章をかみ砕いて、Curryingが利用しているClosureがまだはっきり分かっていないので一緒にまとめてみました。 こちらです↓ JavaScriptのクロージャについて そして今回はカリー化の理解をまとめていきたいと思います！ 参考文章はこちらです↓ Understanding JavaScript currying Cl
Developer essentials: JavaScript console methods | MDN Blog
Building on our previous "Developer essentials" post on grep, we're looking at an API you'll always rely on when building for the web: the humble console. The console is where you experience delight when you see your JavaScript working, and sorrow when all you find is a cryptic error message. People use the console to log outputs such as a calculation's result, a REST API's return value, the outco
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
HTML attributes vs DOM properties
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
JavaScript: 最初の 20 年 (翻訳) - inzkyk.xyz
翻訳について これは Allen Wirfs-Brock, Brendan Eich 著 JavaScript: the first 20 years の翻訳です。英語版は CC BY 4.0 ライセンスで公開されています。 この翻訳は CC BY 4.0 ライセンスの許諾に基づいて公開されます。 PDF/EPUB 版について この翻訳の PDF/EPUB 版を BOOTH で販売しています。
JSON
JSON (JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。 JavaScriptプログラミング言語 （ECMA-262標準第3版 1999年12月）の一部をベースに作られています。 JSONは完全に言語から独立したテキスト形式ですが、C、C++、C#、Java、JavaScript、Perl、Python、その他多くのCファミリーの言語を使用するプログラマにとっては、馴染み深い規約が使われています。これらの性質が、 JSONを理想的なデータ交換言語にしています。 JSONは2つの構造を基にしています。 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構造体、ディクショナリ、ハッシュテーブル、キーのあるリスト、連想配列として実現されています。
【JS】「ただの {}（ブロック文）」を使うと嬉しいこと
JavaScript の 「ブロック文」 をご存知でしょうか。 波括弧（ブレース）で囲む、コレです。 if ブロック if () {} や、for ブロック for () {} として目にすることが多いですが、 {} 単体でもブロック文になります。 これだけだとオブジェクトと思ってしまうかもしれませんが、ブロック文になります。 （オブジェクトとブロック文の解釈については javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない - メモを揉め が詳しいです） なんの意味もないように見える「ただの {}（ブロック文）」ですが、意外と便利なことがあるのでこの記事ではそれを紹介します！
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
Powerful Scheme interpreter in JavaScript | LIPS Scheme
;; &() is object literal used with quasiquote (let ((obj `&(:name "LIPS Scheme" :version ,lips.version))) ;; you can access JavaScript properties ;; with dot notation, print is display + newline (print (string-append obj.name " " obj.version)) ;; you can mix scheme and JavaScript (setTimeout (lambda () (alert (JSON.stringify obj))) 1000) #void) With LIPS you can mix Scheme and JavaScript. You can
Deno - A secure runtime for JavaScript and TypeScript
DenoはJavaScriptとTypeScriptのためのシンプルでモダンで安全なランタイムです。V8を使用し、Rustで書かれています。 デフォルトで安全。ファイルやネットワークなど環境へのアクセスは明示的に有効にしない限り起こりません。最初からTypeScriptをサポート。1つの実行ファイルで実行可能。依存関係インスペクター(deno info)やコードフォーマッター(deno fmt)などのビルトインユーティリティーがあります。Denoで動作する審査済み(監査済み)の標準モジュール: deno.land/std があります。
なぜfor文は禁止なのか？関数型記述のススメ - Qiita
var totalOfEvenNumberUnder100 = 0; for (var i = 0; i < 100; i++) { if (i % 2 === 0) { totalOfEvenNumberUnder100 += i; } } 命題に、「繰り返す」という文字がないのに、forで繰り返しています。手続き型に慣れたプログラマは、もう違和感を感じなくなってしまっているかもしれませんが、なぜ繰り返すのでしょうか。0から100未満の数字がほしいだけなのに。 また、最初に0で変数を初期化するのも命題にはありません。 さらには、偶数のみを取り出す処理と足す処理が交互に行われることになっています。偶数のみを累計する、という命題とは違う処理になってしまっています。 もちろん答えは一緒ですが、命題とは別の処理になってしまっているともいえます。 推奨 できるだけ処理に名前をつけていきます。 命題
関数型スタイルをあなたのコードに取り込む - Qiita
関数型プログラミングは便利だけど 関数型（以降: FP) は便利だが、オブジェクト指向プログラミング(以降: OOP)や、手続き型プログラミング(以降: IMP)と比べるとスタイルが違うので、導入をためらうこともあるだろう。 いきなりFP にするのではなく、徐々に FPっぽく変更していくのが現実解である。したがって、既存のコードや新しいメンバのプログラミングパラダイムを 徐々に FPっぽく変更していくスキルが必要だし、現実問題として重要だろう。そのための具体的な方針を妄想してみたので垂れ流す。コードはJavaScript。 免責：ある程度 FPの素養がある人を対象としているので、初歩的なことはやらない #01. 純粋に関数の引数を設計 純粋関数の良いところは、その関数が必要とする全ての情報が関数の引数に明示されている点につきる（少なくとも私にとっては）。あなたが関数を作るときは、それがあた
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flying planes with JavaScript
Why We Should Stop Using JavaScript According to Douglas Crockford (Inventor of JSON)
.NET Blazor