🚀 ニフティ’s Notion
2026-06-15
2026 エンジニア定例 Webアプリ

【Webアプリ開発2026 #2】エコシステム

エコシステム

フロントをとりまくエコシステムについておさえる。

フロントエンド開発においてやれることを認識する。。

💡
エコシステムとは

なんか誤用とか言われますが、周辺ツール的な意味合いで便利でよくつかわれるので許してください。

フロントのプログラミング言語

基盤はJavaScriptの場合が多い。特に理由が無ければ、JavaScriptに型を付けたTypeScriptを利用してください（静的解析が出来るので強力です）。

  • JavaScript

    https://developer.mozilla.org/ja/docs/Web/JavaScript 

    function add(input) {
   return input.x + input.y;
}
const input = {
  x: 1,
  y: 2
};
let result = add(input);
console.log(result); // 3
  • TypeScript

    https://www.typescriptlang.org/ 

    type Input = {
    x: number;
    y: number
}

function add(input: Input) {
   return input.x + input.y;
}
const input = {
  x: 1,
  y: 2
};
let result = add(input);
console.log(result); // 3

コンポーネントカタログ

  • https://storybook.js.org/
    • 作成したコンポーネントを一覧できるようにするツール
    • 一部テストも可能

Test

  • ユニットテスト
    • https://jestjs.io/ja/ 
      describe("新規登録ボタン", () => {
    test("押したとき、モーダルが表示される", async () => {
        const { user, typeCreateButton, onChange } = setup();

        await typeCreateButton();
        await waitFor(() =>
            expect(onChange).toHaveBeenCalledWith(
                expect.objectContaining({
                    isOpen: true,
                })
            )
        );
    });
      あまり良いコード・テストではないかも
    • https://vitest.dev/
  • VRT(Visual Regression Testing)
  • E2Eテスト
    • Playwright: TypeScript(JavaScript)
    • Cypress: TypeScript(JavaScript)
    • Selenium: python
ユニットテスト・インテグレーションテスト・E2Eテストのバランス

あまり意識する必要は無いが、言葉だけ。

テストピラミッド型か、テスティングトロフィ―型のテスト戦略を意識しよう。

  • アイスクリームコーン型は一般的にはアンチパターンなので理由があれば

CSS

コンポーネント単位のCSS

ビルド時にクラス名やdata属性を使って、コンポーネント単位に閉じたCSSを生成するもの。

  • Scoped CSS
  • CSS Modules
CSS in JS

ほぼReact専用技術。

CSSファイルを作らず、JavaScriptから全てのCSSを操作する。

  • Emotion
CSSフレームワーク

既存のCSSフレームワークを使う。たくさんあるので列挙しきれない。

制作チームが基本作るので、デザイン当てることは無いが、実装するために生のCSSを当てることは少ない。

  • Tailwind CSS
    • クラスを付けるだけで、いちいちクラス名を命名しなくていいので楽
    • コンポーネント
      • daisyUI
      • shadcn/ui（厳密にはコンポーネントではない）
  • bootstrap
    • 読み込んでクラス名を付けてデザイン

デザイン管理

Test

Image in a image block
  • Storybook, Playwright, Vitest が上がっている

その他

2026 エンジニア定例 Webアプリ