ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました - ANDPAD Tech Blog
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に移行した際の、 GitHub Copilot の活用法について紹介します。 特に、「コーディングエージェントが凄いのはわかったけど、実際のプロダクト開発にどう取り入れて良いかわからない」という悩みを持っている方の参考になれば幸いです。 なお、この記事は、ある程度 Copilot や コーディングエージェントを使ったことのある方に向けた内容となっています。そもそもの Copilot の導入・設定方法、基本的な使い方・事例について知りたい方は、以下の記事を先に読んでいただくのがオススメです！ tech.andpad.c
はじめに こんにちは、BTMの坂本です！ エンジニアの皆さん、日々の開発業務お疲れさまです。 「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」 そんな風に感じることは多々あると思います。 今回はプロジェクト作成からデプロイまで、なるべく労力をかけない個人開発として、Claude/MCPサーバー/Vercel/Obsidianを使った開発を紹介したいと思います。 作成物 今回作成したもの。 不要ファイルの削除などは手動で行ったりしましたが、基本的に全てClaude経由で実装したものです。 （ファイル消し忘れがところどころに...） ※ リポジトリは予告なく非公開となる可能性があります。ご了承ください。 開発環境 作業フロー 開発シーケンス Windows環境
Node.js has undergone a remarkable transformation since its early days. If you’ve been writing Node.js for several years, you’ve likely witnessed this evolution firsthand—from the callback-heavy, CommonJS-dominated landscape to today’s clean, standards-based development experience. The changes aren’t just cosmetic; they represent a fundamental shift in how we approach server-side JavaScript develo
潜んでいるリスク、一番苦手なリスクです！どうも、whatasoda です。 モノリシックなサービスでは、サービスの成長とともに 1 つのアプリケーションの中にさまざまな性質の処理が混在するようになります。Node.js のようなシングルスレッドで処理が実行されるランタイムでは、複数の処理を走らせる場合に 1 つしかないスレッドを取り合う形で互いの処理を待機させ合うような振る舞いをすることがあります。 技術スタックを TypeScript に統一しているダイニーでは当然バックエンドの API サーバーを Node.js 上で実行しています。過去、「注文の受付」や「会計処理」といったリアルタイム性が求められる処理と、「売上の集計」や「CSV ファイルの生成」といったバッチ系の重たい処理が一部共存していたことがありました。 そういった環境で実行される処理同士が干渉し合うことで、レイテンシやエラー
Next.jsのコンパイラから知るServer Actionsの完全解析 ~セキュリティ上の注意点も含めて~ - カミナシ エンジニアブログ
はじめに StatHackカンパニーの渡邉です。 私の普段の取り組みをこちらで紹介しているのでこちらもどうぞ。 note.kaminashi.jp 私たちKaminashiでは、さまざまなプロダクトにNext.jsを採用し始めています。 今回のブログではNext.jsの最も特徴的な機能の一つであるServer Actionsに関してフォーカスし、それがどういう仕組みで動いているのかコンパイラのソースコードを確認しながら解説し、 最後に実装上の注意点について述べます。 特にServer Actionsの具体的な中身の解説に関してはヘビーなので、実装上の注意点だけ見てもらうだけでも良いかもしれないです。 それではやっていきましょう。 Server Actionsとは？ Server ActionsとはNext.js v14から正式にリリースされた機能で、従来フロントエンドのために記述していたR
「JavaScript」の商標をOracleから開放するよう求めた審判で無関係な「Node.js」の画像が証拠として使われた件に当事者が反発
プログラミング言語「JavaScript」の商標を保有しているOracleに対し、多数のエンジニアらが商標の取り消しを求めた審判で、Oracleは第三者が立ち上げたプロジェクトの画像を商用利用の証拠として提出しました。この点について当該プロジェクトの当事者が「Oracleの行為は欺瞞(ぎまん)的である」と指摘していたのですが、当局はこの主張を証拠不十分で却下しました。 JavaScript™ Trademark Update | Deno https://deno.com/blog/deno-v-oracle4 JavaScriptはOracleが商標を保有していますが、JavaScriptという言葉は一般的な用語として広く認識されているとして、エンジニアら1万4000人以上の署名をもって商標を開放するよう求める運動が展開されています。 JavaScriptの実行環境である「Deno」や「
Vue.jsにおけるcomposablesを切り出す個人的な考えをまとめてみた - VISASQ Dev Blog
こんにちは、クライアント開発チームの田中智之です！ さて、ビザスクではVue.jsを利用してフロントエンドを実装していますがcomposabelsの使い方、難しくないでしょうか？ 自分自身の解像度を高めるためにも、今回はVue.jsの中でもcomposabelsに焦点を当てた記事を書いてみることにしました！ SFC(Single File Component)について composabelsの話に入る前に、SFCについて触れさせてください。 SFCとは単一ファイルコンポーネントの章にあるように、単一ファイルでコンポーネントの振る舞いを実現するvueの記法になります。 現代の UI 開発では、コードベースを互いに織り交ぜる 3 つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることが分かっています。コンポーネント内では、そのテ
課金する場合はまた話が変わってくるので、サービスが大きくなって無料プランが厳しくなったら、CloudFlare Workersあたりに移行するつもりです。 テーブル構成 後から拡張することは簡単でも、縮小するのは難しそうなのでできる限り小さめに制約をつけてます。 将来的に複数のSSOを実装した際、同じユーザにログインできる様にするかもしれないので、ClerkのIDとサービスで使用するユーザIDは分けています。 ユーザー操作と関係なく定期実行する処理 定期実行する必要の処理は以下の2つがあります。 為替レート更新 更新通知メールの送信 どちらもスクリプトで簡単に実行できる処理なので、Github Actionsを使用して0時に定期実行しています。 力を入れたポイント 初めて正式なサービスを開発・リリースした上での学び 「設計」の重要性 今回のサービス開発では、0から100まで完全に自分で開発
GitHub - aymericzip/intlayer: Internationalisation solution for JS application focusing on scalability. Make your JavaScript / TypeScript application multilingue.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #737 - RustベースのRolldownを利用したRolldown-Viteがリリースされました。 Announcing Rolldown-Vite | VoidZero Rolldown-Viteは、Rustで書かれたRolldownベースのViteで、rolldown-viteパッケージとして公開されています。 RolldownはRust製のJavaScriptバンドラーで、Rollupとの互換性を保ちながらパフォーマンスの向上を目指しています。 従来のViteから移行する際の互換性や性能のフィードバックを得る目的で、rolldown-viteパッケージとして公開されました。 Rolldown-Viteが安定したらviteパッケージに統合される予定です。 Vitest 3.2がリリースされました。 Vitest 3.2 is out! | Vitest wor
機密情報を検出するSecretlintのv10.0.0をリリースしました！ Release v10.0.0 · secretlint/secretlint このバージョンでは、デフォルトでLintの結果のシークレットをマスクして表示するように変更されました。 Secretlint v10.0.0の変更点 主要な変更点は次の通りです。詳細はリリースノートを参照してください。 Release v10.0.0 · secretlint/secretlint 🛡️ シークレットのマスク表示がデフォルトに 最も大きな変更は、見つけたシークレットをデフォルトでマスクして表示するようになったことです。 変更前: ✖ found credential: github_token GITHUB_TOKEN=ghp_1234567890abcdef1234567890abcdef12345678 変更後（v
Next.js v13でサーバーコンポーネントが導入されて以降、App Routerを用いた開発では、あるコードがサーバー側・クライアント側のどちらで実行されるのかを意識する必要が出てきました。この境界が識別しづらいことは、開発者にとって新たな課題となっていると思います。 実行される環境を見誤ると、クライアント専用のAPIをサーバーコンポーネントで呼び出してしまったり、反対にサーバーコンポーネントのみで行いたい処理をクライアントサイドへ露呈してまいセキュリティーリスクへ繋がったり、またバンドルサイズが気づいたら想定をはるかに上回る大きさへ膨れ上がっているかもしれません。 この記事ではこの課題に対して、各コンポーネントのファイルがサーバーコンポーネント・クライアントコンポーネント・もしくは両方になり得るかをVS CodeのUI上で可視化することにより課題の解消を目指した取り組みを紹介します。
こんにちは！ サイボウズフロントエンドエキスパートチームの左治木です。 今回のテーマは「進化するPromiseオブジェクト」です。 Promiseは、非同期処理を管理するためのオブジェクトで、ECMAScript 2015 (ES6)で導入されました。ECMAScript 2017ではasync／await構文が追加され、非同期処理がより直感的に記述できるようになりました。現在では、async／await構文が非同期処理の主流となっています。 一方で、Promiseの機能はasync／await構文の登場後も進化を続けています。これにより、非同期処理がさらに扱いやすくなり、従来のPromiseでは難しかった細かい処理も可能になっています。今回は、ES2020以降で追加されたPromiseの新機能をユースケースを交えて解説します。 Promiseの基本を簡単におさらい Promiseは、非同
JSer.info #739 - Biome v2がリリースされました。 Biome v2—codename: Biotype | Biome 設定ファイルのネスト、Linterプラグインのサポートが追加されています。また、Import OrganizerのようなLinterの範囲を超えた処理を行うAssist機能、HTML formatterのサポートが含まれています。 破壊的変更として--apply/--apply-unsafeの廃止、設定ファイルのinclude/ignoreからincludesへの変更などが行われています。 Vite 7.0がリリースされました。 Vite 7.0 is out! | Vite require(esm)が利用できるNode.js 20.19+/22.12+をサポート対象に変更し、デフォルトのブラウザターゲットがBaseline Widely Avai
TypeScript × Next.jsで作るマルチツールアプリ 〜型安全・UI統一・機能追加まで全部TypeScriptでやってみた～
１．はじめに 「毎日使いたい開発ツールを1ヶ所にまとめたい！」 そんな思いから、WebアプリをTypeScript＋React＋Next.jsで開発しました。 このWEBアプリでは複数の開発系ツールをまとめて提供しています。 マークダウンエディタ JSONフォーマッター XMLフォーマッター パスワードジェネレーター QRコードジェネレータ JSON⇔YAMLコンバーター CSV⇔JSONコンバータ サイトマップジェネレータ テキストカウンター ※現時点では機能数はまだ少なく今後追加予定です🙇♂️ 本WEBアプリや共通レイアウトは下記リポジトリに公開しております。 レイアウトサンプル ■ なぜ作ったのか？ 開発現場で「サクッと使えるWebツール」があると便利だけど、以下のような悩みを感じていました。 色々なサイトに機能が分散している サイトが分散しているのでUIに統一感がなく操作感が悪
JSer.info #738 - Safari 26 betaがリリースされました。 News from WWDC25: WebKit in Safari 26 beta | WebKit このバージョンからmacOSと同じく、西暦の下2桁がSafariのバージョンとなるようです。 CSSでは、Anchor Positioning、Scroll-driven Animations、text-wrap:pretty、contrast-color()、progress()をサポートしています。 Web APIでは、WebGPU、HDR Images、Digital Credentials API、Trusted Types API、URL Patternを新たにサポートしています。 Web InspectorではService Workerや非同期処理のデバッグが改善されています。 その他、S
はじめに 以前、こちらの記事を書いた時は昔だったのでPages Routerが前提でまだ自前でi18n対応するのは簡単でした 最近はNext.jsのApp RouterでWebアプリを作るので、作ったサイトを国際化対応したのですが、ライブラリの選定に悩みました。 昔みたいにクライアントコンポーネントだけが前提ではなく、サーバーコンポーネントとクライアントコンポーネントがApp Routerでは混在しているので、単純にhooksを使うだけでは解決できないからです！ そのため、最初はnext-intlやnext-i18n-routerといった定番ライブラリを検討していたのですが、 設定ファイルの量が意外とあったり、各ページで工夫が必要だったり...みたいな感じで、 結局めんどくさそうだなと感じて諦めました。 このNext.jsの公式サイトで紹介されているミニマムな方法も、サーバーコンポーネント
Vue.jsのデバッグをちょっとスマートにする Chrome DevTools Custom formatters機能の紹介 - Stockmark Tech Blog
ストックマーク株式会社でエンジニアをしている安藤です。 本記事は以前に開催していた社内勉強会にて使用していた教材 chibivue の著者であり、Vue.jsのコミッターでもある @ubugeeeiさん から教わったライブラリのデバッグをちょっとスマートに行うことができるようになるかもしれないTIPSをご紹介させていただきます。 Vue.jsのリアクティブオブジェクトをコンソールデバッグしてみる 解説のためにVue SFC Playgroundを用います。 画面を開くとVue.jsのSFCのソースコードがあります。内容は非常に簡素なリアクティブオブジェクトがひとつと、その値をv-modelとして紐づけしているinput要素があり、その実行結果が表示されています。 5行目にconsole.logを追加し、リアクティブオブジェクトを出力してみます const msg = ref('Hello
Node.js 18のサポートが終了、新しいLTSバージョンへの即時アップグレードを ―nodejs.orgが重大なセキュリティリスクを警告 nodejs.orgは2025年5月にメンテナンスサポートが終了したNode.js 18、およびそれ以前のバージョンについて、セキュリティ上の懸念からより新しいLTSバージョンへのアップグレードを呼びかけている。 Beware of End-of-Life Node.js Versions - Upgrade or Seek Post-EOL Support --Node.js nodejs.orgの調査によると、サポート終了となったNode.js 18は5月以降も月間約5,000万ダウンロードを記録、さらにその前のバージョンも月間数千万ダウンロードされている。これはNode.jsコミュニティの約30％が依然サポート対象外のバージョンを使用してい
JGBディーラーという職業について①｜JS146
正直に言うと、誰でも出来る仕事である。四則演算が出来ればOK。株やFXと同じで「売った買った」の世界なので。債券ディーラーと聞くと世間一般に馴染みがなく、何か難しい事をやっているんじゃ無いか？と思われるかもしれないが、基本は売買であり、水商売でもある。 しかし儲けられないとクビになる、もしくは異動になる。これはどの仕事でも商売でも同じだ。なので、ディーラーには誰でもなる事が出来る。ただその世界で稼ぎ続け、5年10年20年生き残り続ける、第一線のディーラーになる、というのが難しいのである。 ただ最近は事情が異なってきており、JGBディーラー（円金利ディーラー）の席に座るという作業が、まず難しくなって来ている。人気化しているからだ。なぜ人気化してるのか？業界全体の人口が少なく、中堅及びシニアディーラーの希少価値が高まっているからである。 では何故そのような状況になったのか。その原因は金融政策の
/Users/kosuke/Workspace/issue-recorder/greet.js:8 [hello, world] = greet() ^ ReferenceError: Cannot access 'world' before initialization at Object.<anonymous> (/Users/kosuke/Workspace/issue-recorder/greet.js:8:9) at Module._compile (node:internal/modules/cjs/loader:1378:14) at Module._extensions..js (node:internal/modules/cjs/loader:1437:10) at Module.load (node:internal/modules/cjs/loader:1212:32
中島聡の仕事術【最新版】超高速開発を実現するAIネイティブな組織とは？／Vue.jsかReactかアンソニー・フー氏との対話／企業がオープンソースに取り組むメリット - ページ 2 / 3 - まぐまぐニュース！
プロジェクト内部に閉じた形で作られたソフトウェア・モジュールは多くの場合、そのプロジェクトでしか使われず、たとえ同じ社内であっても共有されることは滅多にありません（私がいた頃のMicrosoftがそうでした）。結果として、社内で作られたさまざまなソフトウェア・モジュールが再利用もされずに「死蔵」されてしまいます。 それだけでも大きな損失ですが、作るエンジニアからすると、そのソフトウェア・モジュールを一度だけ使うために作るのか、再利用を前提に作るのかで、設計の仕方もコードの書き方も大きく変わって来ます。特に、オープンソースとなれば、だらしないコードを公開することは、自分の恥を晒すことになるので、意気込みも違います。 MulmoCastに関しても、同様で、オープンな形で書くからこそ良いものが作れる、という面は多分にあります。 それに加え、MulmoCastの場合、私自身の「会社経営ではなくコー
React・Next.js・TypeScriptのキャッチアップのために、荒唐無稽なリモート理由を診断してくれるアプリを作成しました。
始めに リモートワーク、それは昨今のWebエンジニアにとって、切っても切り離せないだろう。 リモートワークに関して、人によって考え方もバラバラだ。 それなのに、最近リモートワークを否定する企業も多くなった。 推進派だろうと、否定派だろうと、 それでもリモートワークは、 エンジニアにとって1つの手段であるはずだ。 だから、1つの対抗策として、このアプリを作成した。 このアプリはそれっぽいリモート理由を診断してくれる 後はその理由を、Slack等で上司に連絡するだけだ。 これで、後は自由気儘なリモートワークへと洒落込めるわけさ。
なぜASTツールがリンターにとって重要なのか Zennの皆様こんにちは。ast-grepの著者、Herringtonです。 大規模プロジェクトで一貫性のある高品質なコードを維持することは、大きな課題です。最新のRustベースのLintingツールは、基本的なコーディング標準を強制する点で素晴らしいパフォーマンスを発揮しますが、開発者が高度にカスタムなプロジェクト固有のパターンや、コードベース全体にわたる自動化された大規模なリファクタリングを必要とする場合、しばしば不十分です。ここで、AST（Abstract Syntax Tree：抽象構文木）ベースのツール、特にネイティブリンターにおけるプラグインシステムの開発が不可欠になります。 このレポートでは、2つの主要なASTベースのツール、Biomeの新しいGritQLプラグインと、確立されたast-grepについて深く掘り下げていきます。それ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian)
Modern Node.js Patterns for 2025
大規模 Node.js サーバーに潜むパフォーマンス上のリスクを Event Loop から理解する
【個人開発】契約中のサブスクリプションを管理できるサービスをリリースしました【Next.js×Neon×Clerk×Netlify】 - Qiita
2025-06-06のJS: Rolldown-Vite、Vitest 3.2、React RouterのGovernance Model
Secretlint v10.0.0リリース: デフォルトでシークレットをマスク表示するように変更、Node.js 20+のサポート
Next.js App RouterのコンポーネントをVS Codeでサーバー・クライアント別に可視化する
進化するPromiseオブジェクト ［JS Modern Features no.2］ | gihyo.jp
Odyc.js
2025-06-26のJS: Biome v2、Vite 7.0、Chrome 138、Firefox 140
2025-06-15のJS: Safari 26 Beta、pnpm 10.12、Jest 30
Next.jsのApp Routerでライブラリに頼らない多言語対応
Node.js 18のサポートが終了、新しいLTSバージョンへの即時アップグレードを ―nodejs.orgが重大なセキュリティリスクを警告 | gihyo.jp
JavaScript (Node.js) にはセミコロンをつけよう！ - Qiita
BiomeのGritQLプラグイン vs. ast-grep: JS開発者のためのAST変換ガイド