【30日間無料体験】AI初心者が無料で基礎知識を学ぶなら「Audible」

【講座レビュー】実例でわかる JavaScript 初心者講座

JavaScript 初心者

SHARE

記事には広告が含まれています

なかぴょん

Udemyにある「実例でわかる JavaScript 初心者講座」を受けてきたよ。
JavaScriptで実際にWEBアプリケーションを作ってみたい方におすすめだよ。

へびにょん

なかぴょんです。
今回はUdemyの講座、実例でわかる JavaScript 初心者講座を受けてきました。

JavaScriptで実際にWEBアプリケーションを作ってみたいと考えている方にもおすすめの講座です。

それでは、詳しく解説していきます。

誰向きなのか

こんな人におすすめ
・プログラミング未経験者や初心者

・過去にプログラミングの勉強をしたことがあるが挫折した方

・JavaScriptについて知識がない方

・手軽にアプリを作ってみたい方

何が学べるのか

  • JavaScriptの基本の習得
  • 変数、条件分岐、ループ処理、配列など、プログラミングの基本の理解
  • HTML、CSS、JavaScriptを利用した、ブラウザ上で動くアプリケーションの作成
  • HTML5の機能を利用した、画像処理や音声、動画の再生

学ぶ際の事前準備

事前の準備は特に必要ありません。

表示確認用のWebブラウザとして、Google Chromeを使います。

MacでもWindowsでも受講が可能です。

講座での制作物

制作物一覧
・税込み計算アプリ（入力欄から数値を得て計算結果を表示）

・アウトラインメモ（アウトライン エディタ風に、ネストしたリストを追加）

・三択問題アプリ（ユーザーの解答に応じて、結果表示を分岐）

・字典アプリ（マウスオーバーで、説明表示を切り替え）

・テーブルソート（テーブルを、名前順や数値順で、自在にソート）

・連続計算アプリ（複数行入力欄の数式を、行ごとに計算して結果表示）

・メモアプリ（Webブラウザに情報を記録したり、取り出したり）

・HTML自動リンクアプリ（文字列からURLを探し出して、自動でタグを付加）

・角丸四角画像生成アプリ（角丸四角のパスを作り、画像を動的に生成）

・画像切り抜きアプリ（画像を丸く切り抜いたPNG画像を生成）

・セピア調アプリ（画像の画素を処理して、セピア調に変換）

・音声再生アプリ（音声を読み込み、再生）

・動画再生アプリ（動画を読み込み、再生）

・ストップウォッチ（経過時間を取得して、定期的に表示を更新）

・人気Webページ表示（Web APIを利用して情報を得て、リンクボタンを自動生成）

講座詳細

セクション1 イントロダクション

  • 1. イントロダクション ムービー

セクション2 第1章 JavaScriptの基本1

  • 2. JavaScript とは
  • 3. Web の技術
  • 4. Webのクライアントサイドの技術
  • 5. HTML5以前の世界、以降の世界
  • 6. JavaScriptでプログラミングするのに必要なもの
  • 7. Google Chromeの導入
  • 8. 要素を検証
  • 9. デバイスモード
  • 10. コンソール

セクション3 第2章 とりあえず書いてみる

  • 11. 電卓代わりの数値計算
  • 12. 丸括弧の利用
  • 13. 文字列とは
  • 14. 文字列の連結、文字列と数値の足し算
  • 15. 文字列の長さを知る
  • 16. 文字列の置換
  • 17. エンコードとデコード
  • 18. 特殊な数値計算 Math
  • 19. MDNで調べる
  • 20. 変数に値を格納する
  • 21. コンソールで複数行のプログラムを書く

セクション4 第3章 テキストファイルに書いてみる

  • 22. ソースコードのダウンロード
  • 23. UTF-8 で書く
  • 24. HTML ファイルを書く
  • 25. CSS を HTML ファイルに書く
  • 26. CSS を外部のテキストファイルに書く
  • 27. 絶対 URL と 相対 URL
  • 28. CSS の調べ方
  • 29. JavaScript を HTML ファイルに書く
  • 30. JavaScript を外部のテキストファイルに書く
  • 31. コンソールに出力されるファイル名と行
  • 32. コンソールのエラーの見方
  • 33. コメント
  • 34. テンプレートを用意する

セクション5 第4章 jQuery

  • 35. 本セクションで作るアプリ「税込み計算 Web アプリ」
  • 36. ソースコードのダウンロード
  • 37. プログラムを短く書くメリット
  • 38. jQuery の導入
  • 39. DOM と要素
  • 40. jQuery を使った処理の開始
  • 41. jQuery の DOM 操作の基本
  • 42. 数値と文字列
  • 43. ボタンに機能を追加する
  • 44. 「税込み計算 Web アプリ」を作る

セクション6 第5章 その他のフォーム部品

  • 45. 本セクションで作るアプリ「アンケートっぽい何か」
  • 46. ソースコードのダウンロード
  • 47. チェックボックスの情報取得と変更
  • 48. 真偽値
  • 49. ラジオボタンの情報取得と変更
  • 50. リストの情報取得と変更
  • 51. 値の変更で処理をおこなう
  • 52. 送信前に処理をおこなう1
  • 53. 送信前に処理をおこなう2
  • 54. 「アンケートっぽい何か」を作る

セクション7 第6章 Web ページを書き換える

  • 55. 本セクションで作るアプリ「アウトライン メモ」
  • 56. ソースコードのダウンロード
  • 57. 要素内の文字の取得、書き換え
  • 58. 要素内の HTML の取得、書き換え
  • 59. 要素の属性の取得、書き換え
  • 60. 要素の CSS の取得、書き換え
  • 61. Web ページのタイトルを取得、書き換え
  • 62. jQuery で要素を作り、末尾に追加
  • 63. 要素の絞りこみ
  • 64. 子要素を探す
  • 65. 親要素を探す
  • 66. 「アウトライン メモ」を作る1
  • 67. 「アウトライン メモ」を作る2

セクション8 第7章 条件分岐

  • 68. 本セクションで作るアプリ「三択問題 Web アプリ」
  • 69. ソースコードのダウンロード
  • 70. if 文1
  • 71. if 文2
  • 72. if 文3
  • 73. 波括弧の省略
  • 74. チェックボックスで、表示を切り替え
  • 75. 比較演算子1
  • 76. 比較演算子2
  • 77. switch case 文
  • 78. 「三択問題 Web アプリ」を作る

セクション9 第8章 関数

  • 79. 本セクションで作るアプリ「字典 Web アプリ」
  • 80. ソースコードのダウンロード
  • 81. 処理をまとめる
  • 82. 変数のスコープ1
  • 83. 変数のスコープ2
  • 84. 引数を取る
  • 85. 戻り値を持つ
  • 86. 関数の基本構造
  • 87. 「字典 Web アプリ」を作る1
  • 88. 「字典 Web アプリ」を作る2

セクション10 第9章 配列

  • 89. 本セクションで作るアプリ「テーブルソートWebアプリ」
  • 90. ソースコードのダウンロード
  • 91. 配列とは
  • 92. 配列の作り方1 Array
  • 93. 配列の作り方2 角括弧、split
  • 94. ソート
  • 95. 「テーブルソートWebアプリ」を作る1
  • 96. 「テーブルソートWebアプリ」を作る2

セクション11 第10章 ループ処理

  • 97. 本セクションで作るアプリ「連続計算 Web アプリ」
  • 98. ソースコードのダウンロード
  • 99. 配列の各要素を処理するには
  • 100. for 文の書き方1
  • 101. for 文の書き方2
  • 102. break
  • 103. continue
  • 104. 入れ子の配列
  • 105. 入れ子のループ処理1
  • 106. 入れ子のループ処理2
  • 107. while と do while
  • 108. 「連続計算 Web アプリ」を作る

セクション12 第11章 オブジェクト

  • 109. 本セクションで作るアプリ「メモWebアプリ」
  • 110. ソースコードのダウンロード
  • 111. サーバーの利用
  • 112. オブジェクト、プロパティ、メソッド1
  • 113. オブジェクト、プロパティ、メソッド2
  • 114. new this オブジェクト
  • 115. 全てのプロパティを処理する
  • 116. window オブジェクト
  • 117. JSON
  • 118. cookie
  • 119. 「メモ Web アプリ」を作る1
  • 120. 「メモ Web アプリ」を作る2
  • 121. 「メモ Web アプリ」を作る3
  • 122. 「メモ Web アプリ」を作る4

セクション13 第12章 正規表現

  • 123. 本セクションで作るアプリ「HTML 自動リンク Web アプリ」
  • 124. ソースコードのダウンロード
  • 125. 正規表現とは1
  • 126. 正規表現とは2
  • 127. 繰り返し1
  • 128. 繰り返し2
  • 129. その他の正規表現
  • 130. 後方参照
  • 131. 置換に関数を使う
  • 132. 文字列検索
  • 133. 「HTML 自動リンク Web アプリ」を作る

セクション14 第13章 Canvas 1

  • 134. 本セクションで作るアプリ「角丸描画 Web アプリ」
  • 135. ソースコードのダウンロード
  • 136. Canvas とは
  • 137. 矩形の描画1
  • 138. 矩形の描画2
  • 139. 文字の描画
  • 140. 線の描画
  • 141. 円の描画
  • 142. Canvas の生成
  • 143. Canvas から PNG を生成
  • 144. 「角丸描画 Web アプリ」を作る1
  • 145. 「角丸描画 Web アプリ」を作る2
  • 146. 「角丸描画 Web アプリ」を作る3

セクション15 第14章 Canvas 2

  • 147. 本セクションで作るアプリ「画像切り抜き Web アプリ」「セピア調 Web アプリ」
  • 148. ソースコードのダウンロード
  • 149. 画像の描画1
  • 150. 画像の描画2
  • 151. 「画像切り抜き Web アプリ」を作る1
  • 152. 「画像切り抜き Web アプリ」を作る2
  • 153. 「画像切り抜き Web アプリ」を作る3
  • 154. 「画像切り抜き Web アプリ」を作る4
  • 155. 「セピア調 Web アプリ」を作る1
  • 156. 「セピア調 Web アプリ」を作る2
  • 157. 「セピア調 Web アプリ」を作る3

セクション16 第15章 音声と映像

  • 158. 本セクションで作るアプリ「音声再生 Web アプリ」「動画再生 Web アプリ」
  • 159. ソースコードのダウンロード
  • 160. 「音声再生 Web アプリ」を作る1
  • 161. 「音声再生 Web アプリ」を作る2
  • 162. 「音声再生 Web アプリ」を作る3
  • 163. 「動画再生 Web アプリ」を作る

セクション17 第16章 時間

  • 164. 本セクションで作るアプリ「ストップウォッチ」
  • 165. ソースコードのダウンロード
  • 166. Date1
  • 167. Date2
  • 168. setTimeout
  • 169. setInterval
  • 170. 「ストップウォッチ Web アプリ」を作る1
  • 171. 「ストップウォッチ Web アプリ」を作る2

セクション18 第17章 通信

  • 172. 本セクションで作るアプリ「人気Webページ表示」
  • 173. ソースコードのダウンロード
  • 174. getScript
  • 175. get
  • 176. getJSON
  • 177. ajax
  • 178. 「人気 Web ページ表示 Web アプリ」を作る

セクション19 第18章 終わりに

  • 179. 終わりに

まとめ

今回はUdemyの講座、実例でわかる JavaScript 初心者講座についてご紹介しました。

JavaScriptで実際にWEBアプリケーションを作ってみることができて良かったです。

なかぴょんに受けてほしい学習サービスのリクエスト等ございましたら、
お問い合わせにてお伝えください。

なかぴょん

リクエストお待ちしております(^^)

前の記事

AI Python 人工知能 機械学習
Pythonを始める人におすすめの講座を紹介！-みんなのAI講…

次の記事

WordPressでWEBサイトを作るのにプログラミングは不要…
WordPressでWEBサイトを作るのにプログラミングは不要！2日でできるWordPress超入門