見出し画像

【初心者向け】JavaScriptを用いた模写(勉強)でおすすめのYouTube動画5選

今回は始めは何のサイトやアプリを作ったらいいのかわからない人や、動的に作成方法を見ながら作業したい人向けのおすすめ動画を紹介します。ここではOnline Tutorials というYouTubeチャンネルの動画おすすめ5選を紹介します!

Online Tutorials というチャンネルのリンクは下記に貼っておきます。
JavaScript以外にも動画出しているので一度見てみるといいでしょう。

アナログ時計

こちらはJavaScriptを用いたアナログ時計を作成する作業工程を見れる動画になります。動的に作業工程が見れるため、初心者にも優しいと感じたため紹介しました。

何よりまんま同じにしなくても、時計の針のデザインを自分なりに変えたり、背景の色を変えたりできるので、楽しみながら作成が可能です。時計であればJavaScriptの記述方法をある程度学びながらアプリ作成が可能です。

デジタル時計

こちらはJavaScriptを用いたデジタル時計を作成する作業工程を見れる動画になります。

アナログ時計があるならデジタル時計もあるでしょと思って検索したらありました(笑)
人によって好みもありますし、何よりアナログ・デジタル両方やっておけばデザインの勉強にもなるのでやって損なしですね!

電卓

え、電卓?
と思ったでしょうが、これはJavaScriptの記述方法を深く学べると思い、おすすめしている形になります。

この方法を知っておくと別の場面でも役に立ちます。
例を出すとすれば、家計の計算をシュミレーションできるサイトを作るとします。

家賃、食費、保険料、通信費、その他固定費等に振分け、各小計金額を最後合計で出したいときに電卓でやったような方法を応用できるかと思います。

カラフルにハートが動くアニメーション

こちらは今回はハートのデザインを動かすものにはなっていますが、決して採用するのはハート出なくても構いません。自分の好きなデザインを選びそれを実際にコードを記述することで、どんな動きをするのかを勉強しながら作成するのが目的になります。

始めのうちはこういった形でいろいろなデザインを動かしてみることで、動的なサイトを作る際に少しは役に立つともいます。

ログイン&登録フォーム

こちらは必ず作成経験を持っておいた方が良いログインフォームと登録フォームの作成動画になります。誰しも、TwitterやFacebookやGmail等を使う前に自分のアカウントを登録・ログインしたことがあると思います。

それらの中身の仕組みを知っておくだけでもやる気にもなりますし、何より自身に繋がりますよね。
このフォーム作成は必ずやっておきましょう!

<まとめ>

今回は一つのチャンネルから抜粋いたしましたが、何より実際にコードを記述してみて、どのように動くのか、または機能するのかを確認しながら作業ができるのがメリットかなと思います。

自分なりにどんどんアプリやサイトを作成して、自信をつけていきましょう!

いいなと思ったら応援しよう!