JavaScriptをもうちょっと理解する54のトピック - Qiita
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
JavaScriptのデザインパターンについて
どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し
Optimize long tasks | Articles | web.dev
Published: September 30, 2022, Last updated: December 19, 2024 Common advice for keeping JavaScript apps fast tends to boil down to the following advice: "Don't block the main thread." "Break up your long tasks." This is great advice, but what work does it involve? Shipping less JavaScript is good, but does that automatically equate to more responsive user interfaces? Maybe, but maybe not. To unde
Rust and WebAssembly without a Bundler | Tung's Word Box
Posted on 2022-08-04, Updated 2022-08-06; Tags: javascript, programming, rust, webassembly, webdev If you're just getting into compiling your Rust code into WebAssembly and want to load it in a web browser, you might be taken aback by the multitude of ways of doing so. This seems to be due to the differing pace of web browsers implementing web platform features over the years. A lot of entry-level
A Whole Website in a Single JavaScript File
This site is a pretty standard demo website; a site with links to different pages. Nothing to write home about except that the whole website is contained within a single JavaScript file, and is rendered dynamically, just in time, at the edge, close to the user. The routing is fairly minimal: we use the router module which uses URLPattern under the hood for pattern matching. /** @jsx h */ /// <refe
JavaScriptの演算子の優先順位と「禁止ルール」の一覧
ただし、種別は以下の通りです。 prefix (前置演算子) …… もとの式の手前に何個でもつけられる演算子。 例: -~-~x postfix (後置演算子) …… もとの式の直後に何個でもつけられる演算子。 例: x.foo()`bar`[0] postfix once …… もとの式の直後に1個だけつけられる演算子。 例: x++ は可能だが x++-- はパースされない。 逆に ++--x はパースされるが、構文とは別のルールで禁止される。 (後述) infixL …… 中置演算子で左結合 (演算子の優先度が同じ場合は左側にあるほうが優先される) 例: 0.1 + 1.0 - 1.0 は (0.1 + 1.0) - 1.0 になる infixR …… 中置演算子で左結合 (演算子の優先度が同じ場合は右側にあるほうが優先される) 例: 2 ** 2 ** 3 は 2 ** (2 **
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
JavaScriptに密かに存在する“無名関数宣言”
この記事では JavaScript エンジニアがしてしまいがちなある誤解を紹介し、それがなぜ誤解なのかを解説します。 その誤解とは、「関数宣言には必ず名前が必要である」ということです。これはexport defaultの場合に例外が存在しているため、誤解となります。 JavaScript の関数宣言 JavaScript で関数を作る方法は色々ありますが、その中でもfunctionキーワードを用いる方法は初期から存在しています。functionキーワードを用いて関数を作る場合は関数式と関数宣言の 2 つに大別されます。関数式はその名の通り式である一方で、関数宣言は文のように使用され、巻き上げ (hoisting) の挙動を持つことが特徴的です。 // 関数式 const func = function (num) { return num * 2; }; console.log(func(
An introduction to WebAssembly for JavaScript Developers
If you transmit a number whereas an integer encoded on 64 bits is expected you will get an exception: let run = async () => { try { let bytecode = await fetch("add/add.wasm"); let wasm = await WebAssembly.instantiateStreaming(bytecode); console.log(wasm.instance.exports.addInt64(1,2)); } catch(e) { console.error(e); } }; > run().then(); TypeError: wasm function signature contains illegal type Call
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)とした後に、関
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
TypeScript without TypeScript -- JSDoc superpowers
One way to think about TypeScript is as a thin layer around JavaScript that adds type annotations. Type annotations that make sure you don’t make any mistakes. The TypeScript team worked hard on making sure that type checking also works with regular JavaScript files. TypeScript’s compiler (tsc) as well as language support in editors like VSCode give you a great developer experience without any com
Faster JavaScript calls · V8
Show navigation JavaScript allows calling a function with a different number of arguments than the expected number of parameters, i.e., one can pass fewer or more arguments than the declared formal parameters. The former case is called under-application and the latter is called over-application. In the under-application case, the remaining parameters get assigned the undefined value. In the over-a
`undefined` vs. `null` revisited
Many programming languages have one “non-value” called null. It indicates that a variable does not currently point to an object – for example, when it hasn’t been initialized yet. In contrast, JavaScript has two such non-values: undefined and null. In this blog post, we examine how they differ and how to best use or avoid them. undefined vs. null # Both values are very similar and often used inte
JavaScript | キーボードの入力イベントを実装する方法 | 1 NOTES
JavaScriptだけでキーボードの入力情報をaddEventListener()メゾッドで取得して発火イベントを実装する方法のサンプルコード集です。 「onkeydown」「onkeypress」「onkeyup」などのDOM oneventハンドラーでの実装方法は別ページでの紹介となっています。 キーボードの入力イベントの実装サンプルaddEventListener()メゾッドを利用したキーボード入力イベントの実装サンプルとサンプルコードになります。 See the Pen JavaScript addEventListener key event by yochans (@yochans) on CodePen. 上記の動作サンプルとして紹介している処理のサンプルコードになります。 <p id="output"></p>document.addEventListener('keyp
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
A visual guide to React Mental models
I’ve learned that the biggest difference between someone that has mastered a language, framework or tool and someone who hasn’t lies in the mental models they use. One person will have a clear and advanced one and the other will not. By having a good mental model you can intuitively understand complex problems and device solutions much faster than if you had to find a solution with a step-by-step
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iframe sandboxでユーザー入力スクリプトを実行する
