Madogiwa Blog

主に技術系の学習メモに使っていきます。

webpack + TypeScript + Vue.jsな環境とYouTubeをTikTok風に見れるViewerを作った

自分でwebpack + TypeScript + Vue.jsの環境を作ったので、勉強がてらYouTube Data APIを使ってTikTokぽく見れるViewerを作ってみました📺

動作はこんな感じです👇(デザインはいまいちですが・・・)

f:id:madogiwa0124:20200607115139g:plain

触ってみたい人はこちらから(YouTube Data APIAPI KEYが必要です)

madogiwa0124.github.io

webpackTypeScriptを触ったのはほぼ初めてだったので、自分で1から環境を作って実装してみて色々ハマりどころも多かったのですが、こういうフレームワークに隠蔽されている部分の車輪の再発明をしとくと仕組みとかを理解出来て良いですね。

今回自分で作ったwebpack + TypeScript + Vue.jsの環境はこちらのリポジトリに公開してます。

github.com

普段書いてるのがRubyなので、型を書くの結構めんどくさいなと思ってたのですが、IDEの補完とかnil周りの考慮漏れとかに気付けるのは結構メリットとして大きいのかなと思いました。

特にAPIとかとのインターフェイス部分とかは書いとくと安心感あるなと思いました。

それでは👋