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

プログラミングの基礎から学び、JavaScriptでWebアプリ(ブラウザ上で動くアプリ)を作ろう!

4.73 (1288 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
実例でわかる JavaScript 初心者講座
8,954
students
8.5 hours
content
May 2020
last update
$19.99
regular price

What you will learn

JavaScriptの基本の習得。

変数、条件分岐、ループ処理、配列など、プログラミングの基本の理解。

HTML、CSS、JavaScriptを利用した、ブラウザ上で動くアプリケーションの作成。

HTML5の機能を利用した、画像処理や音声、動画の再生。

Why take this course?

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

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

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

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

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

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

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

‥‥‥‥‥‥‥‥‥‥

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

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


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

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

Screenshots

実例でわかる JavaScript 初心者講座 - Screenshot_01実例でわかる JavaScript 初心者講座 - Screenshot_02実例でわかる JavaScript 初心者講座 - Screenshot_03実例でわかる JavaScript 初心者講座 - Screenshot_04

Reviews

Masayuki
March 1, 2022
JavaScriptの講座なのにjQueryが突然出てきて、JavaScriptとjQueryがごっちゃになり初心者では混乱してしまう。 既に作成済のコードの解説だけで、何故ここでこのコードが必要なのか意味も含めて解説してほしい。
HIDE
March 6, 2021
初心者向け講座としては少し物足りない内容でしたが、JavaScriptでできることを知るという点では有意義な講義でした。 実際に手を動かしてJavaScriptの動作を学習していく形式ではなく、用意されたコードの解説をしていくというスタイルです。 手を動かして学びたいという方にはおすすめしません。
toshihiro
September 17, 2020
Macを使用しているのですが、nginxを使用してサーバーで起動するとあるのですが、具体的な起動方法が説明されていない為、かなりの時間のかけてググってみても方法がわからず、結局、サーバーでの起動部分の確認が出来ないで状態で終了してしまった。簡単な部分の説明は丁寧だが、難しい部分の説明が簡単に進められている印象を受けました。1章にサンプルが複数ある場合にどのサンプルの部分を説明しているのかわからない為、探さなくてはならないので、どのファイルを説明しているのかわかる様にされた方が良いと感じました。
櫻井道子
May 10, 2020
全体像の説明がなく細かな単元が連続して進むため、今どこまで学習できているのか迷子になる。Chromeコンソールを実習で利用するが基本的な使い方(例えば、一度打った式を編集したい場合等)の説明がなく進むため戸惑った。口頭説明が多いため復習時に使いにくい。画面(パワポ)がもう少し充実しているとありがたい。
M
May 7, 2020
セクション6までやっての感想になります。 ・ハンズオン教育ではありません。 ・JavaScriptというよりはJQueryのソースコード解説という題名の方がしっくりくるのではないかと思います。 ・CSSもbootstrapを利用しています。 ※もろもろ基礎動画を学んでから受講すると有意義になるかと思います。現時点では私の実力不足もあり3.5.
spica
March 16, 2020
初心者には難しいです。各アプリの説明がわかりづらいです。講座・説明と言うより、コードを読んでいるだけのような気がします。 日本語と英語の読み方を間違えていらっしゃるのではないでしょうか。 重複はちょうふく。heightは、はいと。widthは、うぃず。のはずです。
Iwakami
December 30, 2019
スペースを入れるべきところとそうでないところ、変数と関数の違いなど、初心者には見分けが難しいところをもう少し丁寧に話してもらえたらよりいいと思います。$の後に()がつく、つかないの判別も自分でできないなと感じます。
zou
December 19, 2019
JQueryフレームワークを使用したJavaScriptの勉強ではなく、Javascriptのみでの書き方を勉強したかったので、拍子抜けしました。JQueryは学習経験があるので復習のような形になりやや残念です。説明内容もあまり分かりやすいとは言えないといった印象を持ちました。
N
October 8, 2019
しゃべり方は気持ち悪くなく、聞きやすい。 javascriptの初心者講座ではなく、Jqueryの初心者講座であると思いました。 また、ハンズオンではなくソースコードの説明のみであるので、作業の順番(どういう順番でソースを書いていくかなど)がよくわからないと感じた。
t
July 15, 2019
JavaScriptの講座なのにjqueryを使う。「JavaScriptで書く場合は」と説明されればわかるが、説明が無い。ボッタくりに近い。説明中に言葉がつまっておりわかりずらい部分が多々。今まで出てきていないメソッドをセクション毎に使うが、そのメソッドがどうゆう動きをするのか説明もせずに先に進む。話の進め方も自作マニュアルを裏を読んでおり、画面上で説明する際「これをこれにこうやります」などわかりずらい。
渥美勝也
February 22, 2019
JAVAScriptも他言語も文法はほとんど変わらないので、プログラム経験のある自分には詳しい文法の解説は不必要である。。 文法ははじめにコンパクトにまとめて頂き、応用の解説に重点をおいてほしい。。 ○もしくは基礎編と応用でコースを分けてほしい。
輿石洋一
January 4, 2019
「清潔感があった。」って言った?て何のことかわからないでしょうが、授業を進めていくテンポがあって、くじけそうな私を引っ張ってくれました。本当にありがとうございます。  もし会える機会があったら一緒にワインを開けましょう!!
江本匠
June 29, 2018
未経験者でも付いていけるペースで動画が作成されているのでJavascriptを学ぶ最初の教材としてオススメです。 説明も丁寧で実行例も見つつ解説が進むので理解が進みます。 ただ1点残念なのは、最後の通信周りの解説が分かりにくかったことです。
名字名前
May 3, 2018
「JavaScript初心者講座」というタイトルですが、JavaScriptを体系的に学ぶ内容ではありません。 "とにかく動かす事のできるアプリを"というコンセプトのようなのでしょうがないのですが、JavaScript以上にjQuery, HTML5, CSS, Bootstrapを多用しており、どこまでが何の機能なのか初心者には判らないのでは?(一応、一言だけ「○○の機能です」という補足は入りますが) 特に役目を終えそうなjQueryが中心になっているのでこれを見てJavaScriptに入門するというのには向かないでしょう。 言語仕様の説明はほぼ全て基本形のみで不完全です。 逆に、ストップウォッチとか動画再生などTips集としてならいいんじゃないでしょうか。
April 6, 2018
事前に用意されたコードをそのまま読んで説明している感じです。 なぜこのコードがここに使われているのかなど、意味を解説する部分が足りないと感じました。 時間制限など色々事情はあるとは思いますが、部分的に直接コードを入力しながら解説して頂いたら、もっと分かりやすくなると思います。 コードのサンプルの提供は、良かったと思います。

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

654658
udemy ID
10/29/2015
course created date
11/16/2019
course indexed date
Bot
course submited by