Webフロントエンド

pnpm の node_modules を探検して理解しよう

はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事…

@swc/jestで手間をかけずにテストを早くする

こんにちは、ドワンゴ教育事業 Web フロントエンドチームの猪井です。 この記事では babel-jest から @swc/jest に移行することで Jest によるテストが速くなった事例について紹介します。 JavaScript のテストツールは、Vitest のバージョンが 1 を迎えたり…

ESLintのローカルルールで独自のコーディング規約を実装する

オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。ESLintのフラットコンフィグで設定を書いていると、プロジェクト固有のルールを扱いやすいことを紹介しています。

レガシーブラウザ向けのビルドオプションを剪定する

この記事はドワンゴ Advent Calendar 2023 の 20 日目の記事です。 はじめに こんにちは。今年の 10 月に教育事業本部にフロントエンドエンジニアとして入社したユーンです。 この記事では、 2016 年から新陳代謝を続けている N予備校 Web フロントエンドの…

新卒エンジニアがESLintのFlat Config移行と格闘した話

ESLintのFlat Configへの移行は進んでますでしょうか?試してみたでしょうか? 今回はドワンゴの新卒エンジニアが初仕事として取り組んだ、ESLintのFlat Configへの移行に関して「その方法と嵌ったところの乗り越え方」をお伝えします。 この記事で言及する…

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を採用したのは初めてだったの…

N予備校の就業型インターンシップに参加してきました!

はじめに 動機 インターンシップ参加までの流れ 期間 就業環境 開発環境 業務内容 メインのタスクへの準備 メインのタスク「未送信解答救済機能の追加」 最後に はじめに 修士1年 (インターンシップ参加当時) の杉水俊輝です。 2022年の10月から12月までの3…

縦書き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コメントで黙らせて、リファクタリング待ちのマークにしよう 指摘するためのルールにちょうどいいものがなければその場で…