
Copy Link
JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを開発できるプログラミング言語です。
このコースでは、JavaScriptの基礎からスタートし、最終的に最新のHTML5の機能を利用した、アプリの作成までを行います。
各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。
また、コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
※ 本コースの解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本コースでは、初心者でも作れるものを中心に、作成していきます。
このコースでJavaScriptを使ったWebアプリの作り方を学び、プログラミングの基礎とアプリケーションを実際に作れるようになるスキルを身につけましょう!
2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。
Section 1:イントロダクション | ||||
1 | イントロダクションムービー | Preview | 1:47 | |
Section 2:第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 | ||
Section 3:第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 | ||
Section 4:第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 | ||
Section 5:第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 | ||
Section 6:第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 | ||
Section 7:第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 | ||
Section 8:第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 | ||
Section 9:第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 | ||
Section 10:第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 | ||
Section 11:第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 | ||
Section 12:第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 | ||
Section 13:第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 | ||
Section 14:第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 | ||
Section 15:第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 | ||
Section 16:第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 | ||
Section 17:第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 | ||
Section 18:第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 | ||
Section 19:第18章 終わりに | ||||
179 | 178__終わりに | 2:46 |