JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
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
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
JavaScript 長く使える系の知識 - Qiita
フロントエンドが戦国時代を迎えて数年が経ちましたね。 最新のあれこれの前に、その前提となる部分を押さえると理解が早くなります。基礎知識は土台の様なものです。こういう部分には大きな変化は頻繁には起きないので、長く使えます。また、一度知っておけば変化が起きてもキャッチアップが早くなります。 ※ 読みきれないと意味ないので、だいぶ削りました。 コーディング全般に関する知識 長く使えますし、JavaScript以外でも使えます。設計技法とデザインパターン、美しいコードを書く為のテクニックetc。良い本が沢山出てます。 ↓ 2017年末にバズってました。 【年末年始に読みたい！】優秀なエンジニアが影響を受けた本ランキングトップ32冊！（559冊収録の全ランキングデータPDFファイルつき） あと、変数と関数の命名は超大事 プログラミングでよく使う英単語のまとめ【随時更新】 - Qiita 今さら聞けな
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
末尾再帰による最適化 - Qiita
はじめに ES6 (EcmaScript 6)を試そうと、Babelのドキュメントを読んでいたところ、末尾呼び出し（Tail Call）の最適化をしていることにびっくり。公式リリース（2015年6月）から３ヶ月あまり経ってはいますが、ES6が末尾呼び出し最適化を仕様としてサポートしていることをようやく知りました。 現状で末尾呼び出し最適化をサポートしているブラウザはなく（ブラウザやaltJSなどのES6互換表を参照）、唯一、ES6からES5へのトランスパイラであるBabelのみが部分的（直接的な末尾再帰のみ）ではありながらサポートしているようですね。 今回の記事では、来たるES6時代（いまさらの感はありますが）に備えて、末尾再帰とその最適化について簡単に解説した上で、Babelを利用して実際にJavaScriptでの末尾再帰の最適化を実験してみたいと思います。 ざっくり概要 再帰関数 は関
クロージャ再考 - Qiita
はじめに 中級以上のJavaScriptプログラマを目指す上で、避けては通れない壁の一つは クロージャ（Closure） だと思います。「関数の外側で定義された変数を持つ関数の実行時オブジェクトです」とさらっと説明されることが多いですが、シンプルなだけに理解したつもりになって実は使いどころが分からないってことになりがちです。きちんと自分のものにするには基本から丁寧に理解しないとダメですねってことで、今回はクロージャについてその背景から調べてみたいと思います。 歴史と語源 まずは歴史から振り返ってみたいと思います。Wikipediaによるクロージャの解説では、以下のような説明があります。 クロージャの概念は、1960年代にラムダ計算の機械的な実行モデルを構築するために生み出され、1970年に 静的スコープ と 第一級関数 をサポートするPALプログラミング言語で最初に実装された。1964年、
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
JavaScriptは値渡しか？共有渡し(参照の値渡し)か？
JavaScriptは値渡しなのでしょうか？共有渡し(参照の値渡し)なのでしょうか？普通のObjectはすべて共有渡しだと思うのですが、プリミティブ型(？)については違うようなのです。しかし、StackOverflow(※)でもまとまっていないようで、よくわかりませんでした。詳細を分かる方がいれば、下記について教えて下さい。 ※参考: StackOverflow: Is JavaScript a pass-by-reference or pass-by-value language? 値渡しになる型はあるのでしょうか？ある場合は、どの型がなるのでしょうか？ 1.の型のうちmutableな型はあるのでしょうか？ある場合は、mutableな型の破壊的メソッドはどのようなものがあるのでしょうか？ 値渡しであることが分かる(共有渡しでは説明できない)コードはありますでしょうか？ C++やC#で言う
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
モダンJavaScript環境構築一歩目
JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
React 雑感 - Qiita
3/22 (日) の rebuild.fm で React の話をしようと思っているが、その前に頭を整理するために React 雑感。雑感なので殴り書き。 React はこれ一つで複数の課題を解決しようとしている。そのため、人と議論してると話のコンテキストがぶれやすい。ざっくりは フロントエンドのプログラミングパラダイムを、サーバーサイドのような富豪的なスタイルに変える コンポーネント (雑に言うと独自タグ) 指向で UI を組み立てる ステートレスコンポーネントやメッセージパッシングで疎結合性を高めることにより、イベントの依存関係地獄を解消する。また結果的にテスタビリティを高める あたりだろうか。 React というと最初に目につくのは VirtualDOM だけれども、VirtualDOM は 1 や 3 を達成するために障害となった技術的課題を解消するためのテクニックであってそれ以上
小さく始める isomorphic module pattern - Qiita
せっかく window や node/io の標準モジュールに依存していないロジックであれば、 ブラウザでも node/io で動くようにしておくと色々嬉しい。が軽視されている感がある。 俗に isomorphic な JavaScript と呼ばれている。 それを npm と bower で公開するのであれば、問題はモジュールシステムだ。 最小の isomorphic module pattern 一番シンプルで負荷の少ない方法。 まず、ライブラリを以下のように書く。 // lib.js function Lib() { // 変数は外に出さない } Lib.prototype.foo = function(){ return "foo"; }; this.Lib = Lib; // point
10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書 | niwatako$
JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Promiseの本
Promiseのキャンセル
