
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秒 |