The State of JS 2021
多くのことがあった2021年でした。本当に。このアンケートだって2022年に延びてしまったんですから！ より高速なビルドツールや新しいバックエンドフレームワークなど、JavaScriptは進化し続けています。私たちもベストを尽くし、新しい質問形式や、2つのデータポイントの相互参照機能（年収×経験レベルなど）、そしてチャートのカスタマイズ機能と、このアンケートにパワーアップを施しました！ほかにもあるので、[新機能のまとめ]](https://dev.to/sachagreif/whats-new-in-the-2021-state-of-javascript-survey-4eej)を読んでみてください（英語）。 すべてが順風満帆ではありませんでした。悪いことが起こってなさそうなのが幸いですが、データ漏洩に対応しないといけませんでした。また引き続き、このアンケートをより包括的に、アクセシブル
State of JavaScript 2022
After years of relative stability, many are now beginning to question the status quo. New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client. We'll need all the data we can get if we want to make sense of all
とってもやさしいフロントエンド入門
まず、新しいアイデアが提案されると、ステージ0の「Strawman」と呼ばれる段階に入ります。ステージ0のアイデアが価値のある提案として見なされ、大まかな形で問題点や解決策を説明できるようになると、ステージ1の「Proposal」と呼ばれる段階に進みます。そして、提案がある程度まとまって仕様の草案として認められると、ステージ2の「Draft」と呼ばれる段階に上がります。さらに細かいところまで練り上げられて、仕様がほぼ完成した状態になると、ステージ3の「Candidate」の段階になります。最後に、2つ以上のブラウザがその機能を実装していて、ECMAScript の編集者に承認されると、ステージ4の「Finished」と呼ばれる段階になります。 ステージ4に上がった提案は、毎年 6 月のタイミングで ECMAScript の新しいバージョンとしてリリースされます。リリースする際は、ECMAS
Quagga.js でバーコード読取してみた - Qiita
はじめに 自分は以前に Cordova を使って「蔵書台帳」アプリを作りました。このとき 書籍の ISBN のバーコードを読取するのに、Cordova のプラグインを使っていました。 改めて調べてみると、ブラウザ上の JavaScript コードで直接、カメラ画像からバーコードの読取できるんですね。 JavaScript でバーコード読取できるライブラリは幾つもありましたが、これがよさそうでした。 GitHub - serratus/quaggaJS: An advanced barcode-scanner written in JavaScript GitHub - ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript 紹介している記事も多く、幾つか試してみました。 Quag
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
PHPからJavaScriptにデータを受け渡すときに考えること - Qiita
PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区別せず、どちらもarrayです リストはキーが0からの抜けがない連番になっている要素が0個以上の配列です array_is_list()関数で連想配列とリストを判別できます array_values()で連想配列をリストに変換できます array_filter()の結果はフィルタされたキーがスキップされるのでリストではありませんが、結果をarray_values()に通すことでリストにできます JsonSerial
JavaScriptランタイム事情 2022冬 - Techtouch Developers Blog
テックタッチアドベントカレンダー 18 日目担当の yokochin です。 今年になって JavaScript の新しいランタイムである Bun をよく目にするようになりました。 Node.js、Deno に続く JavaScript ランタイムの新勢力となるわけですが、それぞれどのように違うのか、それぞれが生まれた背景やコンセプトから理解していこう！というのがこの記事の趣旨です。 Node.js 開発の背景 余談：ブロッキングとSSR Node.js の後悔と Deno の登場 Deno のモジュールシステム そのほかの特徴 Bun の登場 Bun のパフォーマンス そのほかの特徴 JS ランタイムの互換性 Deno の Node.js 互換 Bun の Node.js 互換 終わりに Node.js 開発の背景 Node.js は 2009 年にリリースされ、現在最も広く使われている
超お手軽！JavaScriptで打ち上げ花火を作って楽しめる「fireworks-js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで本格的な打ち上げ花火を作って楽しめるライブラリをご紹介します！ わずか数行のコードで簡単に花火を描画できるお手軽さと、細かいオプションを設定すれば高度にカスタマイズもできるのが特徴です。 誰でも簡単に扱えるように設計されているので、花火を見れなかった人、もっとゆっくり鑑賞したかった人なども含めて、ぜひオリジナルの打ち上げ花火を作って遊んでみてください。 【 fireworks-js 】 ■「fireworks-js」の使い方 それでは、「fireworks-js」をどのように使えばいいのか詳しく見ていきましょう！ まずはライブラリをインストールするのですが、一般的には npm や yarn を使ってコマンドラインから導入することになります。 ただし、今回はフロントエンドのJavaScriptだけで作ろうと思います。
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足 JavaScriptはWebブラウザで実行することを想定して開発されたプログラミング言語ですが、現在ではNode.jsやDenoなどに代表されるようにWebブラウザ以外の環境でも実行されるようになってきました。 そこで、こうした非Webブラウザを中心としたJavaScriptランタイムにおける相互運用性の改善を目指したコミュニティグループ「Web-interoperable Runtimes Community Group」（WinterCG）がW3Cで発足しました。 設立メンバーはDeno、Cloudflare、Shopify、Vercel
ブラウザ内でバイナリを圧縮してコードやlocalStorageに埋め込む
JS で wasm のダウンロードや TypedArry を通じた操作をやってると、コード内や localStorage にバイナリを埋め込みたいときがあります。 考え方 JS の内部エンコーディングは UTF16 と決められているので、UTF16で表現可能な範囲を1文字として、バイナリをインライン化すればサイズが小さくて済むはず Chrome は CompressionStearm でブラウザ内で deflate できるので、あれば圧縮する https://chromestatus.com/feature/5855937971617792 Chrome ではない場合、deflate 処理は飛ばしてそのまま。localStorage の読み書きなら途中でブラウザ自体のサポート増える/消えるなどしない限り一貫性は取れる 今回はやってないが、インラインJSに埋め込む場合、50kb を超えたあた
『マンガでわかるJavaScriptのPromise』がKindleで無料公開
『マンガでわかるJavaScriptのPromise』は、JavaScriptで通信などの処理を書く際に必須の仕様であるPromiseを、マンガで基礎から学ぶことができる。 『マンガでわかるJavaScriptのPromise』は、マンガ部分は76ページ、コードのまとめやコラム部分は51ページ、全体で167ページの構成で、コールバックを多用するJavaScriptの特徴や、Promise登場の背景、Promiseの仕組みや書き方、async/await、Promiseの静的メソッドまでを解説する。 目次は以下の通り。 第1話「JavaScriptのPromise」 第2話「同期処理と非同期処理」 第3話「コールバック関数」 第4話「コールバック関数のネスト」 第5話「Promiseの概念」 第6話「Promiseを使ったコード」 第7話「Promiseを使ったコード 2」 第8話「reso
Meta、JavaScript Webテキストエディターフレームワーク「Lexical」をOSS
Metaは現在、JavaScript Webテキストエディターフレームワークの「Lexical」をリリースしている。軽快さや拡張性、アクセシビリティを重視し、開発者は必要に応じた機能を持つテキストエディターが利用可能。基本的な雰囲気はWebで確認できるが、ローカル環境に導入する場合は、「npm install --save lexical @lexical/react」を実行する。 Webブラウザー上で動作するLexical Lexicalは編集要素に取り付くエディターインスタンス、エディターの状態を示すセット、セット情報を受け取り、状態に応じてDOMを更新するリコンサイラーの3要素で構成されている。そのため、UIコンポーネントやツールバー、リッチテキスト機能、マークダウンなどの機能はプラグイン経由で実装・拡張する仕組みだ。公式サイトのプラグインページでは、Lexicalの状態更新時に呼び
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
ページを高速に表示するには「CSS in JS」と普通のCSSのどちらを使うべきなのか？
JavaScriptを用いてウェブサイトのUIを構築する際によく利用されるのが「React」というFacebook製のライブラリです。ReactではJSXという記法を用いてコンポーネントを構築していきますが、その際にどういう方法でスタイリングを行うかはユーザーの手に任されています。その中でも比較的多く用いられているのが「普通のCSSを利用する方法」と、スタイル設定もJavaScript内で完結させる「CSS in JS」の2つなのですが、この2つについてパフォーマンスへの影響はどれくらい違うのかをフロントエンドエンジニアのトーマス・プストニクさんが計測してブログにまとめています。 Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website https://pustelto.
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
世界のプログラミング言語(34) Node.jsに関する10の反省点から生まれたJS実行エンジンDeno
PC上でJavaScriptを実行できるJavaScript実行エンジンではNode.jsが最も普及しています。これは十分高速であるため、サーバー用途でも利用されています。しかし、Node.jsの作者は2018年より新たなJavaScript実行エンジンDenoを開発しています。DenoはNode.jsの反省より生まれたプロジェクトで多くの点でNode.jsを改良したものです。期待のDenoはNode.jsと比べて何が良いのか実際にプログラムを作って試してみましょう。 DenoでWebサーバーを実装して実行したところ DenoはNode.jsの反省から生まれた Node.jsの作者として有名なライアン・ダール氏は、2018年にJavaScriptの国際的なカンファレンス「JSConf 」にてDeno(読み方：ディーノまたはデノ)を発表しました。しかも、それは「Node.jsに関する10の反
最新版で学ぶwebpack 5入門 - Babel 7でES2023環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「JavaScript」を使用したブラウザゲームの作り方を解説した入門書が発売！ ～HTML/CSSなどの基本も習得可能／合計13本のサンプルゲームは全ソースコード掲載＆ダウンロード提供【Book Watch/ニュース】
たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない／解説ページを見てもわからないorz【やじうまの杜】
