この記事はNikkei Advent Calendar 2023の 20 日目の記事です. こんにちは. 林仁(Shinyaigeek)と申します. 2022 年に日本経済新聞社に新卒入社して, 今ですと日経電子版 Web 開発チーム全体の開発生産性などの向上のため, フロントエンド基盤の足回りの改善や電子版全体の信頼性向上のために CDN の改善などを担当しています. 本稿では処理系フレンドリーなコードとそのためのガードレールを敷くことによりコードベースを改善するアプローチと, 実際に日経電子版 Web の開発基盤である, k2 で行われた処理系フレンドリーなコードによってフロントエンドのコードベースを改善した事例についてご紹介します. フロントエンド開発における処理系 まずそもそも, ここで言う処理系とは何を指しているのでしょうか？本稿ではフロントエンド開発におけるコードの処理系をスコ

Nikkei Advent Calendar 2023の 14 日目は IDE がやっていきます。いま Web チーム内の基盤改善を専門とするチームで活動しています。自分が入社するより前に作られてメンテナンスがあまりされていなかったシステムを、現代でも戦えるようにするお仕事をしています。メンテナンスを放置することはセキュリティ的によくないので、メンテナンスを専業で行っています。最近の自分の仕事は、今日紹介する rnikkei と呼ばれるマイクロサービス群の Node.js バージョンを、v12 から v18(一部は v20) まで引き上げることです。この rnikkei は当初「爆速の日経」と呼ばれていた頃に設計・実装されたサービスです。今日はそのような過去に作られたサービスにもう一度スポットライトを当ててみようと思います。 see: https://marketing.itmedia.c

こんにちは、Web チームの井手です。今日は私たち Web チームが作っている SSR フレームワーク(以下 FW)にについて紹介します。 記事を書くモチベーション 私たちのメインプロダクトである日経電子版においては k2 という自作 SSR 基盤を 2020 年から運用しています。SSR FW といえば多くの方が Next.js を想起すると思いますが、私たちは自作しています。一方で最近は Next.js の進化が凄まじく、自作 SSR 勢としても意識せざるを得なくなっています。もしかしたら「あぁ Next.js で作っておけばよかった」と思う時が来るかもしれません。特に k2 を保守する際には Next.js では実現できない機能を実現するために様々な手法や工夫を編み出していましたが、Next.js の進化に伴ってその必要性はだんだん減ってきているのを実感しています。そのためいつか N

こんにちは、Web チームの井手です。 この度 NIKKEI Professional Media（通称 Promedia） という新媒体をリリースしました。各トピックに特化したメディアで、現在は 日経モビリティ、日経GX、日経テックフォーサイトが展開されています。 これまで日経 Web チームでは特定のFWを利用せず、長年JSXをテンプレートエンジンとした独自FWを開発して、モノレポとして運用していました。これはチューニングの余地を自分で確保することや、自分たちのチームにあった規約を作りやすくするための選択です。しかし Promedia の開発は電子版本体のリリースサイクルと外れるためにモノレポの中に入れたくないことや、長年の開発の負債を引き継ぎたくないこと、なによりNextJSエコシステムの発達によって僕たちの要求をカバーできつつあることから、試験的にNextJSを採用して開発してみま

この記事はNikkei Advent Calendar 2021の6日目の記事です。 こんにちは、長期インターン生の林(Shinyaigeek)です。 fastly の提供する Compute@Edge という Edge Computing 基盤があります。 まだベータという形でですが、このランタイムで JavaScript の対応が始まったことをうけ、 Compute@Edge で何ができるのか、そのために何が必要なのか、というのを実際に Compute@Edge で Apollo Server を用いて GraphQL Server を建てることを通して考察します。 Compute@Edge とは 本題に入る前に Compute@Edge とはどのような技術なのか、何ができるのか、という説明から入りたいと思います。 Compute@Edge とは fastly が提供している Edge

この記事はNikkei Advent Calendar 2020 19日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment はDOMのレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 webサイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layout p

Nikkei Advent Calendar 2020 の 22 日目の記事です。 はじめに 法人向けサービスの UI/UX チームの清野です。 サービスをリリースしてから UI の変更を重ねるにつれて、デザインファイルと実装でズレが生じたり、デザインと実装の関係性がわかりにくくなったりする問題がよくあります。このような問題を防ぐために、カラーやタイポグラフィなどの情報をデザインファイルから取り出して、コード上でデザイントークンとして定義する方法を紹介します。 実現する方法の検討 実現する方法はいくつか考えられます。チーム体制やワークフロー、デザインファイルの構成によって、適している方法は変わってきます。 1. 一気通貫ツールにおまかせ デザインファイルの情報をコード化するまで一気通貫で面倒を見てくれる便利なツールもあります。代表的なものが Diez で、Figma や Sketch など