Skip to content

Latest commit

 

History

History
175 lines (147 loc) · 7.58 KB

advanced-js.md

File metadata and controls

175 lines (147 loc) · 7.58 KB
Raw

ページ内に動きをつけよう

ページに動きをつけたいときはJavaScriptを使いましょう

JavaScriptについて

JavaScript(以下JSとする)は主にブラウザ上のウェブサイトでHTMLを操作したりするのに使われています. また、サーバーサイドで使われることもあります. JSの仲間としてTypeScript(TS)もあり、TSはJSに型を付けた言語です. もっと詳しい情報を見る

JSを書いてみる

では実際にJSを書いてみましょう. JSを書くと言っても、新しくファイルを作成する必要はありません。 JSを試す最も簡単な方法はブラウザを使う方法です。

以下はChromeを使ってJSを書く方法です

  1. ブラウザで開いた任意のページ上で右クリックを押す
  2. 検証ボタンを押す
  3. 開発者ツールが開くので開発者ツールの上側にあるConsoleボタンを押す
  4. Consoleが開くので、以下のように入力してください 
    console.log("Hello, world")
  5. Enterキーを押す
  6. Hello, worldと出力されたはずです. おめでとうございます！🥳 ここがJSの入り口です！

もっとJSを乗りこなす

このコンテンツの名前を覚えていますか？
そう、ページ内に動きをつけよう です.
ページに動きをつける = JSを乗りこなす ことによってあなたの作品はもっと素晴らしいものになるでしょう!!

document.body

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に動きをつけていきましょう!!

<script>タグ

first.htmlの<body>の内側に以下の行を追加しましょう

<script type="text/javascript">
    console.log("Hello!!");
</script>

ページを読み込み直すと、ConsoleにはHelloと表示されていると思います
<script>タグはJSを書くときなどに使用します.

buttonと関数

まずはfirst.htmlの<body>の内側に以下の行を追加しましょう

<button onclick="clickEvent()">Click me</button>

次に<script>の内側に次のコードを追加しましょう

function clickEvent() {
    console.log("clicked");
}

この状態でClick meボタンを押すとConsoleにはclickedと表示されるはずです

buttonで要素を追加

やっと動きっぽいことをやります
<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ページには，以下のようなものも大量に含まれます．

  • (高額な)教材・サービスに誘導することを目的としたページ
  • 勘違いしたまま，適切でない情報を示しているページ
  • 過去には正しかったが，昨今のバージョンでは動かない情報を示しているページ

ある程度の経験や知識を有していれば，「これは今求めている情報ではない」と取捨選択ができます．
しかし初学者にとって，玉石混交のインターネットの海から自分が今求めている情報を見つけ出すことは容易いことではありません．

そこで筆者は，初めて扱う技術については書籍を用いて最低限のレベルをクリアすることをおすすめします．
書店の技術書コーナーを見てみてもよいですし，意外と九工大の図書館にも蔵書があります．
ぜひ参考にしてみてくださいね！

例：九工大の蔵書検索で「React」と入力すると...

(自分のレベル感に合ったものなのか，購入前に物理的に一度手にとってパラパラとめくってみることは大変重要です．)

目次に戻る