【JavaScript入門 #9】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】

今回のJavaScript講座はこれまでの集大成です。 JSの仕事は「データのやり取り」「DOM操作」ですが、今回で実感できるかと思います。 今まで勉強して学んだJavaScriptの知識をフル活用しましょう。 今後もJavaScriptプログラミング講座は続けていきますが 新しい分野に突入します。そちらもお楽しみに♪ 🐙 GitHub（使用したコード） https://github.com/lightsound/javascript-class/tree/master/009_callApi-addDOM 📙 もくじ 0:00 今回つくるものを紹介 1:27 コードを書く準備 2:46 JavaScriptでIDがついているタグを変数に格納 3:43 ボタンにクリックイベントを追加する 4:45 ユーザーを取得するWeb APIを叩く 6:41 ボタンを押してli要素が追加されるようにする 9:48 APIで取得したユーザーをli要素として追加する 12:37 名前以外にもli要素として追加することができる 13:40 forEach以外の書き方も紹介 15:13 if文で条件も追加してみる 17:20 ページを読み込んだときにユーザーをli要素に追加する 18:43 リファクタリング① 同じ記述を共通化する 20:46 リファクタリング② 処理を分解する 23:35 リファクタリング③ 順序を整理する 24:01 リファクタリング④ コメントを追加する 24:38 リファクタリングの重要性を解説 25:59 今回の講座は今までの講座の集大成です 27:19 クロージング（高評価とコメントお願いします） 🔥基礎から学ぶ JavaScript 入門 【第1回】フロントエンド開発でJavaScriptが必要な理由を解説 https://youtu.be/pnsieVYy72M 【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう https://youtu.be/5U0nAojNQS0 【第3回】オブジェクト・プロパティ・メソッドについて理解しよう https://youtu.be/vD1qoNrU8FY 【第4回】オブジェクトを実際にコードで書いてみよう https://youtu.be/y5_rULRxYuY 【第5回】変数を理解しよう！var, let, constの使い分け！ https://youtu.be/4NPrR_szrUM 【第6回】初心者がつまづきがちな「関数」を分かりやすく解説 https://youtu.be/FDqbbLCT4yM 【第7回】匿名関数、高階関数、コールバック関数を攻略せよ！ https://youtu.be/B624WCMhLfA 【第8回】WebAPIを叩いてみよう！ https://youtu.be/QugDLcOo_EE 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it Instagram: https://www.instagram.com/shimabu_it 🏷️ タグ #JavaScript #フロントエンド #プログラミング講座