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

プログラミングの基礎から学び、JavaScriptでWebアプリ(ブラウザ上で動くアプリ)を作ろう!
4.3 (107 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.
1,435 students enrolled
$19
$85
78% off
Take This Course
  • Lectures 179
  • Length 8.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 Japanese

Course Description

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

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

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

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

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

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

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

‥‥‥‥‥‥‥‥‥‥

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

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


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

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

What are the requirements?

  • 事前の準備は特に必要ありません。
  • 表示確認用のWebブラウザとして、Google Chromeを使います。

What am I going to get from this course?

  • JavaScriptの基本の習得。
  • 変数、条件分岐、ループ処理、配列など、プログラミングの基本の理解。
  • HTML、CSS、JavaScriptを利用した、ブラウザ上で動くアプリケーションの作成。
  • HTML5の機能を利用した、画像処理や音声、動画の再生。

What is the target audience?

  • プログラミング未経験者や初心者。
  • 過去にプログラミングの勉強をしたことがあるが挫折した人。
  • JavaScriptについて知識がない人。
  • 手軽にアプリを作ってみたい人。

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: イントロダクション
01:47

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

Section 2: 第1章 JavaScriptの基本1
01:10

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

00:51

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

01:51

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

01:44

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

02:53

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

01:50

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

01:42

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

01:14

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

00:35

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

Section 3: 第2章 とりあえず書いてみる
01:32

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

02:56

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

02:47

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

02:50

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

01:02

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

02:59

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

05:56

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

04:08

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

02:14

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

05:40

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

03:30

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

Section 4: 第3章 テキストファイルに書いてみる
00:11

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

01:41

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

04:29

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

04:26

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

02:46

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

05:38

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

01:25

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

03:38

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

02:31

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

01:45

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

01:35

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

02:36

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

08:12

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

Section 5: 第4章 jQuery
00:53

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

00:11

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

02:09

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

04:34

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

02:20

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

04:12

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

04:27

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

01:52

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

02:58

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

04:34

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

Section 6: 第5章 その他のフォーム部品
02:06

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

00:11

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

05:24

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

01:44

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

02:33

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

02:47

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

02:09

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

04:32

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

06:31

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

03:52

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

Section 7: 第6章 Web ページを書き換える
00:51

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

00:11

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

01:10

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

02:49

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

01:12

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

01:00

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

01:07

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

02:09

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

01:04

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

02:27

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

01:45

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

03:24

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

04:11

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

Section 8: 第7章 条件分岐
00:43

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

00:11

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

02:30

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

01:43

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

01:43

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

01:31

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

02:46

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

03:32

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

01:10

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

02:49

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

06:59

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

Section 9: 第8章 関数
00:37

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

00:11

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

03:17

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

04:17

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

02:06

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

02:09

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

03:27

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

03:16

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

04:17

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

03:31

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

Section 10: 第9章 配列
00:54

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

00:11

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

柳井 政和, ゲーム、アプリケーション開発 書籍の執筆 Java JavaScript

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

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

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

Ready to start learning?
Take This Course