ページに動きをつけたいときはJavaScriptを使いましょう
JavaScript
(以下JS
とする)は主にブラウザ上のウェブサイトでHTM
Lを操作したりするのに使われています.
また、サーバーサイドで使われることもあります.
JS
の仲間としてTypeScript
(TS
)もあり、TS
はJS
に型を付けた言語です.
もっと詳しい情報を見る
では実際にJSを書いてみましょう. JSを書くと言っても、新しくファイルを作成する必要はありません。 JSを試す最も簡単な方法はブラウザを使う方法です。
以下はChromeを使ってJSを書く方法です
- ブラウザで開いた任意のページ上で右クリックを押す
検証
ボタンを押す- 開発者ツールが開くので開発者ツールの上側にある
Console
ボタンを押す Console
が開くので、以下のように入力してくださいconsole.log("Hello, world")
Enter
キーを押すHello, world
と出力されたはずです. おめでとうございます!🥳 ここがJSの入り口です!
このコンテンツの名前を覚えていますか?
そう、ページ内に動きをつけよう です.
ページに動きをつける = JSを乗りこなす
ことによってあなたの作品はもっと素晴らしいものになるでしょう!!
const body = document.body;
このときbody
はHTMLの<body>
タグ自体とその中の要素全てを表しています.
const divs = document.querySelectorAll("div");
console.log(divs);
先ほどと同じように開発者ツールを開いて上のコードを実行してみてください.
div
要素の配列が表示されると思います.
もしくは
console.log(divs[0]);
で divs
の一番最初の要素を取得できます.
first.html
をブラウザで開きConsole
に以下をコピペしてください
const body = document.body; // body を定義
const newDiv = document.createElement("div"); // newDiv という名前の新しい div 要素を作る
newDiv.innerText = "This is newDiv"; // newDiv の中のテキストを設定
body.appendChild(newDiv); // body 一番最初の子要素を newDiv にする
newDiv
が追加されているはずです.
先ほどは基本的なJSの操作を学びましたね
ではJSを使ってHTMLに動きをつけていきましょう!!
first.html
の<body>
の内側に以下の行を追加しましょう
<script type="text/javascript">
console.log("Hello!!");
</script>
ページを読み込み直すと、Console
にはHello
と表示されていると思います
<script>
タグはJSを書くときなどに使用します.
まずはfirst.html
の<body>
の内側に以下の行を追加しましょう
<button onclick="clickEvent()">Click me</button>
次に<script>
の内側に次のコードを追加しましょう
function clickEvent() {
console.log("clicked");
}
この状態でClick me
ボタンを押すとConsole
にはclicked
と表示されるはずです
やっと動きっぽいことをやります
<script>
タグ内に以下のコードを追加しましょう
function clickEvent() {
const body = document.body;
const newDiv = document.createElement("div");
newDiv.innerText = "This is newDiv";
body.appendChild(newDiv);
}
Click me
を押してみてください
This is newDiv
という文字列が画面に表示されたはずです.
このようにJSを使うと画面上の文字を表示させることができます.
次は応用例です. コピペして動作を確認してみましょう
let i = 1;
const body = document.body;
function clickEvent() {
if (i == 1) {
createDiv();
i *= -1;
} else {
eraseDiv();
i *= -1;
}
}
function createDiv() {
const newDiv = document.createElement("div");
newDiv.setAttribute("id", "new_div");
newDiv.innerText = "This is newDiv";
body.appendChild(newDiv);
}
function eraseDiv() {
const newDiv = document.getElementById("new_div");
newDiv.remove();
}
アドバンスド講座/モダンなWebページを作ろうでは, CSSフレームワークを用いてCSSの実装を簡略化できることを示しました.
これと同様に,JavaScriptの世界においてもフロントエンドフレームワークを用いることで,より高度なことを簡単に実現できるようになります.
以下に,フロントエンドフレームワークの例を示します. これまでにやってきた内容からすると少し難易度は上がりますが,気になる方はぜひ挑戦してみてください.
(フレームワーク名をクリックすると,それぞれ入門ページへ遷移します.)
上記フレームワークを利用する際,Node.js
がインストールされている前提で話が進むかもしれません.
Node.jsの開発環境を用意しよう!
などを参考に,セットアップしてみてくださいね.
(ひっかかってしまったら,遠慮なく近くのCore-teamメンバーにお声掛けください!)
昨今,こういったWeb領域における技術の興隆は凄まじいものです. この領域を生業とするエンジニアの方が大勢いらっしゃいます. おかげで,初学者向けのコンテンツも充実してきました. トラブルが起きても,検索すればだいたいのことには解決方法が示されます.
しかしながら,こうした解説をするWebページには,以下のようなものも大量に含まれます.
- (高額な)教材・サービスに誘導することを目的としたページ
- 勘違いしたまま,適切でない情報を示しているページ
- 過去には正しかったが,昨今のバージョンでは動かない情報を示しているページ
ある程度の経験や知識を有していれば,「これは今求めている情報ではない」と取捨選択ができます.
しかし初学者にとって,玉石混交のインターネットの海から自分が今求めている情報を見つけ出すことは容易いことではありません.
そこで筆者は,初めて扱う技術については書籍
を用いて最低限のレベルをクリアすることをおすすめします.
書店の技術書コーナーを見てみてもよいですし,意外と九工大の図書館にも蔵書があります.
ぜひ参考にしてみてくださいね!
(自分のレベル感に合ったものなのか,購入前に物理的に一度手にとってパラパラとめくってみることは大変重要です.)