STEP 01
JavaScript基礎
変数、条件分岐、繰り返し、配列、関数などを使い、JavaScriptで処理を書くための基本を順番に学びます。
JavaScript基礎から始める
JAVASCRIPT COURSE
画面に動きと、
使いやすい反応を加える。
JavaScriptは、ボタンをクリックしたときに表示を変えたり、入力内容を確認したりするなど、Webページに動きや反応を加えるための言語です。基本文法からDOM操作、イベント、実践的な機能まで段階的に学びます。
JavaScriptが初めてでも大丈夫です。短いコードを書き、ブラウザで結果を確認しながら、少しずつ処理の流れに慣れていきます。
COURSE MAP
基礎、DOM、実践から、プログラムと表現へ
現在はJavaScript基礎、DOM、実践を公開しています。今後はプログラム制作、GSAPによるアニメーション、Three.jsによる3D表現へ学習範囲を広げます。
STEP 02
JavaScriptとDOM
HTMLで作ったボタンや文章をJavaScriptから見つけ、クリックや入力に合わせて内容や表示を変更する方法を学びます。
JavaScriptとDOMを見るSTEP 03
JavaScript実践
メニュー、スクロール演出、スライダー、パララックスなど、実際のWebページでよく使う機能を作ります。
JavaScript実践を見るSTEP 04
COMING SOON
JavaScriptプログラム制作
クイズ・ゲーム・Webアプリを作り、処理を組み立てる
準備中STEP 05
COMING SOON
GSAP・アニメーション
タイムラインやスクロール連動を使い、本格的な演出を作る
準備中STEP 06
COMING SOON
Three.js・3D表現
3Dオブジェクト・カメラ・光・パーティクルを使い、立体的なWeb表現を作る
準備中WHAT YOU WILL LEARN
この講座で学べること
JavaScriptの文法を覚えるだけでなく、どのタイミングで何を実行するのかを考え、利用者の操作に反応する画面を作る力を身につけます。
値を変数へ保存する
文字や数値などのデータへ名前を付け、後の処理で繰り返し使えるようにします。
条件によって処理を変える
入力内容や数値などを確認し、条件に合う場合と合わない場合で処理を切り替えます。
繰り返しと関数で整理する
同じ処理を繰り返したり、まとまりのある処理へ名前を付けたりして、読みやすいコードを作ります。
HTML要素を操作する
DOMを使って、HTML内の文章、画像、属性、クラス、表示状態などをJavaScriptから変更します。
クリックや入力に反応させる
ボタンのクリックやフォーム入力などをきっかけに、必要な処理を実行します。
Webページで使う機能を作る
メニュー、モーダル、表示の切り替え、アニメーション、入力チェックなどを実装します。
LEARNING FLOW
学習の流れ
短いコードを書いて結果を確認し、基本文法に慣れてから、HTML要素の操作と実践的な機能へ進みます。うまく動かない場合は、エラー表示や処理の途中経過を確認しながら修正します。
-
01
基本文法を学ぶ
変数、演算子、条件分岐、繰り返し、配列、関数を使い、簡単な処理を書きます。
-
02
結果をブラウザで確認する
console.log()やブラウザの開発者ツールを使い、値やエラーを確認しながらコードの動きを確かめます。
-
03
HTML要素と操作をつなぐ
操作したいHTML要素を取得し、クリックや入力に応じて文章、クラス、表示状態を変更します。
-
04
実際の機能へ組み立てる
メニュー、モーダル、アニメーション、フォームの入力確認などを、一つずつ組み合わせて作ります。
BENEFITS
JavaScriptを学ぶメリット
利用者の操作と画面の変化をコードでつなげられるようになると、見るだけのページから、操作できるWebページやアプリへ発展させられます。
操作に反応する画面を作れる
クリック、入力、スクロールなどに合わせて、文章や画像の表示を切り替えられます。
ページを再読み込みせずに表示を変えられる
HTMLの文章やクラスをその場で変更し、必要な情報をすぐに表示できます。
入力ミスを分かりやすく案内できる
フォームの未入力や入力形式を確認し、送信する前に利用者へメッセージを表示できます。
Webアプリ制作へ進みやすくなる
DOMとイベントの理解を土台に、データ取得、API連携、より複雑な画面処理へ学習を広げられます。
RECOMMENDED FOR
こんな方におすすめ
- HTML・CSSを学び、次に画面へ動きを加えたい方
- JavaScriptを変数や条件分岐から学びたい方
- コードを書いても何が起きているのか分かりにくい方
- DOMやイベントという言葉を基礎から理解したい方
- メニューやモーダルを自分で作りたい方
- フォームの入力チェックを実装したい方
- ブラウザのエラー表示を確認できるようになりたい方
- フロントエンドやWebアプリ制作へ進みたい方
NEXT COURSES
画面の反応を、次の制作へつなげる
JavaScriptで画面へ動きや反応を加えられるようになったら、PHPによるフォーム処理や、HTML・CSS・JavaScriptを組み合わせたフロントエンド制作へ学習を広げます。
