YouTubeで情報収集 & 英語学習ができるWebアプリを作った
はじめに
エンジニアにとって 情報収集は欠かせません😉
でも、文字ばかり読んでいると飽きる😭
英語の情報源は日本語よりも圧倒的に多く、効率的に良質な情報にアクセスできます😉
でも、英語分からない😭
なら、YouTubeの英語のテック系動画を活用すれば、情報収集も英語学習もできて一石二鳥では？
そこで、 YouTubeで英語を学びながら情報収集できるサービス DicTubeを作りました。
ただ、 現在はまだ対応動画が数個しかないため、情報収集ツールとしては発展途中です。
もし需要があれば、対応動画を増やしたり、生成AIで自動対応できるようにしたいと考えています。
おすすめの動画あれば教えてください！
サービス内容
このサービスでは、YouTubeの動画でディクテーションができます。
ディクテーションでは、単語をドラッグアンドドロップで並べ替えて文章を完成させる形式にしています。
この形式にした理由はなるべく敷居を下げるためです。
私は今まで何度か英語の動画で情報収集しようと思ったことはありましたが、英語が分からなくて、いやになり、その都度断念していました。
なので、実施のハードルを下げ、気軽にできるようにしています。
使用した技術
Next.js
Next.jsで開発しました。
元々、Reactの知識すらありませんでしたが、公式のチュートリアルが充実していたため、何とか動くレベルのものは作れるくらいにはなりました。
以下の公式のチュートリアルがおすすめです。2つのチュートリアル合わせて、1~2週間くらいで終えられるので、サクッと一通り学べます。
主に使用したライブラリ
@hello-pangea/dnd
ドラッグアンドドロップでアイテムを移動するためのライブラリです。
ディクテーションで単語を並び替える機能を実装するために使用しました。
このライブラリを使うことで、以下のような直感的な操作が可能になります。
react-youtube
YouTubeの動画を埋め込むためのライブラリです。
Next.jsでYouTubeの動画を埋め込むには@next/third-partiesのYouTubeEmbedという最適化されたコンポーネントを利用するのが一般的かと思います。しかし、YouTubeEmbedを使用する場合、別のコンポーネントから動画を制御する方法が分かりませんでした。そのため、今回は react-youtube を代替として採用しました。
なお、YouTubeを埋め込むとページ読み込みが遅くなる現象[1]の対策として、loadingパラメータにlazyを指定し、遅延読み込みをしています。
おすすめの動画を紹介
いくつかのYouTube動画をピックアップして紹介します。
Don't Write Comments
コードにコメントを書くべきかどうかについて議論している動画です。
DicTubeのリンク
YouTubeのリンク
Mindset of Successful Programmers
プログラミング学習における心構えの重要性について解説しています。
DicTubeのリンク
YouTubeのリンク
Programming vs Coding - What's the Difference
コーディングとプログラミングの違いについて考察する動画です。
DicTubeのリンク
YouTubeのリンク
My Brain after 569 Leetcode Problems
LeetCodeの問題を569問解いたエンジニアの経験談を紹介しています。
DicTubeのリンク
YouTubeのリンク
Should You Solve LeetCode Problems or Do Projects
LeetCodeの問題を解くべきか、それともプロジェクトを作るべきかについて考察する動画です。
DicTubeのリンク
YouTubeのリンク
最後に
現在はまだコンテンツが限られていますが、今後、（私のやる気次第で）増やしていきたいと思っています。
おすすめの動画があれば、ぜひ教えてください !
Discussion