「Webpack」より700倍高速な次世代バンドルツール「Turbopack」が登場
2022年10月25日に、フロントエンドフレームワーク「Next.js」の最新版である「Next.js 13」がリリースされ、同時にバンドルツール「Webpack」の後継となる「Turbopack」も発表されました。開発元のVercelは、Turbopackについて「Webpackよりも700倍高速」とアピールし、性能を示すベンチマーク結果を公開しています。 Introducing Turbopack, the successor to Webpack. ◆ ~700x faster than Webpack ◆ 10x faster than Vite ◆ Native incremental architecture built with Rust ◆ Support for React Server Components ◆ Support for TS, JSX, CSS & mo
Wiki.js + Heroku を使って、無料で高機能の情報共有 wiki を簡単に作る
背景: GitHub wiki への不満 私の所属する研究室では、メンバー全員が１つの GitHub Organization に所属しており、情報共有はその Organization 上のリポジトリの GitHub wiki で行われています。 研究室がコンピュータサイエンス系であることもあってメンバーは GitHub や Markdown に慣れており、普段 GitHub wiki を使っていて困ることはそんなになかったのですが、それでも時々不満が出ることがありました。 不満として多いのは、色々記事を書いているうちに全体構造がよくわからなくなってしまうという点にあると思います。GitHub wiki ではディレクトリ構造を持てないので、全ての情報がリンクを経由してアクセスされることになり、段々と整理がつかなくなってしまいます。 複数のリポジトリにそれぞれ wiki を書くこともできます
ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス - BASEプロダクトチームブログ
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Form
全ての道はRomeへ続くのか - これからのJavascript開発を考える
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
💡 Node.jsのバージョン管理ツールを改めて選定する【2021年】 - Qiita
開発者「すみません、なんかnpm iとかnpxコマンドがうまくいかなくて…」 ワイ「でたー、cb.apply is not a functionって書いてません？」 開発者「書いてます」 ワイ「ちょっと見てみますね」 ワイ「……これはnpm入れなおしたほうが早そうですね…」 ｶﾀｶﾀ… ワイ（うーん…なぜ未だにnodistで消耗しているのか…😨） TL;DR nodistはもうやめよう 選定するときは、まず選定基準を決めよう 関連技術の特徴を洗い出そう それらが自分たちの環境にどれくらいマッチするかで比較しよう Windowsならfnmがオススメ1！ ※ バージョン管理ツールがなんだかわからない方は「Node.jsのバージョン管理ツールとは」からお読みください。 うわっ…私の現場、nodist使いすぎ…？ Node.jsの利用が本格化してきたころ、私の周りでは圧倒的にnodistが流行し
まだAPIが出来ていない？私は一向にかまわんッッ
初記事です。 あるフロントエンドの悩み プロジェクトの納期は決まっていて、すぐに着手しないといけない。 だけど、API はまだできていない... 早く着手したい...、ふぬぬ...。 今回はそんなフロントエンドがバックエンドのタスクの待ちにならないように、並行してアジャイルに開発していけるツールとしてmswをご紹介します。 mswとは？ mswとはmock service workerの略で、簡単にモックのAPIを立てることができるライブラリです。 同様のことができるライブラリとしてJSON Serverもありますが、mswには以下の利点があります。 単純にJSONを返すのではなく、ロジックも書くことができる Expressのようにスッキリ書くことができる RESTだけでなく、GraphQLにも対応している 以下のようなケースに向いていると思います。 早く着手しないといけないけど、API
めっちゃ楽！面倒なWeb制作から救う最新オンラインツール44個まとめ
ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。 この記事では、そんな面倒なWeb制作を楽にするお役立ち最新オンラインツールをまとめてご紹介します。 頭を抱える配色えらびから、おしゃれイラストのダミー生成ツールや、商用利用もできるHTMLテンプレートなど、時間のかかっていた作業を時短できる新サービスがぞくぞく増えています。 自分だけの最強ワークフロー術として、この機会に活用してみてはいかがでしょう。 カテゴリごとに整理しています、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
GitHub - grafana/k6: A modern load testing tool, using Go and JavaScript - https://k6.io
Modern load testing for developers and testers in the DevOps era. Download · Documentation · Community Forum · Public Roadmap k6 is a modern load-testing tool, built on our years of experience in the performance and testing industries. It's built to be powerful, extensible, and full-featured. The key design goal is to provide the best developer experience. Its core features are: Configurable load
GitHub Actionsのnode-versionをまとめてアップデートするコマンドラインツールを書いた
GitHubでのCIはActions | GitHubを使うようになりましたが、GitHub Actionのsetup-nodeにはLTSのような相対的な値を指定する方法がありません。 Support aliases like LTS · Issue #26 · actions/setup-node Support for LTS version · Issue #208 · actions/setup-node Support latest as a version alias for the latest Node version · Issue #257 · actions/setup-node そのため、GitHub ActionsでNode.jsのテストを書くには、次のようにnode-versionにそれぞれのバージョンを指定する必要があります。 Travis CIではnvmが使
yarn v2にまつわる誤解 | Wantedly Engineer Blog
現在WantedlyではNode.jsのパッケージ管理にyarn v1を使っています。現在私は開発者体験の改善を目指してyarn v2への移行を検討しているのですが、その過程でyarn v2が誤解されがちだと感じるようになりました。そこで社内への情報提供も兼ねて、いくつか誤解されがちだと思われる点を紹介したいと思います。 (わかりやすさのためにyarn v2と呼んでいますが、 yarn v3以降も含みます。これらはメジャーバージョンアップではあるもののyarn v1→v2のようにアーキテクチャが刷新されるわけではないからです) ポイント1: yarnをv2にするのにPnPは必須ではないyarn PnPはyarn v2の目玉機能で、パッケージをnode_modules以下に展開せずに仮想化してロードできるようにするというものです。node_modulesの展開作業が不要になるほか、依存関係の
Prisma: Node.js & TypeScript向けの完璧なORM
本記事は、@nikolasburk氏による「The Complete ORM for Node.js & TypeScript」（2021年4月21日公開）の日本語翻訳を、著者の許可を得て掲載しているものです。今後Prismaの公式ブログの日本語翻訳の許可をいただいたので、このアカウントで継続して翻訳していきます。※画像やリンクは公式のBlogからお借りしています。 Prismaは、Node.jsとTypeScriptのための次世代ORMです。2年以上の開発期間を経て、すべてのPrismaツールが製品化の準備が整ったことをお伝えできることに興奮しています! コンテンツ オブジェクト-リレーショナルマッピングの新しいパラダイム あらゆるスタックに対応するPrisma ミッションクリティカルなアプリケーションでの運用に対応 オープンソースを超えて お手伝いできることは？ Prismaを始めよう
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to
コードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツール・「Codeist」
Codeistはコードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツールです。Ace.jsが使われています。書いたコードは自動で保存されます。 Codepenやjsfidleと同様の目的ですが、Codeistは書くと同時にすぐに結果が表示される点は割と大きなメリットかなと思いました。Codepenもjsfidleと割と重かったりするので・・ embedや複数保存などは出来ませんが動作が超軽量というだけでも使う価値を感じます。尚、ユーザー登録が必要なのですが、一応ライセンスの明記はありませんがGithubにてソースコードも公開されていますので気になるならローカル環境で使わせてもらうのもありですね。 CodeistGithub
世界中で利用される「D3.js」の開発者が10年間で学んだこととは？
ニューヨーク・タイムズやOpenStreetMapなど、さまざまなウェブサイトで利用されているデータ可視化ライブラリが「D3.js」です。そんなD3.jsの開発10周年を記念して、開発者のマイク・ボストック氏が「D3.jsを10年間開発する中で学んだこと」を公開しています。 10 Years of Open-Source Visualization / Mike Bostock / Observable https://observablehq.com/@mbostock/10-years-of-open-source-visualization ◆「使用例」がツールの普及に役立つ ボストック氏によると、新たに開発されたツールは、開発者以外の人々にとっては異質なモノであるとのこと。そのため、ツールを普及させるには「ドキュメント」「チュートリアル」「使用例」などを準備する必要があります。 ボ
Goの良さをまとめてみた
よく知られる良さ ネイティブコード出力で実行効率が良い コードの可読性を重視している 開発でよく使うツールがバンドル クロスビルドが簡単にできる コンパイルが遅くない（LLライクにrunできる） 並行処理の抽象化を組み込み言語仕様にもつ メモリ安全である 上記の一部に解説を加えつつあまり言及されない良さを以下にまとめます。 依存解決が最小限で決定的 ここにも書きましたが、Goの依存解決は常に 最小限のダウンロード 最小の範囲でのみビルドを実行 だけが走ります。これを一度体験すると、従来のパッケージ依存管理が冗長で余計なものをビルドしすぎることに気づくでしょう。これらに相当の時間を奪われているのです。 また、Goモジュール機構によりそのバージョン選択は決定的に安定動作するバージョンに決められます。このことのメリットは数ヶ月後のリビルドで安定してビルドできることで実感できるでしょう。 開発環境
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deno 用のフロントエンド開発ツール packup について
GitHub - quick-lint/quick-lint-js: quick-lint-js finds bugs in JavaScript programs
商用可・無料のAI音声読み上げツール「VOICEVOX」、他アプリへの組み込みも可能なコアライブラリも公開／プロジェクトの保存、キャラの立ち絵、設定画面を追加するなど使い勝手も向上
GitHub - lana-k/sqliteviz: Instant offline SQL-powered data visualisation in your browser
