コース概要
本講座を学んだ人は、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。また、プログラムの基礎と勘所をマスターできて、今後専門書を読んで自分で学習を進められるようになります。
本講座では基礎から学んでいき、最終的に最新のHTML5の機能を利用した、作図や画像フィルター処理、音声や動画の再生、Web API を利用したアプリの作成までを行います。
本講座では、HTML(UI部品の配置)、CSS（UI部品の装飾）、JavaScript（実行処理）を利用して、ブラウザ上で動くアプリケーションを作っていきます。
各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。
・税込み計算アプリ（入力欄から数値を得て計算結果を表示）
・アウトライン メモ（アウトライン エディタ風に、ネストしたリストを追加）
・三択問題アプリ（ユーザーの解答に応じて、結果表示を分岐）
・字典アプリ（マウスオーバーで、説明表示を切り替え）
・テーブル ソート（テーブルを、名前順や数値順で、自在にソート）
・連続計算アプリ（複数行入力欄の数式を、行ごとに計算して結果表示）
・メモ アプリ（Webブラウザに情報を記録したり、取り出したり）
・HTML自動リンク アプリ（文字列からURLを探し出して、自動でタグを付加）
・角丸四角画像生成アプリ（角丸四角のパスを作り、画像を動的に生成）
・画像切り抜きアプリ（画像を丸く切り抜いたPNG画像を生成）
・セピア調アプリ（画像の画素を処理して、セピア調に変換）
・音声再生アプリ（音声を読み込み、再生）
・動画再生アプリ（動画を読み込み、再生）
・ストップウォッチ（経過時間を取得して、定期的に表示を更新）
・人気Webページ表示（Web APIを利用して情報を得て、リンクボタンを自動生成）
JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう！
※ 本講座の解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本講座では、初心者でも作れるものを中心に、作成していきます
必要条件
- Google Chrome
Course Curriculum
Lesson 1
時間: 01:47
イントロダクション ムービー
Lesson 1
時間: 01:11
JavaScript とは
Lesson 2
時間: 00:51
Web の技術
Lesson 3
時間: 01:52
Web のクライアントサイドの技術
Lesson 4
時間: 01:44
HTML5 以前の世界、以降の世界
Lesson 5
時間: 02:54
JavaScript でプログラミングするのに必要なもの
Lesson 6
時間: 01:51
Google Chrome の導入
Lesson 7
時間: 01:43
要素を検証
Lesson 8
時間: 01:14
デバイスモード
Lesson 9
時間: 00:35
コンソール
Lesson 1
時間: 01:33
電卓代わりの数値計算
Lesson 2
時間: 02:56
丸括弧の利用
Lesson 3
時間: 02:48
文字列とは
Lesson 4
時間: 02:51
文字列の連結、文字列と数値の足し算
Lesson 5
時間: 01:02
文字列の長さを知る
Lesson 6
時間: 02:59
文字列の置換
Lesson 7
時間: 05:57
エンコードとデコード
Lesson 8
時間: 04:08
特殊な数値計算 Math
Lesson 9
時間: 02:14
MDN で調べる
Lesson 10
時間: 05:40
変数に値を格納する
Lesson 11
時間: 03:30
コンソールで複数行のプログラムを書く
Lesson 1
ソースコードのダウンロード
Lesson 2
時間: 01:41
UTF-8 で書く
Lesson 3
時間: 04:30
HTML ファイルを書く
Lesson 4
時間: 04:26
CSS を HTML ファイルに書く
Lesson 5
時間: 02:46
CSS を外部のテキストファイルに書く
Lesson 6
時間: 05:38
絶対 URL と 相対 URL
Lesson 7
時間: 01:26
CSS の調べ方
Lesson 8
時間: 03:39
JavaScript を HTML ファイルに書く
Lesson 9
時間: 02:32
JavaScript を外部のテキストファイルに書く
Lesson 10
時間: 01:45
コンソールに出力されるファイル名と行
Lesson 11
時間: 01:35
コンソールのエラーの見方
Lesson 12
時間: 02:36
コメント
Lesson 13
時間: 08:12
テンプレートを用意する
Lesson 1
時間: 00:54
本セクションで作るアプリ「税込み計算 Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 02:09
プログラムを短く書くメリット
Lesson 4
時間: 04:35
jQuery の導入
Lesson 5
時間: 02:20
DOM と要素
Lesson 6
時間: 04:12
jQuery を使った処理の開始
Lesson 7
時間: 04:28
jQuery の DOM 操作の基本
Lesson 8
時間: 01:52
数値と文字列
Lesson 9
時間: 02:59
ボタンに機能を追加する
Lesson 10
時間: 04:34
「税込み計算 Web アプリ」を作る
Lesson 1
時間: 02:07
本セクションで作るアプリ「アンケートっぽい何か」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 05:25
チェックボックスの情報取得と変更
Lesson 4
時間: 01:44
真偽値
Lesson 5
時間: 02:34
ラジオボタンの情報取得と変更
Lesson 6
時間: 02:47
リストの情報取得と変更
Lesson 7
時間: 02:10
値の変更で処理をおこなう
Lesson 8
時間: 04:32
送信前に処理をおこなう1
Lesson 9
時間: 06:31
送信前に処理をおこなう2
Lesson 10
時間: 03:53
「アンケートっぽい何か」を作る
Lesson 1
時間: 00:51
本セクションで作るアプリ「アウトライン メモ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 01:11
要素内の文字の取得、書き換え
Lesson 4
時間: 02:50
要素内の HTML の取得、書き換え
Lesson 5
時間: 01:12
要素の属性の取得、書き換え
Lesson 6
時間: 01:01
要素の CSS の取得、書き換え
Lesson 7
時間: 01:07
Web ページのタイトルを取得、書き換え
Lesson 8
時間: 02:10
jQuery で要素を作り、末尾に追加
Lesson 9
時間: 01:04
要素の絞りこみ
Lesson 10
時間: 02:28
子要素を探す
Lesson 11
時間: 01:45
親要素を探す
Lesson 12
時間: 03:25
「アウトライン メモ」を作る1
Lesson 13
時間: 04:12
「アウトライン メモ」を作る2
Lesson 1
時間: 00:43
本セクションで作るアプリ「三択問題 Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 02:30
if 文1
Lesson 4
時間: 01:44
if 文2
Lesson 5
時間: 01:43
if 文3
Lesson 6
時間: 01:31
波括弧の省略
Lesson 7
時間: 02:47
チェックボックスで、表示を切り替え
Lesson 8
時間: 03:32
比較演算子1
Lesson 9
時間: 01:11
比較演算子2
Lesson 10
時間: 02:49
switch case 文
Lesson 11
時間: 07:00
「三択問題 Web アプリ」を作る
Lesson 1
時間: 00:38
本セクションで作るアプリ「字典 Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 03:17
処理をまとめる
Lesson 4
時間: 04:17
変数のスコープ1
Lesson 5
時間: 02:06
変数のスコープ2
Lesson 6
時間: 02:09
引数を取る
Lesson 7
時間: 03:27
戻り値を持つ
Lesson 8
時間: 03:17
関数の基本構造
Lesson 9
時間: 04:18
「字典 Web アプリ」を作る1
Lesson 10
時間: 03:31
「字典 Web アプリ」を作る2
Lesson 1
時間: 00:54
本セクションで作るアプリ「テーブル ソート Web アプ...
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 01:14
配列とは
Lesson 4
時間: 04:59
配列の作り方1 Array
Lesson 5
時間: 01:49
配列の作り方2 角括弧、split
Lesson 6
時間: 06:15
ソート
Lesson 7
時間: 05:41
「テーブル ソート Web アプリ」を作る1
Lesson 8
時間: 06:17
「テーブル ソート Web アプリ」を作る2
Lesson 1
時間: 01:05
本セクションで作るアプリ「連続計算 Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 04:54
配列の各要素を処理するには
Lesson 4
時間: 05:37
for 文の書き方1
Lesson 5
時間: 01:56
for 文の書き方2
Lesson 6
時間: 01:57
break
Lesson 7
時間: 02:13
continue
Lesson 8
時間: 01:31
入れ子の配列
Lesson 9
時間: 04:55
入れ子のループ処理1
Lesson 10
時間: 01:57
入れ子のループ処理2
Lesson 11
時間: 03:07
while と do while
Lesson 12
時間: 06:47
「連続計算 Web アプリ」を作る
Lesson 1
時間: 01:42
本セクションで作るアプリ「メモ Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 03:55
オブジェクト、プロパティ、メソッド1
Lesson 4
時間: 02:56
オブジェクト、プロパティ、メソッド2
Lesson 5
時間: 03:43
new this オブジェクト
Lesson 6
時間: 02:46
全てのプロパティを処理する
Lesson 7
時間: 02:41
window オブジェクト
Lesson 8
時間: 02:19
JSON
Lesson 9
時間: 02:58
cookie
Lesson 10
時間: 03:44
「メモ Web アプリ」を作る1
Lesson 11
時間: 02:43
「メモ Web アプリ」を作る2
Lesson 12
時間: 03:37
「メモ Web アプリ」を作る3
Lesson 13
時間: 03:25
「メモ Web アプリ」を作る4
Lesson 1
時間: 00:48
本セクションで作るアプリ「HTML 自動リンク Web アプ...
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 05:39
正規表現とは1
Lesson 4
時間: 03:25
正規表現とは2
Lesson 5
時間: 03:23
繰り返し1
Lesson 6
時間: 02:43
繰り返し2
Lesson 7
時間: 04:43
その他の正規表現
Lesson 8
時間: 04:12
後方参照
Lesson 9
時間: 04:18
置換に関数を使う
Lesson 10
時間: 05:22
文字列検索
Lesson 11
時間: 04:20
「HTML 自動リンク Web アプリ」を作る
Lesson 1
時間: 01:00
本セクションで作るアプリ「角丸描画 Web アプリ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 01:39
Canvas とは
Lesson 4
時間: 05:25
矩形の描画1
Lesson 5
時間: 05:02
矩形の描画2
Lesson 6
時間: 05:00
文字の描画
Lesson 7
時間: 05:55
線の描画
Lesson 8
時間: 05:27
円の描画
Lesson 9
時間: 04:07
Canvas の生成
Lesson 10
時間: 04:28
Canvas から PNG を生成
Lesson 11
時間: 03:06
「角丸描画 Web アプリ」を作る1
Lesson 12
時間: 03:38
「角丸描画 Web アプリ」を作る2
Lesson 13
時間: 05:00
「角丸描画 Web アプリ」を作る3
Lesson 1
時間: 01:10
本セクションで作るアプリ「画像切り抜き Web アプリ...
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 03:07
画像の描画1
Lesson 4
時間: 03:08
画像の描画2
Lesson 5
時間: 03:52
「画像切り抜き Web アプリ」を作る1
Lesson 6
時間: 02:27
「画像切り抜き Web アプリ」を作る2
Lesson 7
時間: 02:30
「画像切り抜き Web アプリ」を作る3
Lesson 8
時間: 04:55
「画像切り抜き Web アプリ」を作る4
Lesson 9
時間: 03:02
「セピア調 Web アプリ」を作る1
Lesson 10
時間: 03:59
「セピア調 Web アプリ」を作る2
Lesson 11
時間: 02:14
「セピア調 Web アプリ」を作る3
Lesson 1
時間: 00:52
本セクションで作るアプリ「音声再生 Web アプリ」「...
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 01:58
「音声再生 Web アプリ」を作る1
Lesson 4
時間: 03:53
「音声再生 Web アプリ」を作る2
Lesson 5
時間: 01:29
「音声再生 Web アプリ」を作る3
Lesson 6
時間: 03:46
「動画再生 Web アプリ」を作る
Lesson 1
時間: 00:47
本セクションで作るアプリ「ストップウォッチ」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 02:32
Date1
Lesson 4
時間: 03:44
Date2
Lesson 5
時間: 03:34
setTimeout
Lesson 6
時間: 02:43
setInterval
Lesson 7
時間: 03:27
「ストップウォッチ Web アプリ」を作る1
Lesson 8
時間: 03:45
「ストップウォッチ Web アプリ」を作る2
Lesson 1
時間: 00:46
本セクションで作るアプリ「人気Webページ表示」
Lesson 2
ソースコードのダウンロード
Lesson 3
時間: 02:45
getScript
Lesson 4
時間: 03:35
get
Lesson 5
時間: 05:04
getJSON
Lesson 6
時間: 03:03
ajax
Lesson 7
時間: 03:52
「人気 Web ページ表示 Web アプリ」を作る
Lesson 1
時間: 02:46
終わりに
About the Expert - クロノス・クラウン合同会社-57
2002年設立のクロノス・クラウン合同会社。代表の柳井です。 ゲームやアプリケーションの開発、書籍や記事の執筆をおこなっています。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
クロノス・クラウン合同会社-57 によるその他のコース
レビューを書く
[[ errors.rating[0] ]]
[[ errors.comments[0] ]]
[[ serverMessage ]]
[[ errors.course_id[0] ]]
プロモーション動画
プレーヤーを読み込んでいます...
プレーヤーを読み込んでいます...