🚀 ニフティ’s Notion

フロントをとりまくエコシステムについておさえる。フロントエンド開発においてやれることを認識する

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

Node.js

ChromeのJavaScriptエンジン(v8)を元に、ブラウザ以外でも実行できるようにしたもの。

サーバや開発環境で使う環境は基本これ一択。

代替環境

• Bun, Deno

Node.js環境でのライブラリ(パッケージ)はnpmパッケージという形式になっている。

この使用するパッケージやそのバージョンを管理するもの。

• npm
  • Node.jsにデフォルトで付属する
  • 機能不足・速度の遅さが目立つ
• Yarn
  • npm代替として開発されたもの
• pnpm
  • 高速性が売り(pnpm = performant npm)
  • 社内演習ではこちらを利用しました

• webpack
  • 2022年頃までの主流
  • 現在は機能開発が終了し、バグ修正のみとなっている
  • Next.jsで採用
• Vite
  • webpack以後の主流
  • Next.js以外のほとんどのフレームワークが採用

過去のTech Talk資料

フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17

https://speakerdeck.com

• Storybook
  • 作成したコンポーネントを一覧できるようにするツール
  • 一部テストも可能

• ユニットテスト
  • Jest, Vitest
• VRT(Visual Regression Testing)
• E2Eテスト
  • Playwright : TypeScript(JavaScript)
  • Cypress : TypeScript(JavaScript)
  • Selenium : Python

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

• Scoped CSS
• CSS Modules

ほぼReact専用技術

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

• Emotion

既存のCSSフレームワークを使う

• Tailwind CSS
• bootstrap
  • 読み込んでクラス名を付けてデザイン

• Figma, Adobe XD