第2回フロントエンド調査発表
～TypeScript／Sass／webpack～
前回のおさらい
第1回フロントエンド調査発表はこちら
-
JavaScriptの開発効率を向上したい
- TypeScriptを使ってみよう
-
CSSの保守性を向上したい
- Sassを使ってみよう
- BEMを取り入れてみよう
-
ページ表示速度を改善し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による不要コード削除→バンドルで軽量化