動画2周完了と学習制作物

2023.01.03

先日始めた「はじめてのJavaScriptプログラミング入門【2022年最新版】」の学習を2周完了したので記事にしました。先日お伝えした通り初学者にも伝わりやすく噛み砕いてもらってる内容でしたが、WordPressの学習時同様やはり1周では理解が浅すぎたので2周学習しました。

2周してもまだまだ理解は浅いですが、動画内で制作したものを理解を深めるため一部構造を変えたりして組み直したりしました。その際、参考に見た人様のコード等がパーツ毎単位ではありますが一部理解できるようになっていた点は少なからず成長を感じることが出来たので嬉しかったです。

これからも学習を続け理解を深めたいと思います。せっかくなので下記に動画で学び制作したものを載せたいと思います。

文字数カウンター

Twitter等で見かける文字数カウンターです。テキストエリア要素やそこに入力された値を取得し残り文字数に出力、入力された時に発生するkeyupイベントを用いて動作しています。改行や空白は文字数としてカウントしないようにreplaceメソッドも調べて用いてみました。

これまで制作したサイトで画像ギャラリーの上位互換とも言えるスライドショー等は「slick」といったプラグインや「jQuery」等で実装したことはありましたが、完全に1からJavaScriptで実装したのは初めての経験でした。

回答を見ずにクリックイベントで配列を用いず自力で実装したところ、HTMLファイルを多く記述しての実装となりました。回答では配列やオブジェクト、要素生成をうまく用い必要最低限のHTMLで実装されていたため学習になりました。

尚、この画像ギャラリーで使用している画像はフリー画像素材で有名な「ぱくたそ」さんからお借りしたものです。

当サイトのページトップボタンも元々はプラグインで実装しておりましたが、今回の学習を活かしたいと思いJavaScriptを用いて実装してみました。人様の情報も参照し、scrollのイベントハンドラやwindowオブジェクトを用いました。

様々なサイトで多く見受けられる初期位置では表示させず、最上部から特定の量のスクロールを行った場合のみボタンを表示させる機能もif文を使用し実装しました。

途中でも述べた通り、人様が書いたコードでも基礎的な内容であれば単体単位ではそのプログラムを理解できるようになったことは今回の学習において最大の収穫だと感じました。

一方で回答を見ずにプログラムを組もうとした時に感じたことですが、0からプログラムを設計するのは非常に難しいとも感じました。

今後は前回難解で理解できなかったCodeMafiaさんの「【JS】ガチで学びたい人のためのJavaScriptメカニズム」に改めて挑戦したいと思います。再戦も難しかった場合は再度当動画を見直したり、別の初学者向けの動画も検討しようと考えています！