React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません(仕様 7.2.14)。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値(false とみなされる値)との比較は、ゆるい比較演算子であっても区別されます(仕様 同上)。 console.log(undefined == fa
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は? const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
Intro 長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、 RFC 9239 として公開された。 これにより、推奨される MIME タイプが text/javascript に統一されることになった。 かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。 JavaScript MIME Types HTTP で Response する際に指定する Content-Type は、その内容がなんであるかを Client に Indicate し、適切な処理を促すために使用される。 例えば HTML が text/html であったりするように、 JS も内容はテキストなので text/javascript が自然に思える。 しかし、例えば MS が実装していた JS 互換の JScript
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト(モジュール名前空間オブジェクト)として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
September 6, 2021 Rails 7 will have three great answers to JavaScript in 2021+ Rails has been unapologetically full stack since the beginning. We've continuously sought to include ever-more default answers to all the major infrastructure questions posed by modern web development. From talking to a database, to sending and receiving emails, to connecting web sockets, to rendering HTML, to integrati
So recently, I bumped into a situation where the network works/fails randomly. As it affects the consistency of my test results, I decided to implement a fetch_retry function which retries fetch upon failure up to n times. Introduction Fetch in Javascript is great. I hope you will agree that it provides a simple yet robust enough interface to do our AJAX requests. However, network doesn't always w
blog.shibayu36.org 前回の記事でKarma, Mocha, Chaiを使ったJSのユニットテスト環境を作ることができた。しかしテストを書き続けていると、「手元で全体のテストを再実行するのに時間がかかる」という問題が起こった。そこで今回は「今編集中のテストのみをEmacsから実行する」という作戦で問題を解決しようと考えた。 今回のサンプルコードは https://github.com/shibayu36/typescript-project-sample/tree/9e6baf1ebc9cd60083515918b23b6cb1dc24cea8 にあるので参考に。 課題 JSのテストをずっと書き続けていると全体のテストを実行するのに10〜数十秒程度かかるようになってくる 手元でkarma startを使ってテストをしていると、ファイル変更のたびにテストを実行してくれるがka
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり:私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
Hi! I'm Ben. I make software in Durham, North Carolina. This is my site where I write about engineering leadership and productive product teams. If you're interested seeing more, feel free to subscribe. First time on the site? Start here. 3 Pillars For Effective Work Jan 13, 2023 There are 3 primary reasons why one human may be more effective than another in a given work situation. Caring - All th
RequireJS はみんな使ってるらしーし、 何かかっこいいし、意識高そうだし、使っとくか! ・・・と、思って試しに使い始めてみたのですが、 自分が作るような小規模なものの場合、 大変な割に良い事あんまりないので使うのを止めました。 以下、忘れそうなのでその理由をメモって置きます。 基本的に、1枚のJSファイルが1モジュール、ファイル名がコードに影響する。それもあって、結合・圧縮は r.js という専用のツールが必要になる。Grunt の concat とか uglify とか使えない。 AMD の仕様では、「JSファイルのリストを順番通りに読み込み/実行する」ということができない。実際何が困ったかというと、分割した mocha テストケースを順番通りに実行できなくなったということ。結果は変わらなくても、順番通りに実行されないと結果が見辛いし、問題が起こった時に発見が難しい。ただしこれは
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く