Webフロントエンド

TypeScript5.2 で追加された using Declarations and Explicit Resource Management をテストで活用する

こんにちは。N予備校 Webフロントエンド開発チームの堀です。 先日 TypeScript@5.2 が正式リリースされました。 TypeScript@5.2 で新しく追加された using Declarations and Explicit Resource Management (using 構文と明示的リソース管理)によって、N予備…

Web フロントエンドチームの紹介

はじめに こんにちは。N 予備校 Web フロントエンド開発チームの三橋です。 この記事では Web フロントエンドチームについてご紹介します。 メンバー(実施時点 9 名)にカジュアル面談でよくご質問いただく項目を含めたアンケートに協力してもらいました。 チ…

GraphQLのFragment活用テクニック: colocationとmasking

GraphQLのFragment活用テクニック: colocationとmasking こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 現在開発中のZEN CompassではGraphQLを採用しました。我々のチームでは(そして私個人としても)GraphQLを採用したのは初めてだったの…

縦書きHTMLにおける文字の向きはどのように定まるか

日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、CSSやUnicodeの周辺情報を拾いながら、意図しない表記になりやすい文字とその理由について紹介します。

全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ

オンライン学習サービス『N 予備校』は、2022年 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを続けています。 実装の変遷を説明し、書き換えの経験やWebフロントエンドという領域の性質を踏まえて、…

TypeScript Compiler API を使って ts-expect-error を一括挿入する

TypeScriptのCompiler APIを使用し、コンパイラから得られるエラー情報を利用して `@ts-expect-error` を挿入するスクリプトを作成したという記事です

Web フロントエンドのレガシーコードを置き換えるためのテストの考え方

この記事は、ドワンゴもスポンサードしていた JSConf JP 2021 にて、「Web フロントエンドのリプレースを支えるテストの考え方」というタイトルで berlysia がトークした内容をもとに再構成したものです。トークのアーカイブもご覧いただけます。 この記事は…

N 予備校に Visual Regression Testing を導入した話 + tips

N 予備校の Web フロントエンド開発に、 Storycap + reg-suit による Visual Regression Testing を導入しました。設定の工夫から、設定中や運用してしばらくの間に実際に発生したハマりどころを挙げ、簡単に注意点や対処例を紹介します。

TypeScript Compiler APIを使って型を中心に実装を自動生成する

この記事は、ドワンゴアドベントカレンダー2020の10日目の記事です。 qiita.com はじめに ベルリシア(@berlysia) という名前で活動しています。Webが好きです。ドワンゴでは、N予備校をはじめとする教育事業のWebフロントエンド開発をしています。 この記事…

ESLintを活用した漸進的リファクタリングのすすめ

この記事はドワンゴアドベントカレンダー2019の3日目です。 qiita.com TL;DR リファクタリング前の実装をESLintで指摘しよう disabledコメントで黙らせて、リファクタリング待ちのマークにしよう 指摘するためのルールにちょうどいいものがなければその場で…