概要
JavaScriptは世界でもっとも使われているプログラミング言語の1つであり、近代的なWebページを作成するためには欠かせません。
クリックでHTML要素の色や形を変えたりアニメーションを表示したりなど、JavaScriptはWebページにさまざまな動きをつけることができます。JavaScriptはHTMLやCSSと共に、Webページの表示や動作の処理に使われます。
ユーザーの操作によって動的に変化するWebページが主流となってきたことから、現在JavaScriptは多くのWebページで利用されています。
学ぶ目的
JavaScriptを使ってWebページに動的な表現を取り入れることで、ユーザーに操作した感覚を与えることや、ローディング中の待ち時間を退屈にさせないことが可能になります。このような仕掛けにより、Webページを利用するユーザーに「楽しく・心地よい」体験を提供できます。
また、JavaScriptで作られたフロントエンド用のライブラリやフレームワークも登場しており、代表的なものにReact、Vue、Angularなどがあります。
このように、楽しさや利便性を備えたWebページを作るうえではJavaScriptは欠かせない言語となっています。
Webフロントエンド開発で高機能なWebページを作りたい場合は、JavaScriptを学ぶとよいでしょう。
ここから学ぼう
ここでは、JavaScriptでWebページに動きを付けることを目標に学んでいきましょう。まずは、基本文法を押さえてからDOM操作にチャレンジしてみましょう。
JavaScriptの基本を理解しよう
基本的な構文を覚えよう
FizzBuzzプログラムを作ってみよう
DOMの基本について理解しよう
WebページでJavaScriptを実行してみよう
JavaScriptでHTMLを操作してみよう
JavaScriptでCSSを操作してみよう
イベント処理を作ってみよう
動きのあるWebページを作ってみよう
モーダルを作ってみよう
アコーディオンを作ってみよう
カルーセルを作ってみよう
おすすめ教材
JavaScript 学習レッスン I | Progate
基本的な文法の学習はProgateに用意されています。実際に動かしながら学んでいきましょう。
JavaScript 学習レッスン I | Progate
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
prog-8.com
DOM の紹介 - Web API | MDN
JavaScriptとDOMの関係について説明されています。ドキュメントを読んだ後は実際にJavaScriptを使ってWebページに動きを付けてみましょう。
DOM の紹介 - Web API | MDN
ドキュメントオブジェクトモデル (Document Object Model, DOM) は、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。このガイドでは、簡単に DOM を紹介します。 DOM がどのようにメモリー内で HTML 文書を表現するか、どのように API を使用してウェブコンテンツやアプリケーションを作成するのかを見てみます。
developer.mozilla.org
