JavaScript基本実践課題

/ コラム / By
今日の実践学習｜JavaScript基礎

保存だけして、行動しない人へ。

InstagramやXで投稿を保存して、
見返しているのに、何も実践していない人は、
今日だけは最後まで読んでください。

保存だけして行動しない人へ

Instagramで勉強法を保存する。
Xで有益投稿をブックマークする。
YouTubeで学習動画を見る。

それ自体は悪くありません。

でも、問題はその後です。

保存だけして、行動に移していない。

見返しているのに、コードを書いていない。
知識は増えた気がするのに、作れるものは増えていない。

そして、いざ行動が必要なタイミングになると、
こんな言葉が出てきます。

  • 忙しい
  • 時間がない
  • お金がない
  • 余裕がない
  • 今じゃない
  • 自分に合っているか分からない

もちろん、全部本当かもしれません。

仕事が忙しい日もある。
疲れている日もある。
お金に余裕がない時期もある。

でも、厳しいことを言うと、
その言葉を並べている間に、
半年後の自分は何も変わっていません。

一度、行動から逃げると、次も逃げやすくなります。

今日逃げる。
明日も逃げる。
来週も逃げる。
そして気づいたら、「勉強したい人」のまま時間だけが過ぎます。

だから今日は、あえて言います。

逃げることを、そろそろやめませんか？

完璧じゃなくていい。
30分だけでいい。
今日は、1つだけコードを書いてください。

今日やること

今日の実践学習は、
JavaScriptの基本です。

JavaScriptは、Webページに動きをつけるための言語です。

HTMLは、ページの骨組み。
CSSは、見た目のデザイン。
JavaScriptは、ページを動かす役割です。

例えるなら、こうです。

HTML：人間の骨格
CSS：服や髪型
JavaScript：動きや反応

JavaScriptでできること

JavaScriptを使うと、たとえばこんなことができます。

  • 1ボタンを押したら文字を変える
  • 2画像を切り替える
  • 3メニューを開閉する
  • 4入力フォームをチェックする
  • 5スクロールに合わせてアニメーションする

つまり、JavaScriptは、
ユーザーの操作に反応するための言語です。

まず覚えるのは3つだけ

JavaScript初心者が最初に覚えるべきことは、
いきなり難しい文法ではありません。

まずはこの3つです。

  • 1文字を表示する
  • 2変数に入れる
  • 3条件で処理を分ける

今日のゴール

JavaScriptを完璧に理解することではありません。
「自分で1行でも書いた」という状態を作ることです。

① 文字を表示する

まずは、JavaScriptで文字を表示します。

使うのは console.log です。

script.js
console.log("今日からJavaScriptを始めます");

これは、開発者ツールのコンソールに文字を表示するコードです。

ポイント

console.logは、JavaScriptの動作確認によく使います。
最初は「画面に出す」よりも、「ちゃんと動いているか確認する」ために使うと考えてください。

② 変数に入れる

次に、変数です。

変数とは、データを入れておく箱のようなものです。

script.js
const name = "ケイ";

console.log(name);

このコードでは、name という箱に、
「ケイ」という文字を入れています。

そして、console.logで中身を表示しています。

変数は、あとで使うためのメモです。

名前、年齢、金額、点数、ボタンの状態など、
いろいろな情報を入れておけます。

③ 条件で処理を分ける

次は、条件分岐です。

条件分岐とは、
「もし〇〇なら、こうする」
という処理です。

script.js
const isStudy = true;

if (isStudy) {
  console.log("今日は行動できています");
} else {
  console.log("今日も保存だけで終わっています");
}

isStudy が true の時は、
「今日は行動できています」と表示されます。

false の時は、
「今日も保存だけで終わっています」と表示されます。

今日のあなたは、どっちですか？

保存だけで終わる人ですか？
それとも、1行でもコードを書く人ですか？

今日の実践課題

ここまで読んだら、今日の課題をやってください。

やることは簡単です。

  • 1HTMLファイルを作る
  • 2script.jsを作る
  • 3JavaScriptを読み込む
  • 4console.logを書く
  • 5ブラウザで確認する

HTMLファイルを書く

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript練習</title>
</head>
<body>

  <h1>JavaScriptの練習</h1>
  <p>今日から行動を始めます。</p>

  <script src="script.js"></script>
</body>
</html>

JavaScriptファイルを書く

script.js
const message = "保存だけで終わらせない";

console.log(message);

const isAction = true;

if (isAction) {
  console.log("今日は1歩進みました");
} else {
  console.log("今日も行動できませんでした");
}

これでOKです。

難しいアプリを作る必要はありません。
まずは、JavaScriptを書いて、動かすこと。

今日、1行でも書いた人は前に進んでいます。

保存だけで終わった人とは、もう違います。
小さくても、行動した事実が残ります。

今日のまとめ

  • 保存だけではスキルは増えない
  • 行動しない言い訳は、次の言い訳を生む
  • JavaScriptはWebページに動きをつける言語
  • 最初はconsole.log、変数、条件分岐だけでOK
  • 今日1行でもコードを書けば、保存だけの人から抜け出せる

逃げることをやめる日は、派手な日じゃなくていい。

今日、script.jsを1つ作る。
それだけで、昨日までの自分とは少し違います。

今日の課題ができた人へ

このLINEに
「JS」
と送ってください。

明日は、JavaScriptで
「ボタンを押したら文字が変わる」
実践課題を送ります。

LINEで「JS」と送る