p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
【海外記事紹介】Rustで書かれ、WebAssemblyで動作するフロントエンドフレームワーク「Leptos」が注目を集める — Reactライクな書き心地と圧倒的なパフォーマンスを実現
1月14日、The New Stackが「Want a Web Framework for Rust, Not JavaScript? Try Leptos」と題した記事を公開した。この記事では、Rustフレームワーク「Leptos」やWebAssembly（Wasm）を活用したWeb開発の最新動向について詳しく紹介されている。 以下に、その内容を紹介する。 Leptosとは Leptosは、Rustで書かれたフレームワークをWeb Assembly経由でWebアプリとして高速かつインタラクティブに動作させる仕組みを提供するものである。公式サイトによれば、主要なフロントエンドフレームワーク（Vue、Svelte、Reactなど）と比較して優れたパフォーマンスを持ち、バニラJavaScriptに迫るとされている。以下はLeptos公式サイトで公開されているベンチマークの一例である。 Lept
【海外記事紹介】JavaScriptのベンチマークはなぜ難しいのか
12月24日、Byte of Devが「JavaScript Benchmarking Is a Mess」と題した記事を公開した。この記事では、JavaScriptのベンチマーキングにおける問題点について詳しく紹介されている。以下に、その内容を紹介する。 JavaScriptのベンチマーキングにおける課題 JavaScriptのベンチマーキングは、多くの人にとって煩わしい作業である。しかし、JavaScriptがよりパフォーマンスに敏感なアプリケーションで使用されるようになるにつれ、ベンチマーキングの必要性は依然として高い。残念ながら、JavaScriptのコアとなるアーキテクチャ上の多くの決定事項により、ベンチマーキングは容易ではない。 JavaScriptの問題点 JITコンパイラによる精度の低下 現代のスクリプト言語であるJavaScriptのアーキテクチャは非常に複雑である。多く
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 - イノベトピア
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 Last Updated on 2024-10-26 15:21 by admin Anthropic社は2024年10月24日、AI チャットボット「Claude」に新機能「分析ツール（analysis tool）」を実装したことを発表した。 主な特徴は以下の通り： JavaScriptのコード実行環境が統合され、ブラウザ上で直接コードを実行できる CSVファイルやPDFなどのデータファイルを分析し、インタラクティブな可視化が可能 プログラミング知識がなくても、データ分析やグラフ作成をリアルタイムで実行可能 性能面での改善： Claude 3.5 Sonnetのプログラミング性能がSWE-Bench Verifiedテストで33.4%から49.0%に向上 TAU-benchでの
【海外記事紹介】CommonJSからESMへの移行手順まとめ
10月17日、Denoは「CommonJSからESMへの変換方法」というブログ記事を公開した。ECMAScriptモジュール（ESM）は、最新かつ公式なJavaScriptの記述・共有方法であり、多くの環境（ブラウザ、エッジ、Denoのような最新のランタイム）でサポートされており、非同期ローディングやグローバル変数を使わずにエクスポートできるなど、開発体験も向上する。一方、CommonJSは長年にわたって標準とされてきたが、現在ではJavaScriptコミュニティにとって障害となっている。JavaScriptを将来的に見据えて開発するには、すべての新しいコードはESMで記述するべきである。しかし、互換性の理由から、レガシーコードベースを最新のパッケージに対応させるためにモダン化する必要がある場合もある。今回の公開内容では、レガシーなCommonJSプロジェクトをESMに対応させるための構文
TypeScript 5.7 Betaがリリース！V8のキャッシュ機能によるコンパイル速度の大幅向上、変数の初期化チェックの厳密化など変更点多数
10月10日、MicrosoftはTypeScript 5.7 Betaを発表した。今回のリリースは、開発者がより効率的かつ柔軟にコードを書けるようになる多くの新機能や改善が盛り込まれている。 以下にTypeScript 5.7の主要な新機能と改良点を詳しく見ていく。 初期化されていない変数のチェック機能 TypeScriptは、変数が初期化されていない状態で使用されるとエラーを報告できる機能を以前から持っていたが、TypeScript 5.7ではこの機能がさらに強化された。特に、関数内で変数が初期化されていない場合、これまではエラーが出ないケースもあったが、今回のバージョンではそれもキャッチするようになった。以下のコードでこの動作を確認できる。 function foo() { let result: number; if (someCondition()) { result = doS
イテレータを分岐させるとどうなる？ Iterator Helpersに見るJavaScriptのイテレータの挙動
2024年10月のTC39ミーティングでは、Iterator HelpersがStage 4となり、ECMAScriptの仕様に追加されることが決定しました。Iterator HelpersはすでにGoogle Chromeなどで試すことができます。 Iterator Helpersは概してわかりやすい機能群ではありますが、やはり元々がJavaScriptということで、直観的には理解しがたい挙動もあります。そのような挙動は、とくにイテレータを分岐させたときに見られます。 ということで、この記事ではイテレータを分岐させた場合の挙動を見ていきましょう。Iterator Helpersそのものに関する基礎的な説明は省略していますので、他の記事をご覧ください。 イテレータを分岐させる Iterator Helpersは、イテレータに生えたメソッドであり、返り値は新しく作られたイテレータです。そのた
Deno 2 リリース — Node.jsとの互換性向上、標準ライブラリの提供、JSR連携など多数の改善を含むメジャーアップデート
10月10日、Denoは「Deno 2」を正式に発表した。Denoは、JavaScriptおよびTypeScriptをサポートする現代的なツールチェーンとして、すでに数多くの開発者に愛用されているが、新バージョンのDeno 2はさらに多くの機能と強化を備え、特にNode.jsおよびnpmとの互換性を大幅に改善している。 Deno 2の主要機能 Deno 2では、多くの新機能が導入されている。以下は主な機能である。 Node.jsおよびnpmとの互換性：Deno 2は、既存のNode.jsプロジェクトやnpmパッケージをシームレスにサポートしており、package.jsonやnode_modulesを直接利用可能である。これにより、既存のNodeプロジェクトにDenoのツールを導入することができる。Denoでは、npm:という形式でnpmパッケージをインポートすることも可能で、node_mo
Deno、V8 JavaScriptエンジンをRustに統合できる「Rusty V8」リリース — RustにJavaScriptコードを埋め込み可能に
9月25日、DenoはRustベースのV8バインディング「Rusty V8」が安定版としてリリースされたことを発表した。Rusty V8は、JavaScriptエンジンV8のC++ APIをゼロオーバーヘッドでRustに統合するライブラリであり、5年間にわたる開発と150以上のリリースを経て、3.1百万回以上のダウンロード数を記録している。このリリースにより、Rusty V8は本格的なプロダクション環境での利用が推奨される安定版となった。 Rusty V8は、バージョン129.0.0として初めて安定版リリースが行われた。これはChromeのバージョニングに合わせたもので、今後もChrome V8エンジンと同期したリリースが行われる予定である。このバージョンではAPIの安定性が保証され、これまでの0.xリリースを超えて、Rustベースの開発者にとって信頼性のあるツールとして位置づけられること
Deno 2.0リリース候補版が公開、1.0のリリース以来最大のアップデート
9月20日、Deno 2.0のリリース候補版が公開された。これは、Deno 1.0のリリース以来、最大のアップデートであり、Node.jsとの互換性向上や依存管理システムの改良、グローバル変数の変更など、様々な新機能と改善が含まれている。 1. グローバル変数の変更 Deno 2.0では、windowグローバル変数が削除され、代わりにglobalThisやselfの使用が推奨されている。この変更は、Denoがブラウザと互換性を持つことを目指して導入されたwindowが、思わぬバグを引き起こしていたためだ。これにより、ライブラリがDeno上での動作時に問題を引き起こすことが少なくなる。 // Deno v1.x window.addEventListener("load", () => { console.log("loaded"); }); // Deno v2.x globalThis.
先進的なWeb技術を詰め込んだAstro 5.0 β版リース — Server Islandsに注目
9月18日、Astro 5.0 Betaがリリースされた。Astroは、モダンなウェブサイト開発のための静的サイトジェネレーターで、特にフロントエンド開発において人気が高まっている。サーバーレンダリングと静的サイト生成の両方をサポートし、ReactやVueなどのフレームワークとも互換性がある点が特徴だ。性能向上や使いやすさを重視しており、ビルド後のファイルサイズを最小限に抑えることで、表示速度の高速化を実現している。この新バージョンでは、コンテンツ管理のための「Astro Content Layer」や、新しい「Server Islands」機能が安定版として導入され、開発者にとってより柔軟かつ効率的なウェブサイト構築が可能となる。Astro 5.0 Betaの主要な新機能は以下の通りだ。Content LayerContent Layerは、Astro 5.0で導入された強力なコンテンツ
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
顧客の要望から要件定義、システム生成まで自動化する「Babel」 OSSの「Zoltraak」がコア
AIと量子コンピューティングの研究開発を行なうKandaQuantumは、2024年8月31日、顧客の要望内容を元に自動的に要件定義を生成し、さらに自律的にシステムを構築する要件定義システム生成AI「Babel（バベル）」をリリースした。 Babelは一行の要望から要望一覧、要件定義まで一気通貫で記載する。「要件定義プログラミング」により、自然言語からコードへの直接変換を実現。顧客の要望やビジョンを入力するだけで、Babelが詳細な要件定義のYAMLファイルを自動生成する。その上で生成された要件定義に基づき、Babelが独自にシステムを設計、開発。技術的な詳細を指定することなく、望む機能やふるまいを記述するだけでシステムが構築される。
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
フロントエンドアーキテクチャがまた進化する ー Angular、Wizとの統合により「ハイドレーション完了後にイベントをリプレイ可能」に
4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 イベントディスパッチの導入 Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。 例えば、クリック時に onSave() を呼び出す、以下のよ
React Server Component、そしてqwikのインパクト ー フロントエンドアーキテクチャの最新動向をmizchiさんに聞いてきた(1)
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、フロントエンドのエキスパートmizchiさんに、フロントエンドの最新動向について詳しく伺ってきました。 mizchiさんのアカウントをぜひフォローしましょう！ mizchiさん（フロントエンド兼Node.jsエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております。どしどしお寄せください😊 以下、動画の内容の要約です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【海外記事紹介】Webフロントエンド開発の新たな潮流となるか？Rust+WebAssemblyを使用する動きが加速中 — Amazon Prime Videoにおいて7.6倍のUIレイテンシ削減
【海外で話題】昨年最も熱かったJavaScriptプロジェクトは何か？「JavaScript Rising Stars」2024年版が公開！
JavaScriptはもはや一番利用されている言語ではない — GitHubの年次レポートが公開、生成AIの利用動向についても詳細に分析
「HTMLのスーパーセット」Svelteはこんなに進化している — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
