Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に
Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に Vercelは同社が開発するWebアプリケーションフレームワークの最新版となる「Next.js 14.2」の正式リリースを発表しました。 Next.jsは、ReactをベースとしたオープンソースのWebアプリケーションフレームワークです。ルーティングやサーバサイドレンダリング（SSR）、静的サイト生成（SSG）など多数の機能を備えています。 Next.js 14.2では、webpack後継のRust製のビルドツール「Turbopack」がリリース候補に到達。ビルドの性能向上やキャッシュ、エラーメッセージの改善などが行われています。 Next.js 14.2 ◆ Turbopack (RC): 99.8% of tests passing for `next dev --turbo`
会計PlusのWebフロントエンドパフォーマンス改善 - Money Forward Developers Blog
大阪開発拠点でマネーフォワード クラウド会計Plus（以下、会計Plus）プロダクトのフロントエンドエンジニアをやってます、しばもとです。好きな食べ物は、ポンデリングです。 私が所属する会計PlusのWebフロントエンドで改善活動を行いました。その改善活動としてビルド時間の短縮、バンドルサイズの削減、Jestの実行時間短縮など同じフロントエンドエンジニアの方の役に立つと思ったので紹介させていただきます。 簡単な会計Plusの技術的な紹介 会計Plusのフロントエンドでは、次のツールを使用しています。 バンドルツールに、webpack テストフレームワークに、Jest これらのツールは、CI/CDのサービス CircleCI上で動かしています。また、フロントエンドライブラリとしてReact、型にTypeScriptを使用しています。 ※ 説明の都合上、必要最小限の紹介をしています。 改善内容
あなたが知らないかもしれない CSS 変数活用法
この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開予定です。 先日、Vivliostyle に大きなアップデートがあり、現代のブラウザで普及が進みつつある CSS Variable (CSS 変数) が Vivliostyle でも使えるようになりました！ この CSS Variable、実はこれまでの CSS の概念を大きく覆すものであり、私たちのような Web フロントエンドエンジニアにとってはもはや当たり前のように使われているものですが、最近の CSS の進化を知らない人にはまだまだその活用方法が知られていないようです。 この記事では、CSS Vari
Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは？
Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは？ JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh 1.0」のリリースを発表しました。 バージョン番号の1.0が示すように、安定版としてのリリースです。 Fresh is a new full stack web framework for Deno. It sends zero JavaScript to the client by default and has no build step. Today we are releasing the first stable version of Fresh.https
メンテモが Vercel を剥がすまで (移行作業編) - メンテモエンジニアリング
engineering.mentemo.com この記事は↑の記事の後編です。 前編からだいぶ日が空いてしまいましたが、今回はメンテモのWebアプリケーションがVercelからCloud Runに移行するまでの実際の作業を紹介します。 はじめまして。 @itometeam です。メンテモで業務委託として開発全般のお手伝いをしています。 メンテモのWebアプリケーションはフロントエンドにNext.jsを使っています。 元々は例に漏れずVercelを使っていましたが、スケールするにつれてどうしてもボトルネックになる部分が増えてきたため別の環境に移すことを検討し始めました。 もちろんVercelはNext.jsのデプロイ先として今後も一番の選択肢としてあり続けると思います。 Webサーバをクラウド上に構築する上で意識するべきことをほとんどおまかせでやってくれますし、プレビューURLの自動生成など
webcontainer とは
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
AWS、コンテナにWebアプリを置くと簡単にデプロイが完了する「App Runner」リリース。オートスケール、ロードバランス、証明書の管理などすべておまかせ
AWS、コンテナにWebアプリを置くと簡単にデプロイが完了する「App Runner」リリース。オートスケール、ロードバランス、証明書の管理などすべておまかせ AWSは、コンテナに特化したWebアプリケーション実行環境のマネージドサービス「AWS App Runner」をリリースしました。 #AWS App Runner is a fully managed container application service that makes it easy for customers to build, deploy, and run containerized web applications and APIs without container or infrastructure experience.#Developer #CloudComputing https://t.co/eMw
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール TypeScript Project Referencesは、tsconfig.json同士の依存関係を定義することで、効率的なビルドが可能になる仕組みです。 Project Referencesの仕組みを使うことで、monorepoなど一つのリポジトリ内で複数のTypeScriptで書かれたパッケージがある場合に効率的なインクリメンタルビルドなどができます。 また、VSCodeなどのコード補完に使われるTS-Serverなどのスキャンも効率的になります。 Migrating Large TypeScript Codebases To Project References — Developer Tooling Optimizing multi-packag
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
NetlifyのOpen Source Planに申請する
Netlifyは便利ですが、Freeプランだと月300分の制限があります。 300 build minutes/month https://www.netlify.com/pricing/ 色々なOSSでNetlifyを使っているとこの制限にすぐに到達してしまいます。 具体的には、次の点でNetlifyのBuilt Timeはすぐ消費されてしまいます。 RenovatebotなどPRをたくさん出すやつとNetlifyのPreview Buildの相性が悪い NetlifyのBuild TimeはプロジェクトをTransferしても、一度消費した分は戻らない https://app.netlify.com/teams/{team}/builds/insights でBuild Timeを見られる Netlify Open Source Plan NetlifyにはOpen Source Pl
Cordovaをdisる人類全員に読んでほしい「Cordovaつらいを考える」｜榊原昌彦
以下の記事で「Cordova／Ionicに比べれば、まだ少しはまともな選択だろう」と述べてあるのをみて、ここ数年Web Nativeに関わって思うことをちょっとまとめてみようと思います。 私はWeb Developerですので、この記事はWeb Native寄りの意見になります。また、本記事内では、いわゆるWeb Viewでつくるガワアプリを「Web Native」、それ以外（React Native/Native Script/Swift/Kotlinなど）をまとめて「Mobile Native」と呼称しております（分類はWhere Does Ionic React Fit in the React Ecosystem?から） note: Cordovaつらいって言っちゃだめという記事ではありません。OSSの活動は続いてるので、伝聞や過去のものではなく、最新のCordovaやWeb Na
THETA プラグイン と WebRTC P2P で撮影アプリを作ってみた - Qiita
はじめに こんにちは、リコーの @shrhdk_ です。 今回は WebRTC という技術を利用して、RICOH THETA V の 360° 映像を遠隔からリアルタイムに確認しつつ、THETA V のシャッターを切れるプラグインを作ってみましたのでご紹介します。 THETA 標準アプリの撮影機能を WebRTC を使って Web ブラウザだけで実現してみたという話です。 ソースコード: https://github.com/ricohapi/theta-plugin-webrtc-sample RICOH THETA プラグインパートナープログラムについて THETAプラグインをご存じない方は こちら をご覧ください。 興味を持たれた方は Twitter のフォローと THETAプラグイン開発コミュニティ (Slack) への参加もよろしくお願いします｡ WebRTC とは? まず We
pixiv chatstoryのiOSアプリをReact Native（Expo）でリニューアルしました！ - pixiv inside
こんにちは、福岡オフィスでpixiv chatstoryの開発を担当しているtawachan（@tawachan39）です。 前回「デザイナーでも書けるReact Native」と題して、React Nativeでの開発模様を書かせていただいたのですが、先日無事リリースをすることができました（！）ので、今回はその小話を書いていければと思います。 特に、React Nativeでアプリを作ることに興味があったり実践登用することを検討している人にとって参考になることがあれば幸いです。 リニューアルのきっかけ pixiv chatstoryは既存のSwiftで書かれていたアプリをReact Nativeで書き換えるだけでなくデザインのリニューアルも行っていました。そのきっかけや経緯について簡単に紹介します。 Swiftのコードをメンテナンスするのが大変でWebの技術で置き換えたかった 現在のpi
React Native製、予定作成アプリ「ペペロミア」を公開しました - Qiita
個人で開発していたアプリがApple StoreとGoogle Play Storeで公開するまでいけたので、 公開までの話を紹介していきます。 ソースコードをGitHubで公開しているので、興味のある人は手元で動かして頂ければと思います。 手もとで実行する手順は、こちら 主に使用している技術 Frontend Expo(React Native) TypeScript Database Cloud Firestore GitHub Peperomia(アプリ) https://github.com/wheatandcat/Peperomia PeperomiaWebSite(公式Webサイト) https://github.com/wheatandcat/PeperomiaWebSite 諸々のリンク ペペロミア公式Webサイト 制作ブログ(4日に1回くらい更新するブログ) ペペロミア
Docker Hubの不正アクセスについてまとめてみた - piyolog
2019年4月27日、Dockerはコンテナ共有サービス「Docker Hub」が不正アクセスを受け約19万件のアカウントに影響が及んだとして情報漏えいの可能性について発表しました。ここでは関連する情報をまとめます。 公式リリース success.docker.com 被害の状況 Docker Hubのデータベースが不正アクセスを受けた。 不正アクセスにより一部のユーザー情報が盗まれた恐れがある。 影響を受けたのは約19万件のアカウント。全ユーザー数の約5%未満。 Dockerは不正アクセスの時間は短時間と説明。 2019年4月25日にDockerがDocker Hubデータベースへの不正アクセスを把握。 この侵害によるDockerの公式イメージへの影響はない。 不正アクセスの手口については明らかにされていない。 メール届いた場合は影響を受けた恐れ Dockerから連絡メールが届いた場合は
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話
シングルバイナリにこだわる - AWS Lambda編 / Nature Bath vol.6
