We may earn an affiliate commission when you visit our partners.
Course image
柳井 政和

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

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

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

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

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

Read more

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

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

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

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

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

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

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

‥‥‥‥‥‥‥‥‥‥

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

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

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

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

Enroll now

What's inside

Syllabus

本講義の目標や範囲を紹介します。

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

JavaScriptが何であるのかを学習します。

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

Read more

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

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

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

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

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

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

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

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

JavaScriptの1行プログラミングを行えるようになります。

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

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

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

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

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

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

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

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

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

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

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

JavaScriptのプログラムを、テキストファイルに書き、実際にWebページ内で利用できるようになります。

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery を使い、Web ページの基本的操作を行えるようになります。

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

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

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

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

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

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

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

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

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

jQuery を使い、Web ページの表示を書き換えられるようになります。

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

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

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

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

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

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

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

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

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

jQuery を使い、Web ページの表示を書き換えます。

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

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

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

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

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

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

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

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

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

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

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

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

条件分岐や比較演算子について学んでいきます。

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

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

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

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

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

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

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

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

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

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

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

次第に大きくなってきたプログラムを整理する、関数について学びます。プログラムの開発効率が劇的に上がります。

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

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

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

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

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

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

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

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

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

大規模なデータを扱うための配列について説明します。

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

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
指導する柳井 政和氏は、JavaScriptの仕組みとWebアプリケーション開発の基本について深い知識を持っていることで知られています。
このコースは、初心者でも分かりやすいように、基礎からWebアプリケーションの開発までを段階的に学べるよう構成されています。
最新のHTML5の機能(作図、画像フィルター処理、音響・動画の再生など)を扱うため、最先端の開発技術を身につけられます。
ブラウザ上で動作するアプリケーションの開発を、実際のコードを書きながら学べるため、実践的なスキルが身につきます。
サンプルコードがダウンロードできるため、開発をスムーズに進められます。
基礎から応用まで幅広く学べるため、JavaScriptの基本を体系的に理解できます。

Save this course

Save 実例でわかる JavaScript 初心者講座 to your list so you can find it easily later:
Save

Reviews summary

初心者向け javascript の実践例講座

受講生によると、このコースは、jQuery に重点を置いた実践的な JavaScript 入門講座です。
このコースは、jQuery に重点を置いているため、JavaScript の一般的なトピックは十分にカバーされていません。
"Javascriptの講座だと思って受けたら、jQueryばかりだったのは残念です。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 実例でわかる JavaScript 初心者講座 with these activities:
Read a textbook
This book is a great resource for learning JavaScript. It covers the basics of the language in a clear and concise way.
Show steps
  • Read the book from cover to cover.
  • Take notes as you read.
  • Complete the exercises at the end of each chapter.
Review tax calculations
This course will make use of tax calculations in many contexts. Completing this activity will help you gain familiarity with tax calculations.
Show steps
  • Review the basics of tax calculations.
  • Identify the types of taxes used in applications.
  • Calculate taxes for different scenarios.
Organize your course materials
Keeping your course materials organized will help you stay on track and learn more effectively.
Show steps
  • Create a system for organizing your notes, assignments, and other course materials.
  • Review your materials regularly.
Six other activities
Expand to see all activities and additional details
Show all nine activities
Watch video tutorials
This course is self-paced, so you can go at your own speed. If you get stuck, there are many helpful video tutorials available online.
Show steps
  • Search for video tutorials on the topic you are learning.
  • Choose tutorials that are clear and easy to understand.
  • Watch the tutorials and take notes.
Join a study group
This course is a great opportunity to learn from your peers. Joining a study group will allow you to collaborate with others and learn from their experiences.
Show steps
  • Find a study group that meets your needs.
  • Attend study group meetings regularly.
  • Participate in discussions.
  • Help other members of the group.
Complete programming exercises
Understanding code is one thing, writing it is another. This activity will help you practice writing code to reinforce what you are learning.
Show steps
  • Find programming exercises online.
  • Choose exercises that are at your current skill level.
  • Solve the exercises.
  • Review your solutions.
Create a web app
This course will help you develop the skills to create web apps. By building your own, you will get hands-on experience with all aspects of web development.
Show steps
  • Choose a simple web app idea.
  • Design the user interface.
  • Write the code.
  • Test the web app.
  • Deploy the web app.
Attend an online workshop
Online workshops are a great way to learn from experts and get hands-on experience. There are many different online workshops available, so you can find one that fits your needs.
Show steps
  • Find an online workshop that you are interested in.
  • Register for the workshop.
  • Attend the workshop.
  • Participate in the workshop activities.
Contribute to an open source project
Open source projects are a great way to learn new skills and contribute to the community. By contributing to an open source project, you will get hands-on experience with real-world code.
Show steps
  • Find an open source project that you are interested in.
  • Read the project documentation.
  • Make a small contribution to the project.
  • Get your contribution reviewed and merged.

Career center

Learners who complete 実例でわかる JavaScript 初心者講座 will develop knowledge and skills that may be useful to these careers:
Mobile Developer
The course teaches learners how to use JavaScript to build web applications that can run on multiple devices, such as smartphones and tablets. As a Mobile Developer, you will use your knowledge of JavaScript to create and manage mobile applications. This course can help you build a foundation in the fundamentals of programming and mobile development, which can be essential for success in the field of Mobile Development.
Front-End Developer
The course teaches learners how to use JavaScript, HTML, and CSS to create and manage web applications. As a Front-End Developer, you will use your knowledge of JavaScript to create and manage the user interface of websites and applications. This course can help you build a foundation in JavaScript, HTML, and CSS, which can be essential for success in the field of Front-End Development.
Web Developer
This course teaches learners how to build web applications using JavaScript and the latest HTML5 features. As a Web Developer, you will use your knowledge of JavaScript to create and manage interactive and responsive websites and applications. This course can help you build a foundation in the fundamentals of programming and web development, which can be essential for success in the field of Web Development.
Full-Stack Developer
The course teaches learners how to build web applications using JavaScript and the latest HTML5 features. As a Full-Stack Developer, you will use your knowledge of JavaScript to create and manage both the front-end and back-end of websites and applications. This course can help you build a foundation in the fundamentals of programming and web development, which can be essential for success in the field of Full-Stack Development.
Web Designer
The course teaches learners how to use JavaScript, HTML, and CSS to create and manage web applications. As a Web Designer, you will use your knowledge of JavaScript to create and manage the visual design of websites and applications. This course can help you build a foundation in JavaScript, HTML, and CSS, which can be essential for success in the field of Web Design.
Software Engineer
The course teaches learners the fundamentals of programming and web development, as well as the latest HTML5 features. As a Software Engineer, you will use your knowledge of JavaScript to design, develop, and maintain software systems. This course can help you build a foundation in the fundamentals of programming and software engineering, which can be essential for success in the field of Software Engineering.
UI/UX Designer
The course teaches learners how to use JavaScript, HTML, and CSS to create and manage web applications. As a UI/UX Designer, you will use your knowledge of JavaScript to create and manage the user experience of websites and applications. This course can help you build a foundation in JavaScript, HTML, and CSS, which can be essential for success in the field of UI/UX Design.
Teacher
The course teaches learners the fundamentals of programming and computer science. As a Teacher, you will use your knowledge of JavaScript to teach students about the fundamentals of programming and computer science. This course can help you build a foundation in the fundamentals of programming and computer science education, which can be essential for success in the field of Teaching.
Computer Scientist
The course teaches learners the fundamentals of programming and computer science. As a Computer Scientist, you will use your knowledge of JavaScript to design, develop, and analyze algorithms and software systems. This course can help you build a foundation in the fundamentals of programming and computer science, which can be essential for success in the field of Computer Science.
Business Analyst
The course teaches learners the fundamentals of programming and business analysis. As a Business Analyst, you will use your knowledge of JavaScript to analyze business processes and systems to help businesses improve their efficiency and effectiveness. This course can help you build a foundation in the fundamentals of programming and business analysis, which can be essential for success in the field of Business Analysis.
Data Analyst
The course teaches learners the fundamentals of programming and data analysis. As a Data Analyst, you will use your knowledge of JavaScript to collect, analyze, and interpret data to help businesses make informed decisions. This course can help you build a foundation in the fundamentals of programming and data analysis, which can be essential for success in the field of Data Analysis.
Product Manager
The course teaches learners the fundamentals of programming and product management. As a Product Manager, you will use your knowledge of JavaScript to develop and manage products that meet the needs of customers. This course can help you build a foundation in the fundamentals of programming and product management, which can be essential for success in the field of Product Management.
Project Manager
The course teaches learners the fundamentals of programming and project management. As a Project Manager, you will use your knowledge of JavaScript to plan, execute, and control projects. This course can help you build a foundation in the fundamentals of programming and project management, which can be essential for success in the field of Project Management.
Technical Writer
The course teaches learners how to write clear and concise technical documentation. As a Technical Writer, you will use your knowledge of JavaScript to create and maintain technical documentation for software and other products. This course can help you build a foundation in the fundamentals of technical writing and documentation, which can be essential for success in the field of Technical Writing.
Software Developer
The course teaches learners the fundamentals of programming and software development. As a Software Developer, you will use your knowledge of JavaScript to design, develop, and maintain software systems. This course can help you build a foundation in the fundamentals of programming and software development, which can be essential for success in the field of Software Development.

Reading list

We've selected ten books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in 実例でわかる JavaScript 初心者講座.
Focuses on the 'good parts' of JavaScript, providing a concise and practical guide to the language's core features. It valuable reference for understanding JavaScript's quirks and best practices.
Focuses on the 'good parts' of JavaScript, providing a concise and practical guide to the language's core features. It valuable reference for understanding JavaScript's quirks and best practices.
Provides a comprehensive and beginner-friendly introduction to JavaScript, covering both the basics and advanced concepts. It great resource for building a strong foundation in the language.
Uses a visual and interactive approach to teach JavaScript, making it a great resource for those who prefer a more hands-on learning experience.
This comprehensive guide to JavaScript provides in-depth coverage of the language, including advanced topics such as functional programming and asynchronous programming. It valuable reference for experienced JavaScript developers.
Provides a collection of advanced JavaScript techniques and patterns, covering topics such as closures, prototypes, and design patterns. It valuable resource for experienced JavaScript developers who want to improve their skills.
Provides a collection of reusable JavaScript patterns that can be used to solve common problems in web development. It valuable resource for experienced JavaScript developers who want to improve the efficiency and quality of their code.
Provides a deep dive into the internals of JavaScript, explaining how the language works under the hood. It valuable resource for experienced JavaScript developers who want to gain a deeper understanding of the language.
Provides a collection of advanced JavaScript techniques and best practices, written by one of the creators of JavaScript. It valuable resource for experienced JavaScript developers who want to learn from the experts.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to 実例でわかる JavaScript 初心者講座.
知識ゼロからいきなり絵が上達する!絵画基礎マスタークラス
Most relevant
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
Most relevant
ChatGPTとWhisperではじめるPythonローコード開発入門
Most relevant
世界を変えるボンバスティックなPhotoshop講座
Most relevant
GPTsで対話型AIを作ろう! -対話形式、ノーコードで構築するカスタムChatGPT-
Most relevant
ChatGPTのAPIで5つのアプリを作ってみよう!JSON生成、属性抽出、独自文書Q&A、SQL生成、AIエージェ...
Most relevant
AIパーフェクトマスター講座 -Google Colaboratoryで隅々まで学ぶ実用的な人工知能/機械学習-
Most relevant
発酵食「麹甘酒」と「塩麹」を手作りする実践講座です! ★発酵食パワーを実感しましょう★
Most relevant
【世界で70万人が受講】Web Developer Bootcamp 2023(日本語版)
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser