React で JSX をそのままレンダリングできるコンポーネントを作った
ユーザーにテンプレートエンジンを提供する際、さまざまなテンプレートエンジンがありますが、その中に React コンポーネントを組み込みたい場合(ex: <FollowButton> のようなものがあって、それを呼び出すとフォローする)、いくらかのハックが必要になったり、カスタムコンポーネントを用意したりと様々な工夫が必要になります。 結局テンプレートというよりサイトスタイルを提供したいだけだし……ということであれば、 JSX を書いてもらってそのままそれが動けばいいのにな……と思ったので、 JSX をそのまま動かす仕組みを作りました。毎夜ちまちま作り続け、土日を経てそれなりの完成度になったので v1.0.0 で公開したし、ということでお披露目です。 React JSX Renderer React JSX Renderer(以後 RJR)は JSX を解釈して React Node として
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
JavaScriptのイベントをたくさん見られるサイト
JavaScriptでよく使うイベントの概要をざっくりまとめ、それぞれのイベントオブジェクトをコンソールで確認できるサイトです。
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて - Qiita
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう （※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます） 上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。 このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法はAuth0のSDKなどでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。 話は変わりますが、SPAの開発に携わっている方は「localStorageにはセッション用のトー
mozaic.fm v3 リリースと Podcast の PWA 化 | blog.jxck.io
Intro mozaic.fm をリニューアルし v3 としてリリースした。 今回の更新は以下のような変更/修正を実施している。 PWA 化 before install prompt Background Fetch Periodic Background Sync Content Index API Badging API Player UI の刷新 Pure Webcomponents Media Session API WAI-ARIA Portal Preview Screen Wake Lock Security CSP v3 (not Report-Only) Cross Origin Resource Policy Cross Origin Opener Policy Cross Origin Embedder Policy Expect-CT NEL Referrer P
ASI Certification Exam
ASI Scanning Test Grounds This is a test for ASI certification. You will be presented with eight snippets of JavaScript/Ecmascript. None of these scripts will contain semi-colons. All of them validate according to ECMAScript 5. Your job is to add all the semi-colons where ASI would put them. That means that no ASI should occur after you're done. These are the three rules to Automatic Semi-colon In
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
☕️ JavaScriptと入力メソッド - みずぴー日記
AquaSKK 4.5.0ではEscキーの扱いを改善した。 この修正のためにWebKitにおけるキーイベント配信の仕組みを追ったので、まとめる。 AquaSKK 4.5.0です。変換をキャンセルしたときに飛ぶイベントが他の入力メソッドと同じになりました。 https://t.co/fHJp12SV9b— mzp (@mzp) 2018年5月13日 💡入力メソッドごとの差異 @mzp AquaSKKのメンテナもしくはIMギークとして御聞きしたいんですが、SafariでAquaSKK使った時に、変換をEscでキャンセルした時に飛ぶイベントがことえりとちょっと違うのってどうにかできそうでしょうか…。 https://t.co/C5BvMAUKQs ちなみに検証してくれたのはりんすきさん。—  (@unarist) 2018年4月19日 上記Tweetにあるように、テキストを入力中にEscを押
ウェブブラウザの off-the-main-thread API の話
ウェブブラウザにおいてメインスレッドはとても重要なリソースです。なるべくメインスレッドを使える状態にしておくことが滑らかな UI/UX を実現する上で重要になります。しかし、実際には多くの処理が実装上の理由やブラウザ仕様の不足によりメインスレッドでしか動かせないため、メインスレッドは忙しくなりがちです。特にページロード時は JavaScript の実行やリソース読み込みなどでとても忙しくなります。 とあるページの perf プロファイル。メインスレッドでせわしなく処理が行われている様子が分かる。 これを解消するために、ブラウザの処理をメインスレッド以外 (off-the-main-thread) でも実行できるようにする試みが行われています。 1. Off-the-main-thread とは メインスレッド以外のスレッドに処理を委譲することを off-the-main-thread と呼
きごるふ（記号プログラミング + コードゴルフ） - ゆるめ
始まりは orumin さん*1のトゥートが読めなかったので、書けるトゥートを何気なくぶつけたあたりです。以下使用環境および言語は Firefox 67.0b18 の Web コンソールにばちばち打ち込んだ JavaScript だと思ってください。 そこへ id:unarist さんがこちらのコードを括弧だらけにした上、戻り値も括弧だったら面白いんじゃないか的発想で乗ってきました。 ({[[]](){[]}}[[]]()) これは、ES2015 からオブジェクトの中で関数を書く時に { 関数名 () {} } のような省略形で書けるようになった*2のと、{ "": 0 } のように空文字列でもプロパティを作れること、そしてブラケット表記法で書かれたプロパティは文字列に変換されること*3と、[] を文字列化すると ""（空文字列）になることのコンボで成り立っています。 しかし、アロー関数で
本格JavaScript記号プログラミング(1) 6種類の記号だけでJavaScriptを書こう - Qiita
JavaScriptが記号だけで書ける言語であることはよく知られています。 たとえば、以下のようなプログラムを実行すればHello, World!とコンソールに表示されますね。 [][[[][[[[]==[]]+[]][+[]][+[]]+[[+[]==[]]+[+[]]+[][+[]]+[]][+[]][++[+[]][+[]]+[+[]]]+[[+[]==[]]+[][+[]]][+[]][++[+[]][+[]]+[+[]]]+[[][+[]]+[]][+[]][++[++[+[]][+[]]][+[]]]][[]]=[[][[[[]==[]]+[]][+[]][+[]]+[[+[]==[]]+[+[]]+[][+[]]+[]][+[]][++[+[]][+[]]+[+[]]]+[[+[]==[]]+[][+[]]][+[]][++[+[]][+[]]+[+[]]]+[[][+[]]
WebGL Report
WebGL Report You need to enable JavaScript to see WebGL.
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
{x: 1} は何と見なされるか —— JavaScriptコンソールによる違い - Qiita
"type": "BlockStatement", "body": [ { "type": "LabeledStatement", "label": { "type": "Identifier", "name": "x" }, "body": { "type": "ExpressionStatement", "expression": { "type": "Literal", "value": 1, "raw": "1" } } } ] BlockStatement（ブロック文）の中に x というラベルが付いた LabeledStatement（ラベル付き文）があり、その中身が 1 という式になっています。 Firefoxのコンソールは素直な動作をしている つまり、何もない場所でコードが { } で囲われていると、それはブロック文と見なされるのが通常であって、Firefoxのコンソールはそ
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
検索や推薦をWebWorkerでやる - 橋本商会
Elevator.js
技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018 - Speaker Deck
