実例でわかる JavaScript 初心者講座
4.2 (157 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,134 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 実例でわかる JavaScript 初心者講座 to your Wishlist.

Add to Wishlist

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

プログラミングの基礎から学び、JavaScriptでWebアプリ(ブラウザ上で動くアプリ)を作ろう!
4.2 (157 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,134 students enrolled
Created by 柳井 政和
Last updated 9/2016
Japanese
Current price: $10 Original price: $85 Discount: 88% off
2 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • JavaScriptの基本の習得。
  • 変数、条件分岐、ループ処理、配列など、プログラミングの基本の理解。
  • HTML、CSS、JavaScriptを利用した、ブラウザ上で動くアプリケーションの作成。
  • HTML5の機能を利用した、画像処理や音声、動画の再生。
View Curriculum
Requirements
  • 事前の準備は特に必要ありません。
  • 表示確認用のWebブラウザとして、Google Chromeを使います。
Description

 このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。

 このコースを習得すれば、次のような事ができるようになります。

- プログラミングの基礎の習得。

- ブラウザ上で動くアプリケーションの作成。

- 最新のHTML5の機能の利用(作図、画像フィルター処理、音声や動画の再生、Web APIの使用)

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

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

‥‥‥‥‥‥‥‥‥‥

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

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


 JavaScript
は、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう!

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

Who is the target audience?
  • プログラミング未経験者や初心者。
  • 過去にプログラミングの勉強をしたことがあるが挫折した人。
  • JavaScriptについて知識がない人。
  • 手軽にアプリを作ってみたい人。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
179 Lectures
08:24:24
+
イントロダクション
1 Lecture 01:47

本講座自体の説明をおこない、おおまかなロードマップを示します。

Preview 01:47
+
第1章 JavaScriptの基本1
9 Lectures 13:50

JavaScriptが、Webブラウザ用の言語であること、Javaとは違うことを理解します。

Preview 01:10

サーバーサイドとクライアントサイドの違いについて学習します。

Web の技術
00:51

Webブラウザの動作を把握します。HTMLで文章やボタンを配置、CSSでレイアウトや装飾、JavaScriptで実行処理を行います。

Web のクライアントサイドの技術
01:51

HTML5 では、画像描画や音声、動画の操作、ローカルファイルとの連携ができるようにありました。その結果、HTML5 の登場で、Webアプリが作りやすくなったという話をします。

HTML5 以前の世界、以降の世界
01:44

ブラウザ、テキストエディタが必要です。どういったソフトが使いやすいか説明します。

JavaScript でプログラミングするのに必要なもの
02:53

Google Chrome の導入の仕方を説明します。 また、Google Chromeで開発を行っていくために、開発者ツールの開き方をマスターします。

Google Chrome の導入
01:50

Google Chrome の「要素を検証」機能を紹介します。 HTMLファイルを見て、表示との対応を確認できるようになります。

要素を検証
01:42

Google Chrome の「デバイスモード」機能を紹介します。AndroidやiPhoneなど、様々なデバイスで、どのように表示されるかを、確認することができます。モバイル用の開発時に、力を発揮する機能です。

デバイスモード
01:14

Google Chrome の「コンソール」機能を紹介します。 プログラム実行時のエラーなどの表示が、どこに出力されるか把握します。

コンソール
00:35
+
第2章 とりあえず書いてみる
11 Lectures 35:34

最も簡単なプログラムを試してみましょう。 コンソールを利用した、1行プログラムの実行ができるようになります。

Preview 01:32

計算順序を入れ替えてみましょう。 数値計算の基本となる、演算子の優先順位を使いこなせるようになります。

丸括弧の利用
02:56

文字と文字列のお話をします。 プログラミングで頻出する文字列について理解します。

文字列とは
02:47

文字列と数値を足すとどうなるか。何も考えないと、意図しない結果になってしまうという実例を示します。意図した結果にするには、丸括弧を使います。

文字列の連結、文字列と数値の足し算
02:50

文字列.lengthで、文字列の長さを知る方法を学びます。文章の文字数などを知る時に便利です。また、入力文字数制限などを行う際も有効です。

文字列の長さを知る
01:02

replace で文字列を置換する方法を学びます。NGワードを除去するなどの使い方ができます。

文字列の置換
02:59

文字列のエンコードとデコードを行います。 サーバーに日本語を送る際に必要になります。

エンコードとデコード
05:56

ちょっと特殊な計算方法は、Mathを使えばOK。小数点以下の切り捨てやn乗計算、平方根の計算などを使えるようになります。

特殊な数値計算 Math
04:08

Web で JavaScript のことを調べるには、MDN が便利。 その使い方をマスターします。

MDN で調べる
02:14

変数に値を格納して、値を再利用します。 複雑な計算を、簡潔に書けるようになります。

変数に値を格納する
05:40

Shift+Enterで複数行を入力する方法を学びます。

コンソールで複数行のプログラムを書く
03:30
+
第3章 テキストファイルに書いてみる
13 Lectures 40:53

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

文字コードのお話をします。 基本的に、UTF-8 を使うと問題ないです。

UTF-8 で書く
01:41

HTML ファイルを書いて表示します。

Preview 04:29

CSS は、HTML のレイアウトや装飾を行う機能です。この CSS を、直接 HTML ファイルに書いて、どういった状態になるか、試してみます。

CSS を HTML ファイルに書く
04:26

HTML ファイル内に書くと再利用がしにくいので、CSS を、HTML ファイルとは別のファイルに書いてみます。

CSS を外部のテキストファイルに書く
02:46

絶対 URL と相対 URL のお話をします。

絶対 URL と 相対 URL
05:38

CSS の情報の調べ方を紹介します。

CSS の調べ方
01:25

JavaScript を、直接 HTML ファイルに書いてみます。 JavaScript は、Webページに様々な機能を追加できます。

JavaScript を HTML ファイルに書く
03:38

JavaScript を、HTML ファイルとは別のファイルに書いてみます。 これで、異なる HTML ファイルから、同じプログラムを利用可能になります。

JavaScript を外部のテキストファイルに書く
02:31

console.logで、コンソールに情報を出力した際の、見方を説明します。実行ファイルと、実行行が表示されるので、どこで出力された値なのか、すぐに確認できます。

コンソールに出力されるファイル名と行
01:45

コンソールにエラーが出力された際の、見方を説明します。 グを修正するには、必須の知識です。

コンソールのエラーの見方
01:35

プログラムとして実行されない、コメントについて説明します。コメントを書くことで、プロ倉がどういったものか、後で見直した時に、非常に分かりやすくなります。

コメント
02:36

jQuery と Bootstrap を利用した Web アプリのテンプレートを用意します。 以降、このテンプレートを元に、Webアプリの開発を行っていきます。

テンプレートを用意する
08:12
+
第4章 jQuery
10 Lectures 28:10

金額と税率から、税金の金額と、税込み金額を計算して表示するアプリです。その使い方を、まずは紹介します。

Preview 00:53

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

プログラムを短く書くメリットを説明します。また、jQueryについて、軽く触れます。

Preview 02:09

プログラムを短く書くために、jQueryを導入します。JavaScriptで、Web ページ用のプログラムを書く作業が、劇的に簡単になります。

Preview 04:34

DOM についてのお話をします。 Web ページをどのように操作するかを把握します。

DOM と要素
02:20

$(function() {}); で書く、DOM準備後の処理を紹介します。 jQuery を使った Web ページ操作の入り口です。

jQuery を使った処理の開始
04:12

jQuery の DOM 操作の基本について話をします。

jQuery の DOM 操作の基本
04:27

注意事項です。jQuery で取得する値は文字列という話をします。このことを知らないと、思わぬエラーを招きます。

数値と文字列
01:52

ボタンに機能を追加して、様々な処理を行えるようになります。

ボタンに機能を追加する
02:58

実際にアプリを作成します。これまでの知識を利用して、「税込み計算 Web アプリ」を作ります。

「税込み計算 Web アプリ」を作る
04:34
+
第5章 その他のフォーム部品
10 Lectures 31:49

チェックボックス、ラジオボタン、セレクト、テキストエリアなど、フォームの部品の値を取得したり、プログラムから操作したりするサンプルのアプリの、概要を紹介します。

本セクションで作るアプリ「アンケートっぽい何か」
02:06

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

jQuery を使って、チェックボックスの情報取得と変更ができるようになります。

チェックボックスの情報取得と変更
05:24

真偽値について学びます。 true(真)か、false(偽)という2つの状態で、処理を分岐したりするために必要な知識を身に付けます。

真偽値
01:44

jQuery を使って、ラジオボタンの情報取得と変更ができるようになります。

ラジオボタンの情報取得と変更
02:33

jQuery を使って、リストの情報取得と変更ができるようになります。

リストの情報取得と変更
02:47

フォームの値が変更した際に、処理を行えるようになります。

値の変更で処理をおこなう
02:09

サーバーにフォームの内容を送信する前に、処理をおこなえるようになります。入力欄のチェックなどの処理をおこないまう、その1です。サーバーへの送信を止める話を中心に解説します。

送信前に処理をおこなう1
04:32

(前回の続き)サーバーにフォームの内容を送信する前に、処理をおこなえるようになります。入力欄のチェックなどの処理をおこなう、その2です。入力欄のチェックを中心に話をします。

送信前に処理をおこなう2
06:31

実際にアプリを作成します。アンケートっぽい画面を作り、各種フォームの値取得/設定を行います。基本的なUI操作が、一通りできるようになります。

「アンケートっぽい何か」を作る
03:52
+
第6章 Web ページを書き換える
13 Lectures 23:20

ツリー構造でメモを記録できる、アウトライン プロセッサ風のメモです。項目を追加したり、ネストさせたりすることができます。要素の親要素や子要素の探索や、書き換え、追加などを駆使したアプリです。

本セクションで作るアプリ「アウトライン メモ」
00:51

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

jQuery を使って、Webページ内の要素の文字の取得、書き換えができるようになります。 動的なWebページを作れるようになります。

要素内の文字の取得、書き換え
01:10

jQuery を使って、Webページ内の要素の HTML の取得、書き換えができるようになります。 動的なWebページを作れるようになります。

要素内の HTML の取得、書き換え
02:49

jQuery を使って、Webページ内の要素の属性の取得、書き換えができるようになります。

要素の属性の取得、書き換え
01:12

jQuery を使って、Webページ内の要素の CSS の取得、書き換えができるようになります。UI部品の見た目を変更できます。

要素の CSS の取得、書き換え
01:00

jQuery を使って、Web ページのタイトル取得、書き換えができるようになります。

Web ページのタイトルを取得、書き換え
01:07

jQueryで 要素を作り、末尾/先頭に追加できるようになります。Web ページ内のコンテンツを追加していけます。

jQuery で要素を作り、末尾に追加
02:09

要素の絞りこみについて学びます。操作対象のDOM要素が多い場合に、条件を指定して絞りこみます。

要素の絞りこみ
01:04

子要素を探す方法について学びます。「何かの中にある何か」を選択できるようになります。

子要素を探す
02:27

親要素を探す方法について学びます。「何かの上位階層にある何か」を選択できるようになります。

親要素を探す
01:45

実際にアプリを作成します。「アウトライン メモ」を作ります。その1。ユーザーの操作によって、Web ページの要素を動的に追加するアプリを、作れるようになります。

「アウトライン メモ」を作る1
03:24

(前回の続き)実際にアプリを作成します。「アウトライン メモ」を作ります。その2。ユーザーの操作によって、Web ページの要素を動的に追加するアプリを、作れるようになります。

「アウトライン メモ」を作る2
04:11
+
第7章 条件分岐
11 Lectures 25:37

三択問題を数問解答し、その正答率によって、結果表示を分岐するアプリです。条件によって、処理を変えるアプリのサンプルになります。 そのまま、クイズアプリにもできます。

本セクションで作るアプリ「三択問題 Web アプリ」
00:43

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

条件分岐をおこなう if 文について学びます。「AならBの処理」といった処理の分岐ができるようになります。

if 文1
02:30

if else 文についても学びます。「AならBの処理」「AでないならCの処理」といった処理の分岐ができるようになります。

if 文2
01:43

さらに複雑なif else 文についても学びます。else に続けて、if 文の処理を行います。

if 文3
01:43

if 文の波括弧を省略できるようになります。

波括弧の省略
01:31

チェックボックスのオンオフで、表示を切り替えられるようになります。また、jQuery の show と hide について学びます。要素を表示したり、隠したりできるようになります。

チェックボックスで、表示を切り替え
02:46

条件を判定するための、比較演算子を学びます。その1。同じ値か否かで、true や false を得られるようになります。

比較演算子1
03:32

条件を判定するための、比較演算子を学びます。その2。数字が大きいか、小さいかによって、true や false を得られるようになります。

比較演算子2
01:10

switch case 文について学びます。 値による処理の分岐の、もう1つの書き方を使えるようになります。

switch case 文
02:49

実際にアプリを作成します。「三択問題 Web アプリ」を作ります。正答数で表示を切り替えます。ユーザーの操作によって、結果表示を切り替えられるようになります。

「三択問題 Web アプリ」を作る
06:59
+
第8章 関数
10 Lectures 27:08

マウスオーバーで、説明が表示される、字の説明を行う「字典」のアプリです。無名関数を、イベントに登録するサンプルになっています。

本セクションで作るアプリ「字典 Web アプリ」
00:37

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

関数を利用して処理をまとめます。長くなったプログラムを、上手く整理できるようになります。名前付きの関数と、無名関数について学びます。

処理をまとめる
03:17

変数のスコープについて学びます。その1。バグを出さないために、知っておかないといけない知識です。

変数のスコープ1
04:17

変数のスコープについて学びます。その2。また、無名関数を即時実行する方法を学びます。一時的にローカル変数を使いたい時に役立つ書き方です。

変数のスコープ2
02:06

関数の書き方のバリエーションです。引数を取る関数を作ります。

引数を取る
02:09

関数の書き方のバリエーションです。戻り値を持つ関数を作ります。

戻り値を持つ
03:27

関数の基本構造を学びます。 関数の基本的な知識の紹介です。

関数の基本構造
03:16

実際にアプリを作成します。その1。「字典 Web アプリ」を作ります。マウスを載せた際に、関数を呼び出し、処理をおこなえるようになります。

「字典 Web アプリ」を作る1
04:17

実際にアプリを作成します。その2。「字典 Web アプリ」を作ります。マウスを載せた際に、関数を呼び出し、処理をおこなえるようになります。

「字典 Web アプリ」を作る2
03:31
+
第9章 配列
8 Lectures 27:18

ソート機能付きで、表を表示するアプリです。テーブルの内容を配列として扱い、自前のルールで並べ替える処理を実現しています。統計表示アプリなどに、応用できるでしょう。

本セクションで作るアプリ「テーブル ソート Web アプリ」
00:54

このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。

ソースコードのダウンロード
00:11

配列とは何かを学びます。 配列を使えば、名簿などのリスト状のデータを、短いプログラムで扱えるようになります。

配列とは
01:14

配列の作り方、その1です。また、配列の要素を取得、書き換えられるようになります。さらに、配列の長さを得る方法も学びます。

配列の作り方1 Array
04:59

配列の作り方、その2です。短く書く方法を紹介します。また、文字列を、指定文字で分断して作る方法も紹介します。「北海道,東京,沖縄」のような文字列を、「北海道」「東京」「沖縄」と分けて配列を作れます。

配列の作り方2 角括弧、split
01:49

配列を並び替えます。ばらばらのデータを、名前順に並び替えたりします。また、ソートの仕方を指定して、配列を並び替えます。数値順に並び替える際などに利用します。

ソート
06:14

実際にアプリを作成します。その1。「テーブル ソート Web アプリ」を作ります。Excelのようなテーブルを、名前順や、数値順で、並び方を切り替えられるようになります。

「テーブル ソート Web アプリ」を作る1
05:41

実際にアプリを作成します。その2。「テーブル ソート Web アプリ」を作ります。Excelのようなテーブルを、名前順や、数値順で、並び方を切り替えられるようになります。

「テーブル ソート Web アプリ」を作る2
06:16
9 More Sections
About the Instructor
柳井 政和
4.2 Average rating
294 Reviews
2,770 Students
6 Courses
ゲーム、アプリケーション開発、書籍の執筆、JavaScript、Java

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

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

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

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