EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
NGINXのコア開発者が親会社と決別、新たに「freenginx」という名前でフォーク版を作成開始
NGINXは世界で最も使用されているウェブサーバーですが、そのコア開発者の1人がNGINXを所有している会社であるF5 Networksと対立し、NGINXの開発を離れて新たにNGINXのフォーク版である「freenginx」を開発すると発表しました。 announcing freenginx.org https://freenginx.org/pipermail/nginx/2024-February/000000.html NGINXはロシアの開発者イーゴリ・シソエフ氏によって2004年に無料のオープンソースソフトウェアとしてリリースされました。その後、ソシエフ氏はマキシム・ドゥーニン氏およびアンドリュー・アレクセーエフ氏と共同で2011年に商用サポート提供のための会社Nginx Inc.を設立。着実にシェアを伸ばし続け、2024年2月時点では世界中のウェブサーバーのうち34.1％でN
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新 オープンソースのJavaScript/TyeScriptランタイム「Deno」を開発するDeno Landは、「Big Changes Ahead for Deno」（Denoの方向性の大きな変更）という記事を公開し、Denoのnpmパッケージへの対応や高速化などの新たな取り組みを発表しました。 Big changes ahead for Denohttps://t.co/Q5xKz3bJLg — Deno (@deno_land) August 15, 2022 今回の発表では、npmへの対応、最速のJavaScriptランタイムを目指す、企業向けサポート、という3つの大きな取り組みが示されています。 3カ月以内にnpmパッケージをインポート可能に
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
Cloudflare Workersとcloudflaredの体験すごい
cloudflaredというアプリケーションがありましてー、Cloudflare Tunnelという仕組みを実現するってことは知っていましたが… これがCloudflare Workersと組み合わせるとすごいよい。 Wrangler 2.0 Cloudflare Workersを開発する際に避けて通れないのがWranglerというCLIです。Cloudflare Workersの環境をローカルでエミューレートしてくれて、publishまで面倒見てくれます。そのWranglerの「2.0」ベータが出てます。 設定無しでindex.jsを引数にすればいきなりdevサーバーが立ち上がったり、ライブリロードできてそれが割と高速だったりで、「B」押すだけでブラウザ立ち上がったりと便利なんですが、 S to turn on (experimental) sharing というコマンドがありました。
セキュリティを一切考慮しないMMORPGを開発するとどうなるか
どうもご無沙汰しております。本Blogが私の年1回の生存報告、兼、アドベントカレンダー用と相成って久しいですが、今年も一発恒例行事として筆を取らせていただきたいと思います。 今年、私が話題に取り上げますのは、とあるゲームです。Amazon Game Studiosという会社が開発・リリースしました、New WorldというMMORPGについてご紹介させていただきたいのです。ゲームの話題には一切興味がない読者諸君も、どうか少し我慢して、私に騙されたと思って最後まで話を聞いていただけませんでしょうか。そもそも、あのAmazonが開発したMMORPGというのですから、どれほどゲームに興味がなくても、技術に興味のある方でしたら、少しは興味深く感じられるのではないでしょうか？ けして後悔はさせませんよ。悪い方向にね。 さて、ゲームに何ら興味知識のない方にもわかるように少し解説を入れさせていただきます
WebRTC を今から学ぶ人に向けて
この資料には宣伝が含まれます ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 内容 これから WebRTC を学ぶ人が何を学ぶべきで、何は学ばないべきなのかを書く。定期的に更新していく。 趣味で学びたい人はターゲットに入っていません、仕事で利用する場合のみがターゲット。 まとめ 急がば回れで、W3C の資料を理解できるまで読み込む。 下手にフレームワークに依存したりして簡単な仕組みを覚えてしまうと後からツライ。 Media Capture and Streams WebRTC 1.0: Real-Time Communication Between Browsers Identifiers for WebRTC's Statistics API 作って学ぶも良いが、まずは出てくる単語などの意味を理解できるの
React Server Components はウェブ開発を変えるゲームチェンジングな技術である
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
GraphQL 採用における反省と Apollo Server の運用について
こんにちは。武田（@tkdn）です。 GraphQL を API として採用したサービスを今年序盤にリリースしています。具体的な内容は今年の夏サミ 2020 の公募枠でお話させていただいたのでよろしければ資料もご参考ください。 週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4 - Speaker Deck今日は GraphQL や Apollo Server についての振り返りと反省を中心に供養しておきます。GraphQL 採用に迷いがある開発者、Apollo Server を採用しようとしている開発者へ向けた知見になれば幸いです。 まとめてみたら GraphQL みが思いの外少なくなりましたが、GraphQL Advent Calendar 2020 の 23 日目の記事です。 なぜ GraphQ
クラスタのノード欠損を復旧しようとしてクラスタを丸ごと落とした話 - Qiita
これは、私が若…くはないけどピカピカのAWS1年生だった、数年前のお話です。 何をやらかしたのか やらかし前の状態 本番運用しているWebアプリケーションの裏側に、EC2インスタンス3台でクラスタを組んだ某データストア製品を使用していました。データはクラスタ内でレプリケーションされており、1台がダウンしただけならクラスタは稼働を継続できます。2台がダウンするとクラスタ全体が機能しなくなります。 ある日、3台のうち1台で障害が発生してインスタンスへ疎通できない状態になりました。この時点ではクラスタは正常に応答しており、あと1台ダウンしない限りはサービスに影響が出ない状態でした。 まず、ダウンしてしまったインスタンスを再起動して復旧させようとしました。ところがEC2マネジメントコンソールから再起動、停止を選択しても障害中のインスタンスは反応しません。そして私は間違いを犯します。 やらかしたこと
Next.js のローカル開発時に https を使う
この記事は YAMAP エンジニア Advent Calendar 2020 の 10日目の記事となります。 はじめに 弊社のプロダクトの中のひとつに Next.js フレームワーク（以下 Next.js）を用いて実装しているプロダクトがあります。 このプロダクトで SNS 認証を実装する際、ローカル開発時に HTTPS を使いたかったため、これを調査しました。 本記事ではこの Next.js のローカル開発時に HTTPS + localhost、つまり https://localhost:3000（port はなんでもよい）で開発をするための Tips を紹介いたします。 環境 Mac OS 10.15.7 Catalina 本題 Certificates を生成する 下記のコマンドをターミナルに貼り付けてエンターキーを押します。 openssl req -x509 -out loca
LSPから派生したLanguage Server Index Formatとは何か - Qiita
注意書き 本記事で扱うLanguage Server Index Format (LSIF)は、バージョン0.4.0が策定中と、まだまだ発展途上のプロジェクトです。今後大きな変更が加えられたり、派生元であるLSPに吸収合併されるかもしれないことにご留意下さい。そんな中でLSIFをご紹介しようと思ったのは、執筆時点で日本語の情報がなかったことと、LSIFを含めたLSPの理念をより多くの開発者に広め、快適な開発環境を皆の力で作り上げる一端を担う事ができたら、との思いからです。LSP / LSIFに興味をお持ちの皆様、ご意見・ご感想等ありましたらぜひコメントして下さい！ LSIFが提案された経緯 Language Server Protocol (LSP)とは、Microsoftが中心となって策定を進めている、プログラミング言語やエディタ / IDEに依存しない開発支援ツールのためのプロトコルで
仮想マシンのメモリを、ネットワーク経由でほかのサーバから拝借して増やせる「VMware Cluster Memory」、VMwareが開発中
仮想マシンのメモリを、ネットワーク経由でほかのサーバから拝借して増やせる「VMware Cluster Memory」、VMwareが開発中 VMwareは、仮想マシンに別のサーバに搭載されているメモリをネットワーク経由で利用する能力を持たせることで、ホストサーバが搭載する物理メモリ以上のメモリ容量を仮想マシンで利用できるようにする「VMware Cluster Memory」機能を開発していることを、VMworld 2019 USのセッションで明らかにしました。 RDMAを使って高速に別サーバのメモリにアクセス 「VMware Cluster Memory」実現の背景には、ネットワークの高速化が進んだことで、ネットワーク経由でのリソースアクセスのレイテンシがマイクロセカンドレベルにまで縮小し、ネットワーク経由でメモリにアクセスするRDMA（Remote Direct Memory Acc
クライアントとサーバーどちらに実装するかの設計指針をチームで持つこと - tomoima525's blog
モバイルアプリケーションを開発していると、この要件や仕様はクライアントとサーバーどちらに置くべきか、という議論がチームでなされることがしばしばあります。例えば、 あるレスポンスAを受けて処理Bを行い、その結果をユーザーに提示する 登録処理などで、処理C,処理Dという異なる処理を並列して行い、それらが完了したらユーザー側に通知する やろうと思えばクライアント側で処理を全て持つこともできますし、サーバー側で実装もできますね。 このような仕様のディスカッションが起きたとき、チームで統一した判断基準を持っていますか? 自分の場合、クライアントアプリはロジックをなるべくサーバーに移譲すべき という設計指針をチームに提案します。 上の例で言うならば、 サーバーから処理Bも踏まえたレスポンスA'を返してもらい、ユーザーに提示する クライアントは1リクエストをサーバーに投げる。サーバー側で処理C,Dを投げ
EmberFest 2018 参加レポート day 1 - tricknotesのぼうけんのしょ
去年に引き続き、今年のEmberFest参加レポートです。 残念ながら日本では Ember.js の話を聞く機会は少ないので、ここぞとばかりにアムステルダムでのカンファレンスに参加してきました。 今回のカンファレンスで、自分がとくに印象に残ったトークをまとめました。 Opening Keynote by Tom Dale - @tomdale Ember.js のコアコミッタであり、Yehuda Katz氏とともに Ember.js の開発をリードする Tom Dale 氏の基調講演からのスタートです。 2019 年の Ember の姿についてのお話でした。 Angle Bracket Ember 3.4 では Angle Bracket の導入に伴い Component の API が整理されました。 これによって、ユーザーからは Component への引数と HTML への引数が区別
Header Bidding 導入によるネットワーク広告改善の開発事情 - クックパッド開発者ブログ
こんにちは。メディアプロダクト開発部の我妻謙樹（id:kenju）です。 サーバーサイドエンジニアとして、広告配信システムの開発・運用を担当しています。 cookpad における広告開発 2015年11月に、"クックパッドの広告エンジニアは何をやっているのか" というタイトルで、広告開発部の開発内容について紹介する記事が公開されていますが、それから 2 年余り経過し、広告配信システム周りの状況も大きく変化しました。はじめに、現在の cookpad における広告開発の概要について、軽くご紹介します。 まず、私が所属しているメディアプロダクト開発部では、広告配信システムに加え、動画配信サービスの開発も担当しています。過去には同じチームから、動画配信周りの技術について以下のような投稿もありますので、そちらもご覧ください。 "cookpadTV ライブ配信サービスの”突貫” Auto Scalin
NTTデータ、全社レベルでAWSの活用を推進、人材を育成しユーザーのシステムを移行
IT Leaders トップ ＞ テクノロジー一覧 ＞ システム構築／プロジェクトマネジメント ＞ 市場動向 ＞ NTTデータ、全社レベルでAWSの活用を推進、人材を育成しユーザーのシステムを移行 システム構築／プロジェクトマネジメント システム構築／プロジェクトマネジメント記事一覧へ [市場動向] NTTデータ、全社レベルでAWSの活用を推進、人材を育成しユーザーのシステムを移行 2018年5月30日(水)日川 佳三（IT Leaders編集部） リスト NTTデータは2018年5月30日、全社レベルでAWS（Amazon Web Services）の活用を推進すると発表した。アマゾンウェブサービスジャパンの協力の下、NTTデータがシステム開発に使っている開発環境やフレームワークをAWSに対応させる。これらにより、ユーザーの既存IT資産をAWSに移行してクラウド向けに作り直す取り組みも強
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer
Next.js 13で開発方法はどう変わる？
