はじめてのTypeScript × はじめてのChrome拡張 2022/02/16(水) フロントエンドLT会 - vol.6 #frontendlt 株式会社ラクス 矢須健太

自己紹介 • 矢須健太(@rs_tukki)  株式会社ラクス  Androidアプリ開発担当  (4月で)新卒6年目  Java/JavaScript/Kotlin  Spring Boot/Apache Cordova • 趣味  旅行/野球観戦 etc..  Youtube巡り

今回の話題

何分初心者なので

TypeScriptとは • Microsoftが開発したプログラミング言語 • AltJs(そのままでは使用できず、コンパイルすることで JavaScriptとして使用できる言語)の一種 • メリット1:静的型付け言語(=型が存在する) • メリット2:JavaScriptのモダンな機能を使える • メリット3:JavaScriptを拡張した言語であるため、 JavaScriptからほぼそのまま移行可能

Chrome拡張とは • Google Chromeの機能を追加・強化するアドオン • 主にフロント側の技術(html/CSS/JavaScript)で動作する • Chrome ウェブストアから様々な拡張機能をDL可能

以前作成したChrome拡張 • https://qiita.com/rs_tukki/items/9de350e6276c40f54fc4 • ただし、これはただのJquery

何故TypeScript? • なんかかっこいいから • 今後、よりスタンダードな開発言語になっていくから  Webフロントエンドの開発現場では採用増加傾向  弊社でも9年物のプロダクトをTypeScript移行した事例あり  https://speakerdeck.com/eichisanden/trouble-free-typescript- migration  また、ReactNativeでのモバイルアプリ開発や Node.jsを利用したサーバサイド開発でも広がりを見せる • →TypeScriptが使えて当たり前！な状況が来るかも……

ミニマムなChrome拡張の構成

manifest.json

TypeScriptの環境構築 • 開発環境  Visual Studio Code(VSCode)  スクリプト言語の開発に特化したソースコードエディタ  比較的簡単にTypeScriptの実行環境を構築できる  Node.js(npm)  TypeScriptそのものや環境構築用の依存ライブラリの導入に使う  Webpack  JavaScriptのモジュールバンドラ  TypeScriptをJavaScriptにコンパイルしたり、 リリース用のモジュールを作成したりするのに使う

TypeScriptの環境構築 • package.json

TypeScriptの環境構築 • tsconfig.json

TypeScriptの環境構築 • webpack.config.json

実装(script.ts)

作成した拡張機能の適用 • コマンド実行  npm install  npx webpack

作成した拡張機能の適用

動作確認 • https://github.com/rs-tukki/youtube-contents-coloring • https://www.youtube.com/feed/subscriptions

まとめ • Chrome拡張は(やることを選べば)思ったより簡単  サイトによってはDOM操作が極悪だったりも • TypeScriptは思ったより難しい……  イメージとしてはJavaに対するKotlinのような立ち位置？  コンパイルできる環境を整えるのが一苦労  とはいえ型の違いがコーディング中に一発で分かるため便利 (静的型付け言語ならではのメリット) • TypeScript学習のスタートとして拡張機能を作るのはあり  皆もChrome拡張、やろう！

ご清聴ありがとうございました。 • 参考:  https://qiita.com/rs_tukki/items/9de350e6276c40f54fc4  https://codezine.jp/article/detail/15148  https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391  https://qiita.com/ryokkkke/items/390647a7c26933940470  https://numb86-tech.hatenablog.com/entry/2020/07/11/160159  https://qiita.com/tetradice/items/b89a5dd41fcebf96379e  https://qiita.com/ginokinh/items/d4e1a9134c215d0ea701  https://goworkship.com/magazine/how-to-webpack/  https://blog.chick-p.work/chrome-extensions-typescript/  https://qiita.com/SoraKumo/items/5d92b15d06778458f5e1  https://reviews.f-tools.net/Add-On/Jisaku-Tuika.html