HTMLとCSSはできて、ホームページもそこそこ作れるようになったけど、「Javascriptは苦手」という人はちょくちょくいます。
これは、全然恥ずかしい事ではなく、HTMLとCSSはよくセットで扱われて、Javascriptは全く別物なので、基本から学習していけばいいんです。
ということで、今回は初心者向けのJavascript学習を進めていきたいと思います。
Javascriptとは
Javascriptは、ホームページに「動き」や「処理」を追加するためのプログラミング言語です。 HTMLは「構造」、CSSは「見た目」を担当していましたが、Javascriptは「動作」を担当します。 例えば、- ボタンを押したらメニューを開く - 画像をスライド表示する - 入力チェックをする - 画面を書き換える - 通信してデータを取得するこういった機能はJavascriptで実装されます。
初心者向けJavascript学習のおすすめ順番
Javascriptは、最初から難しい内容に入ると挫折しやすいので、「ホームページ制作でよく使う機能」から覚えるのがおすすめです。 特に、以下の順番で学ぶと理解しやすいです。1. まずは「変数」と「関数」を覚える
Javascriptでは、値を保存したり、処理をまとめたりします。 最初は以下のような内容だけで十分です。- 変数 （文字列、 数字） - 配列 - 関数 - if文サンプルコードとしては、以下のコードでOKです。
javascript
const message = "こんにちは";
function showMessage(){
alert(message);
}
showMessage();
変数
const message = "こんにちは";
この部分が変数です。
"message" という器（変数）に、"こんにちは" という文字列を入れているコードになります。
そして、変数を使うには以下のようなルールがあります。
変数で使用可能な文字
- 半角英字（a-z, A-Z） - 半角数字（0-9） - アンダースコア（_） - ドル記号（$） - Unicode文字（漢字、ひらがな等も技術的には可能だが、バグの元になるため非推奨）使えない文字
- 空白（スペース） - ハイフン（-） - 記号（!, @, #, %, &, *, +など）ルール
- 先頭に数字は不可: 1 - dataはNG、data1はOK - 大文字・小文字は別物: userNameとusernameは別の変数 - 予約語（キーワード）は使用不可: var, if, for, let, class, functionなど
2. HTMLをJavascriptで操作する（DOM操作）
ホームページ制作で最も重要なのが、この「DOM操作」です。 「ボタンを押したら文字を変える」、「メニューを開く」など、実践的な処理のほとんどがここにあります。 例えば、document.getElementById("title").innerText = "タイトル変更";
のような処理です。
この辺りを理解すると、一気に「Javascriptでホームページを動かしてる感」が出てきます。
配列
配列は、複数のデータをまとめて管理するための機能です。
例えば、名前を複数保存したい場合などに使います。
javascript
const fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits[0]);
[ 1 , 2 , 3 ] のように、[...]で囲った中の値（変数も使えます）を詰め込んだものが配列です。
配列は「0」から数え始めるので、fruits[0] は「りんご」になります。
関数
関数は、処理をまとめて再利用するための機能です。
同じ処理を何回も書かなくて済むので、とても便利です。
function hello(){
alert("こんにちは");
}
hello();
この場合、hello() を実行すると、「こんにちわ」というメッセージが表示されます。
関数は、無限の使い方ができるため、無限に書き方が存在します。
構造だけ理解すれば、他人の書いたコードが読めるようになるでしょう。
if文
if文は、「もし○○だったら」という条件分岐をするための機能です。
const score = 80;
if(score >= 60){
alert("合格");
}
この場合、score が60以上なら、「合格」と表示されます。
ホームページ制作では、
- ログインしているか
- 入力されているか
- メニューが開いているか
などの判定によく使われます。
3. イベント処理を覚える
Javascriptは「何かが起きた時」に動くことが多いです。 例えば、以下のような場合がイベントです。- クリックした時 - スクロールした時 - 入力した時 - ページを開いた時この「イベント」は、Javascript初心者の最重要ポイントの1つです。
4. 実際によく使うUIを作る
文法ばかり学ぶより、実際に動くものを作ると理解がかなり進みます。 初心者におすすめなのは、- ハンバーガーメニュー - タブ切り替え - アコーディオン - モーダルウィンドウ - スライドショー - ダークモード切り替えこの辺りです。 「ホームページ制作でよく見る動き」を再現すると、かなり実践力が付きます。
5. fetchでデータ通信をしてみる
少し慣れてきたら、API通信にも挑戦してみましょう。 最近のWebサイトは、裏でデータ通信している事がかなり多いです。 例えば、- 天気情報取得 - 検索候補表示 - 非同期読み込み - JSON取得などです。 サンプル
<div id="weather">読み込み中...</div>
<button id="weather_button">天気予報の取得</button>
<script>
document.getElementById("weather_button").onclick = function(){
fetch("https://wttr.in/Tokyo?format=j1")
.then(response => response.json())
.then(data => {
const weather = data.current_condition[0].weatherDesc[0].value;
document.getElementById("weather").innerText = "現在の天気 : " + weather;
});
}
デモ
読み込み中...
0 件のコメント:
コメントを投稿