Top Programming 実例でわかる JavaScript 初心者講座
PRO COURSE

実例でわかる JavaScript 初心者講座

初心者を対象にしたJavaScript講座です。実際にブラウザ上で動くHTML 5アプリをたくさん作りながら、JavaScriptの基礎を学びます。

動くアプリをたくさん作って
JavaScriptの基礎を学ぼう!!


JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを開発できるプログラミング言語です。

このコースでは、JavaScriptの基礎からスタートし、最終的に最新のHTML5の機能を利用した、アプリの作成までを行います。

各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。

また、コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。

  • 税込み計算アプリ(入力欄から数値を得て計算結果を表示)
  • アウトライン メモ(アウトライン エディタ風に、ネストしたリストを追加)
  • 三択問題アプリ(ユーザーの解答に応じて、結果表示を分岐)
  • 字典アプリ(マウスオーバーで、説明表示を切り替え)
  • テーブル ソート(テーブルを、名前順や数値順で、自在にソート)
  • 連続計算アプリ(複数行入力欄の数式を、行ごとに計算して結果表示)
  • メモ アプリ(Webブラウザに情報を記録したり、取り出したり)
  • HTML自動リンク アプリ(文字列からURLを探し出して、自動でタグを付加)
  • 角丸四角画像生成アプリ(角丸四角のパスを作り、画像を動的に生成)
  • 画像切り抜きアプリ(画像を丸く切り抜いたPNG画像を生成)
  • セピア調アプリ(画像の画素を処理して、セピア調に変換)
  • 音声再生アプリ(音声を読み込み、再生)
  • 動画再生アプリ(動画を読み込み、再生)
  • ストップウォッチ(経過時間を取得して、定期的に表示を更新)
  • 人気Webページ表示(Web APIを利用して情報を得て、リンクボタンを自動生成)

※ 本コースの解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本コースでは、初心者でも作れるものを中心に、作成していきます。

このコースで学べること

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

受講における必要条件

  • 事前の準備は特に必要ありません。
  • 表示確認用のWebブラウザとして、Google Chromeを使います。

こんな方にオススメ

  • プログラミング未経験者や初心者。
  • 過去にプログラミングの勉強をしたことがあるが挫折した人。
  • JavaScriptについて知識がない人。
  • 手軽にアプリを作ってみたい人。

このコースでJavaScriptを使ったWebアプリの作り方を学び、プログラミングの基礎とアプリケーションを実際に作れるようになるスキルを身につけましょう!

About the Instructor

柳井 政和
クロノス・クラウン合同会社 代表社員

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。

秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。

2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。

2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。

See more

Course content

Total 8 hours 37 minutes
Preview You can preview lectures with this label
イントロダクション
1 イントロダクションムービー Preview 1:47
第1章 JavaScriptの基本1
2 JavaScript とは Preview 1:11
3 Web の技術 0:51
4 Web のクライアントサイドの技術 1:52
5 HTML5 以前の世界、以降の世界 1:44
6 JavaScript でプログラミングするのに必要なもの 2:54
7 Google Chrome の導入 1:51
8 要素を検証 1:43
9 デバイスモード 1:14
10 コンソール 0:35
第2章 とりあえず書いてみる
11 電卓代わりの数値計算 Preview 1:33
12 丸括弧の利用 2:56
13 文字列とは 2:48
14 文字列の連結、文字列と数値の足し算 2:51
15 文字列の長さを知る 1:03
16 文字列の置換 2:59
17 エンコードとデコード 5:57
18 特殊な数値計算 Math 4:08
19 MDN で調べる 2:14
20 変数に値を格納する 5:40
21 コンソールで複数行のプログラムを書く 3:30
第3章 テキストファイルに書いてみる
22 ソースコードのダウンロード 1:00
23 UTF-8 で書く 1:41
24 HTML ファイルを書く Preview 4:30
25 CSS を HTML ファイルに書く 4:26
26 CSS を外部のテキストファイルに書く 2:46
27 絶対 URL と 相対 URL 5:38
28 CSS の調べ方 1:26
29 JavaScript を HTML ファイルに書く 3:39
30 JavaScript を外部のテキストファイルに書く 2:32
31 コンソールに出力されるファイル名と行 1:45
32 コンソールのエラーの見方 1:35
33 コメント 2:36
34 テンプレートを用意する 8:12
第4章 jQuery
35 本セクションで作るアプリ「税込み計算 Web アプリ」 Preview 0:54
36 ソースコードのダウンロード 1:00
37 プログラムを短く書くメリット Preview 2:09
38 jQuery の導入 Preview 4:35
39 DOM と要素 2:20
40 jQuery を使った処理の開始 4:12
41 jQuery の DOM 操作の基本 4:28
42 数値と文字列 1:52
43 ボタンに機能を追加する 2:59
44 「税込み計算 Web アプリ」を作る 4:34
第5章 その他のフォーム部品
45 本セクションで作るアプリ「アンケートっぽい何か」 2:07
46 ソースコードのダウンロード 1:00
47 チェックボックスの情報取得と変更 5:25
48 真偽値 1:44
49 ラジオボタンの情報取得と変更 2:34
50 リストの情報取得と変更 2:48
51 値の変更で処理をおこなう 2:10
52 送信前に処理をおこなう1 4:32
53 送信前に処理をおこなう2 6:31
54 「アンケートっぽい何か」を作る 3:53
第6章 Web ページを書き換える
55 本セクションで作るアプリ「アウトライン メモ」 0:51
56 ソースコードのダウンロード 1:00
57 要素内の文字の取得、書き換え 1:11
58 要素内の HTML の取得、書き換え 2:50
59 要素の属性の取得、書き換え 1:12
60 要素の CSS の取得、書き換え 1:01
61 Web ページのタイトルを取得、書き換え 1:07
62 jQuery で要素を作り、末尾に追加 2:10
63 要素の絞りこみ 1:04
64 子要素を探す 2:28
65 親要素を探す 1:45
66 「アウトライン メモ」を作る1 3:25
67 「アウトライン メモ」を作る2 4:12
第7章 条件分岐
68 本セクションで作るアプリ「三択問題 Web アプリ」 0:43
69 ソースコードのダウンロード 1:00
70 if 文1 2:30
71 if 文2 1:44
72 if 文3 1:44
73 波括弧の省略 1:31
74 チェックボックスで、表示を切り替え 2:47
75 比較演算子1 3:32
76 比較演算子2 1:11
77 switch case 文 2:49
78 「三択問題 Web アプリ」を作る 7:00
第8章 関数
79 本セクションで作るアプリ「字典 Web アプリ」 0:38
80 ソースコードのダウンロード 1:00
81 処理をまとめる 3:17
82 変数のスコープ1 4:17
83 変数のスコープ2 2:06
84 引数を取る 2:09
85 戻り値を持つ 3:27
86 関数の基本構造 3:17
87 「字典 Web アプリ」を作る1 4:18
88 「字典 Web アプリ」を作る2 3:31
第9章 配列
89 本セクションで作るアプリ「テーブル ソート Web アプリ」 0:54
90 ソースコードのダウンロード 1:00
91 配列とは 1:14
92 配列の作り方1 Array 4:59
93 配列の作り方2 角括弧、split 1:49
94 ソート 6:15
95 「テーブル ソート Web アプリ」を作る1 5:41
96 「テーブル ソート Web アプリ」を作る2 6:17
第10章 ループ処理
97 本セクションで作るアプリ「連続計算 Web アプリ」 1:05
98 ソースコードのダウンロード 1:00
99 配列の各要素を処理するには 4:54
100 for 文の書き方1 5:37
101 for 文の書き方2 1:56
102 break 1:57
103 continue 2:13
104 入れ子の配列 1:31
105 入れ子のループ処理1 4:55
106 入れ子のループ処理2 1:57
107 while と do while 3:07
108 「連続計算 Web アプリ」を作る 6:47
第11章 オブジェクト
109 本セクションで作るアプリ「メモ Web アプリ 1:42
110 ソースコードのダウンロード 1:00
111 サーバーの利用 1:00
112 オブジェクト、プロパティ、メソッド1 3:55
113 オブジェクト、プロパティ、メソッド2 2:56
114 new this オブジェクト 3:43
115 全てのプロパティを処理する 2:46
116 window オブジェクト 2:41
117 JSON 2:19
118 cookie 2:58
119 「メモ Web アプリ」を作る1 3:44
120 「メモ Web アプリ」を作る2 2:43
121 「メモ Web アプリ」を作る3 3:37
122 「メモ Web アプリ」を作る4 3:26
第12章 正規表現
123 本セクションで作るアプリ「HTML 自動リンク Web アプリ」 0:48
124 ソースコードのダウンロード 1:00
125 正規表現とは1 5:39
126 正規表現とは2 3:25
127 繰り返し1 3:23
128 繰り返し2 2:43
129 その他の正規表現 4:44
130 後方参照 4:12
131 置換に関数を使う 4:18
132 文字列検索 5:22
133 「HTML 自動リンク Web アプリ」 4:20
第13章 Canvas 1
134 本セクションで作るアプリ「角丸描画 Web アプリ」 1:00
135 ソースコードのダウンロード 1:00
136 Canvas とは 1:39
137 矩形の描画1 5:25
138 矩形の描画2 5:02
139 文字の描画 5:00
140 線の描画 5:55
141 円の描画 5:27
142 Canvas の生成 4:07
143 Canvas から PNG を生成 4:28
144 「角丸描画 Web アプリ」を作る1 3:06
145 「角丸描画 Web アプリ」を作る2 3:38
146 「角丸描画 Web アプリ」を作る3 5:00
第14章 Canvas 2
147 「画像切り抜き Web アプリ」「セピア調 Web アプリ」 1:10
148 ソースコードのダウンロード 1:00
149 画像の描画1 3:07
150 画像の描画2 3:08
151 「画像切り抜き Web アプリ」を作る1 3:52
152 「画像切り抜き Web アプリ」を作る2 2:27
153 「画像切り抜き Web アプリ」を作る3 2:30
154 「画像切り抜き Web アプリ」を作る4 4:55
155 「セピア調 Web アプリ」を作る1 3:02
156 「セピア調 Web アプリ」を作る2 3:59
157 「セピア調 Web アプリ」を作る3 2:14
第15章 音声と映像
158 「音声再生 Web アプリ」「動画再生 Web アプリ」 0:52
159 ソースコードのダウンロード 1:00
160 「音声再生 Web アプリ」を作る1 1:58
161 「音声再生 Web アプリ」を作る2 3:54
162 「音声再生 Web アプリ」を作る3 1:29
163 「動画再生 Web アプリ」を作る 3:46
第16章 時間
164 本セクションで作るアプリ「ストップウォッチ」 0:47
165 ソースコードのダウンロード 1:00
166 Date1 2:32
167 Date2 3:44
168 setTimeout 3:34
169 setInterval 2:43
170 「ストップウォッチ Web アプリ」を作る1 3:28
171 「ストップウォッチ Web アプリ」を作る2 3:45
第17章 通信
172 本セクションで作るアプリ「人気Webページ表示」 0:46
173 ソースコードのダウンロード 1:00
174 getScript 2:45
175 get 3:36
176 getJSON 5:04
177 ajax 3:03
178 「人気 Web ページ表示 Web アプリ」を作る 3:52
第18章 終わりに
179 178__終わりに 2:46

Ratings and reviews

4.5
6 reviews
5 stars
67%
4 stars
17%
3 stars
17%
2 stars
0%
1 stars
0%

Related Courses