JavaScript入門

未来のプログラマーを育てるための短期集中型・実践型の講座です。プログラミングの世界に一歩を踏み出しましょう！この講座は、本気で学びたい未経験者や初心者のための講座です。もじゃもじゃラボのサイトを構築し、プログラムが動く感動を体験しましょう！

Ratings: 4.54 / 5.00

Description

★本講座は、未経験・初心者の方のためのHTML/CSS/JavaScript入門です

プログラミングを学びたいけど、「何から手をつけて良いかわからない」という方、多いのではないでしょうか？

Java、PHP、Ruby、Python、JavaScript、C#、C++、Kotlin、Swift…などプログラミング言語をあげるとキリがありません。いったい今旬な言語はなんなのか？シェアが高い言語はなんなのか？将来性がある言語はなんなのか？迷うと思います。

何から取り掛かるかは大きな問題ではありません！

関数や制御文といったプログラミングの基本的概念は、言語が変わっても大きくは変わらないからです。何か一つの言語を押さえてしまえば、比較的容易に他の言語の習得に取り組むことが可能です（もちろん、なんでも簡単にできるようになるわけではありません）。

ただ、はじめるにあたって、言語ごとにメリットとデメリットはあります。例えば、いくつかのインストールで環境構築が必要なものは、初学や独学で進めるのは少し難易度が高いです。機械学習をはじめるためにはプログラミング以外にも統計学のような違う知識も必要になってくるかもしれません。

だとしたら、まずは始めるのに敷居の低いものから取り組んでも良いのではないでしょうか。HTML/CSS/JavaScriptはパソコンがあればはじめられます。

本講座は、パソコンを持っていてブラウザとテキストエディタがインストールされていれば、すぐに学習を始めることができます。

また、今後どの分野に進んだとしても、ホームページなどに使われるHTMLやCSSといったWebの知識はあった方が良いでしょう。JavaScriptではプログラミングの基本を学ぶことができます。

★講座の構成

レッスンを始める前に
HTML超入門！押さえておきたいマークアップの基本
CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
HTML/CSS/JavaScriptの組み合わせならではの、Webページに動きをつけるプログラミングを学ぼう！
修了おめでとうございます！

セクション2では前半にHTMLの概念を、後半にHTMLタグの用途を学びサンプルコードを実装していきます。セクション3では前半にCSSの概念を、後半にプロパティの意味と値の指定の仕方を学び、スタイルシートを書いてHTMLを装飾していく方法について学びます。4は、JavaScriptというプログラミング言語を使ってプログラミングの基本的概念を学ぶ、というセクションです。ここで学んだ知識は他のプログラミング言語にも応用可能な基本的概念になります。セクション5では、DOMやイベントといったJavaScriptとHTML/CSSの組み合わせならではのWebページに動きをつける、というプログラミング手法を学びます。

各セクションの終わりにはそこまで学んだことの集大成として演習課題があります。もじゃもじゃラボサイトの構築です。3つの課題はすべてつながった課題となっていて、HTMLの課題でできたものに対してCSSの課題を付け足し、その後にJavaScriptの課題を付け足します。すべての演習課題をこなすと、完結した動きのある1つのWebページが完成します。

★デザイナー（Web制作）とエンジニア（Web開発）の違い

Web系のお仕事での役割を大きく分けると次の2つが挙げられます。

デザイナー（Web制作）
エンジニア（Web開発）

簡単に言うと、前者はホームページ等のブラウザに表示される部分をHTML/CSS/JavaScriptを駆使して構築するお仕事、後者はホームページの見える部分の後ろ側（サーバ上）で動く計算などの処理を他のプログラミング言語で実装するお仕事です。フロントエンド、バックエンドという言い方もあります。

ただ、近年この役割の境界線が曖昧になりつつあります。デザイナーもプログラムを書きますし、エンジニアも見た目を意識することが大事になってきています。どちらもクリエイターという部分で根っこは同じなんです。

本講座では、HTML/CSS/JavaScriptをセットで効率的に学び、HTML/CSSの基礎を通してWebページ作成の仕方を学びます。JavaScriptでは、変数や制御文、関数といった他の言語にも応用できるプログラミングの基本的概念を身につけます。

★変更履歴

2024/02/06 JavaScriptのレッスンにコーディング演習を追加
2024/01/30 「Webページ閲覧の仕組み〜リクエストとレスポンス〜」のレッスン動画を追加
2022/02/20 HTML文書の構造についてのコーディング演習と、グループとセクションを使ったコーディング演習を追加（随時更新予定）
2022/01/24 「タグの種類〜テーブル〜」のサンプルソースコードで使用しているtableタグのborder属性のについて注意点を補足
2022/01/14 「DOM 〜オブジェクトとは〜」のレッスン動画を刷新！
2021/09/01 全レクチャーへの字幕追加作業が完了
2021/08/16 各レクチャーに字幕追加作業を開始
2021/08/13 「本講座のJavaScriptサンプルコードで使っている命令文についての注意点」のレクチャーを追加
2021/07/14 「Visual Studio Codeとサンプルコードを横に並べる方法」の動画を追加
2021/03/23 「【補足】文字コードについて〜UTF-8って〜」のレクチャーをテキストから動画に変更
2021/03/03 「【補足】ボックスモデルの注意点とその対処法」のレッスン動画を追加
2021/02/06 「タグの種類〜埋め込み〜」の動画にvideoタグとaudioタグの補足説明を追加
2021/01/26 「ボックスモデルって何？」にブロックレベル・インライン要素の補足解説動画を追加
2021/01/21 「タグの種類〜メタデータ・セクション〜」のセクションのタグについての解説を見直し
2021/01/10 「タグの種類〜フォント・行〜」のスタイル適用後のイメージを追加
2021/01/06 「タグの種類〜背景〜」のスタイル適用後のイメージを追加
2021/01/05 「タグの種類〜フォーム〜」のチェックボックスとラジオボタンの解説にlabelタグを使った時の効果について解説を追加
2021/01/05 「タグの種類〜HTMLタグを機能的に分類してみた〜」にインタラクティブの動きの解説を追加
2020/12/25 「プログラミング演習問題の答えあわせ（解説）」の動画を追加
2020/12/22 「デザイン演習問題の答えあわせ（解説）」の動画を追加
2020/12/18 「マークアップ演習問題の答えあわせ（解説）」の動画を追加
2020/12/16 「本講座でプログラムを書く前の事前準備」の動画と「素材のダウンロード」動画を追加
2020/12/15 「プログラミングを学ぶ際の心構え」の動画を追加

What You Will Learn!

HTML/CSSの基礎を学び、Webページの作成の仕方を学びます。
JavaScriptの基礎を学び、他の言語にも応用可能なプログラミングの基本的概念を学びます。
遊び心のあるサイトの作り方を学びます。
HTML/CSS/JavaScriptを使ってより実用的なWebサイト（ポートフォリオなど）を作り始めることができます。
サーバーサイドのプログラミング言語と組み合わせて、Webエンジニアにステップアップするための入り口に立つことができます。

Who Should Attend!

プログラミング未経験・初心者の方
IT企業への就職を希望している学生さん
プログラミングを学んでいたが挫折してしまった人
プログラミングの独学に心が折れてしまいそうな方
これからIT企業への転職を希望されている方
副業でプログラミングしたい人
実務で扱っているが根本の理解に不安のある方
プログラミングに興味のある中学生・高校生