第2回フロントエンド調査発表資料

第2回フロントエンド調査発表
～TypeScript／Sass／webpack～

前回のおさらい

第1回フロントエンド調査発表はこちら

1. JavaScriptの開発効率を向上したい
   • TypeScriptを使ってみよう
2. CSSの保守性を向上したい
   • Sassを使ってみよう
   • BEMを取り入れてみよう
3. ページ表示速度を改善しUXを向上したい
   • webpackを使ってみよう
   • SPAを取り入れてみよう

今回の話題

TypeScript、Sass、webpackを使ったサンプルで、どんな利点があるのか説明します

TypeScript／Sass／webpackの例

-前提知識-

• TypeScriptやSassで書いたコードはブラウザで解釈できる言語に変換する必要がある
  • TypeScript➡JavaScript
  • Sass➡CSS
• この変換のことをトランスパイルという

サンプルページ

• ボタンをクリックすると日付が表示されるページ

• ボタンの装飾➡CSS
• ボタンクリック時の動作➡JavaScript

• ボタンの装飾➡Sass
• ボタンクリック時の動作➡TypeScript

Sass

まず、普通のCSSで書いた場合

• CSSと実際の構造が直観的に一致しない
• 色などの共通な設定を管理しにくい

Sass（SCSS記法）で書くと構造がわかりやすい！

• ネストしたブロックでCSSの構造が直観的で分かりやすい
• 変数が使えるので色などを管理しやすい

TypeScript

型を明示するのでどんな処理なのか把握しやすい

• コーディング中、トランスパイル時に構文エラーがわかる
  • JavaScriptはエラーに気付かず見逃すケースもある

webpack

• JavaScriptやCSSをバンドルしjsを吐き出す
• トランスパイル～バンドルの自動化もできる

さきほどのJavaScriptとCSSをwebpackでバンドル

• 不要な改行やスペースが削除されている

• 変数宣言・変数名が最適化されている

ちゃんと動く

まとめ：TypeScript／Sass／webpackを使えば・・・

• 見やすいコード＆静的チェックで開発効率向上
• CSSの複雑化回避、保守性向上
• webpackによる不要コード削除→バンドルで軽量化