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

# <span style="font-size: 60%; text-transform: none !important;">第2回フロントエンド調査発表<br>～TypeScript／Sass／webpack～</span>

## <span style="font-size: 60%">前回のおさらい</span>
第1回フロントエンド調査発表は[こちら](https://qiita.com/iori_casino_se/items/bba48c74269625c21991)



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



## <span style="font-size: 60%">今回の話題</span>
TypeScript、Sass、webpackを使ったサンプルで、どんな利点があるのか説明します



## <span style="font-size: 50%; text-transform: none !important;">TypeScript／Sass／webpackの例</span>
-前提知識-

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



### <span style="font-size: 60%">サンプルページ</span>
![75b5fe116d564c6994894c2341617214.gif](https://qiita-image-store.s3.amazonaws.com/0/365778/6489ad3f-8462-0a6f-f80a-588fbcbeeb9e.gif)


- <span style="font-size: 80%">ボタンをクリックすると日付が表示されるページ</span>


![f87c4cbf718c94c7dfe3adf5d470c209.png](https://qiita-image-store.s3.amazonaws.com/0/365778/f00a0c1b-afee-3840-336b-b495a12c4977.png)


- <span style="font-size: 80%">ボタンの装飾➡CSS</span>
- <span style="font-size: 80%">ボタンクリック時の動作➡JavaScript</span>


![0c72e730d493af65b009dcde920d7c1d.png](https://qiita-image-store.s3.amazonaws.com/0/365778/cd926645-e0ea-5c80-bdd5-428e1976640f.png)


- <span style="font-size: 80%">ボタンの装飾➡**Sass**</span>
- <span style="font-size: 80%">ボタンクリック時の動作➡**TypeScript**</span>



### <span style="text-transform: none !important;">Sass</span>



まず、普通のCSSで書いた場合
![f11fe7009d3bad5a3f0bc575137bc225.png](https://qiita-image-store.s3.amazonaws.com/0/365778/e5d09b38-95bf-62d2-2565-d2050c5fe756.png)

- <span style="font-size: 80%">CSSと実際の構造が直観的に一致しない</span>
- <span style="font-size: 80%">色などの共通な設定を管理しにくい</span>



Sass（SCSS記法）で書くと構造がわかりやすい！
![4f7862332cc17b5442576b9b4e8cf363.png](https://qiita-image-store.s3.amazonaws.com/0/365778/70b35b00-4ab8-7056-7570-af7d2c3e3d5e.png)

- <span style="font-size: 80%">ネストしたブロックでCSSの構造が直観的で分かりやすい</span>
- <span style="font-size: 80%">変数が使えるので色などを管理しやすい</span>



### <span style="text-transform: none !important;">TypeScript</span>


![4b550c3c560d9c192f212de0af682368.png](https://qiita-image-store.s3.amazonaws.com/0/365778/e2927dba-3f9a-c544-5201-dbf02d00c6da.png)

 <span style="font-size: 80%">型を明示するのでどんな処理なのか把握しやすい</span>



![f135fe75f50c3739a76b1b906e16fd4e.png](https://qiita-image-store.s3.amazonaws.com/0/365778/544ff7eb-53e8-232d-36cb-412904c553d4.png)


- <span style="font-size: 80%">コーディング中、トランスパイル時に構文エラーがわかる</span>
    - <span style="font-size: 80%">JavaScriptはエラーに気付かず見逃すケースもある</span>



### <span style="text-transform: none !important;">webpack</span>



![e28756241eace1e9dfd6fa6ab723bb6f.png](https://qiita-image-store.s3.amazonaws.com/0/365778/83bc41a4-4a9c-37f9-8e23-2a9ec6089e76.png)


- <span style="font-size: 80%">JavaScriptやCSSをバンドルしjsを吐き出す</span>
- <span style="font-size: 80%">トランスパイル～バンドルの自動化もできる</span>



<span style="font-size: 80%">さきほどのJavaScriptとCSSをwebpackでバンドル</span>

![787523bdbbdd4a64e169ee6acb5e0281.png](https://qiita-image-store.s3.amazonaws.com/0/365778/fdf1ff5e-cfb1-9ce0-805e-34d0fa55974e.png)


- <span style="font-size: 80%">不要な改行やスペースが削除されている</span>



![f2ec384668856412f9dec13258bb377d.png](https://qiita-image-store.s3.amazonaws.com/0/365778/d68be830-eaab-9893-5d65-80aba8266ad0.png)

- <span style="font-size: 80%">変数宣言・変数名が最適化されている</span>



ちゃんと動く
![07a93d84dc94128df0d593a1185526e3.png](https://qiita-image-store.s3.amazonaws.com/0/365778/7c2dc37d-1745-0b5c-c60c-8d57a08ee045.png)




## <span style="font-size: 35%;text-transform: none !important;">まとめ：TypeScript／Sass／webpackを使えば・・・</span>

- <span style="font-size: 80%">見やすいコード＆静的チェックで開発効率向上</span>
- <span style="font-size: 80%">CSSの複雑化回避、保守性向上</span>
- <span style="font-size: 80%">webpackによる不要コード削除→バンドルで軽量化</span>