ちょっとしたものを作ってみたよ（まだまだ改善必要）

2022年も終わりごろになったため、今年のドラマで面白かったものをランキングにしたいと思い、作成。

ランキング作るアプリは、他にもありそうなので、時間がある時に、どういうものか見てみようと思う。

一旦、2時間くらい作業したので、その途中画面を。

HTML, CSS, JSを使って、ただ選択したものを下のcontentに表示するだけのもの。

意識したこと

・ホットリロードを採用。

やり方

ターミナルにて、以下を入力。

npm init -y

yコマンドは

・package name: パッケージ名
・version: パッケージバージョン
・description: パッケージの説明
・entry point: プログラムへの主要なエントリポイント
・test command: テスト用のスクリプト
・git repository: gitリポジトリのURL
・keywords: パッケージ公開時のための検索キーワード
・author:著者
・license: パッケージのライセンス

を全て、enterを押したものとみなされ、package.jsonが作られる。

npm install reload --save-dev

package.jsonに以下を記入。

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "reload -b"

},

・表示するボタンをクリックしたら、重複して表示されないように、内容を初期化してから、表示。

何もない場合に、コンソールでエラーが出るため、if分岐で条件を追加。

・Googleフォントを使用。

復習したこと

getElementsByName

：同じネームがついたものが配列風のオブジェクト（HTML Collection）で取れる。

querySelectorAllとの違い

速さは、getElementsByName。

querySelectorAllはNodeListの返値。

今後

・競合調してみる

・ドラマ一覧のデータをどのように持ってくるか

・ただ表示だけでなく、そのデータをDBに保存して、いつでも見られるようにする。

・そもそもランキング表示できていない。

ノミネートドラマをピックアップ→じっくりランキングを考え、表示する

などはどうか？

ノミネートドラマとランキングを人画面でバンっと表示してみたい。

・スマホ対応にしたい。

まだまだやってみたいことが多い。

あと、コードが汚い。

変数名、同じ動作、ループが多い。

その辺りも改善したい。。。