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