はじめに

JavascriptはJavaではありません！！！！！

唐突に叫んだりして申し訳ありませんが、よくプログラミングを始めたばかりの人がJavascriptをJavaと略す人がいます。僕自身メンターとして教えている身なのでそういう人によく会います。Javaと略すのに問題があるのは、Javaという全くもって別の言語があるからです。JavaとJavascriptはオーストリアとオーストラリアぐらい違います。長くて言いにくいと感じる際はJSと略しましょう。

さて、それではJSとはなんでしょう。HTMLとCSS同様、JSはブラウザで動くプログラミング言語です。この特徴からこの３つの言語はよくフロント言語と言われ一緒にされるケースが多いです。他の言語との大きな違いはブラウザで動くかどうかにあります。これによりJSにしかできなくて他の言語ではできないという場面がたくさんあります。なのでWEBデベロッパーにとっては知っておかなくては行けない言語の一つといえましょう。

Javascriptは多目的言語（いろんな事ができる言語）なので他のバックエンドの言語(Ruby, PHP, Python)などと似たような一般的なプログラミング言語として最低限の挙動があります（関数、クラス、ループなど）。ですが今回はJavascriptにしかできない要素の操作を重点的に入門していきたいと思います。なお、本ブログでは仕様の正しさ厳密さよりも実用性のためのわかりやすさを重視して話を進めます。

事前準備

HTMLとCSSの基礎知識
エディタが使える状況
グーグルクローム(推奨)

上記を前提に話を進めていきます。ない方は「WEBサイトを作ろう！HTMLとCSS入門 #1」を確認してください。

要素の取得

「はじめに」でも述べましたが、JSでの大きな特徴はHTMLの要素を操作できることです。要素を操作するためにはまず操作したい要素を取得しなければいけません。それではJSではどのようにしてHTMLから要素をとってくるのでしょうか？早速ですがコードを見ていきましょう。

document.querySelector("取得したい要素");

これで指定したい要素を取得しますが、これをみて様々な疑問が思い上がると思います。

“取得したい要素”とは具体的に何を書けばいいのか
そもそもこのコードはどこに書けばいいのか
documentや、querySelectorとはなにか
どうしてdocumentのあとにドットがあるのか
最後のセミコロンはなにか

もちろんこれらの疑問にはしっかりと解説する予定ですが、プログラミングを勉強する上で大事な心構えがあります。それは全てを理解しようと思わないことです。プログラミングはあくまで何かを実現するためのツールでしかありません。そのツールを使用する上で全てを理解しようとするとキリがありません。なので、たまには「そういうものなのか」という気持ちでコードを書いてみてください。（もちろんある程度、応用が効くぐらいには理解しないといけないですが…）

「”取得したい要素”の指定の仕方」
「このコードはどこに書けばいいのか」
「documentやquerySelectorとは」
「documentのあとのドット」
「最後のセミコロン」
変数

「”取得したい要素”の指定の仕方」

取得した要素をどのように指定すればいいのか。これはかなり大事で良い質問です。

要素の指定で主に使用されるのは「タグの名前、クラス、id」の３つです。

例えば、取ってきたい要素がそのページの唯一の画像だとするとタグの名前「img」と指定してあげるだけで取得できます。他にはクラスが「my-class」という名前でしたら前に「.」をつけて「.my-class」として「my-class」というクラスの要素を取れます。idの場合は前に「#」をつけます。例えば「#my-id」というふうに指定してあげればidが「my-id」の要素を取れます。実際にコードにすると以下のような感じですね。

// imgタグの取得
document.querySelector('img');

// classがmy-classの要素の取得
document.querySelector('.my-class');

// idがmy-idの要素の取得
document.querySelector('.my-id');

「このコードはどこに書けばいいのか」

JSのコードはブラウザで動きます。なので、ブラウザに直接コードを書けます。

下記の画像のように要素の検証を開いていただいて２つ目のタブの「console」というところを開きましょう。

ここに document.querySelector('img') とすると画像が取れると思います。いるページはどこでもいいですが、画像がないページだと何も取れませんので気をつけてください。

「documentやquerySelectorとは」

ここに書いてあるdocumentというのはオブジェクトと呼ばれるものです。

オブジェクトは色んな情報を持っていて、それらを使用する便利な「関数」と呼ばれるものも持っています。

querySelectorは document が所有している関数の一つです。

今回使用したdocumentというオブジェクトはこのページを表しています

documentのquerySelectorというメソッドを使用すると、そのページにある要素を取得できます。

ある意味「検索」のような関数とでも言えますね。

「documentのあとのドット」

そうするとこのドキュメントのあとのドットは何でしょう。

このドットはその前のオブジェクト（今回はdocument）が所有している関数や所有している情報を使う際に置くものです。

今回は document が所有している関数 querySelector を使用したいので document.querySelector という形になります。

「最後のセミコロン」

プログラミングでは最後にセミコロンをつける言語はたくさんあります。

これは「ここで一つの文が終わりですよ」とプログラミング言語を処理するブラウザに明示的に教えてあげています。

ちなみに、Javacsriptでは文の終わりを改行から予測してくれるので省略が可能です。

つけるもつかないもプログラマーの趣向によって変わりますが、僕はセミコロンを付けるのでこの記事でもセミコロンをつけて進めていきたいと思います。

要素の編集

それでは取得した要素をどのように編集すればよいかですが、取得した要素を編集したいと思うたびに毎回わざわざ取ってくるのは大変ですよね。そこで変数というものを使用して取得したデータを保存します。

変数

変数とはデータを入れる箱のようなものだと考えてください。変数を使用するには「定義」と「代入」が必要です。まず、「このような名前の箱を使用しますよ」とパソコンに教えてあげる必要があります。Javascriptでは以下のようにして定義を行います。これは「sample」という名前の変数を定義しています。

// sampleという名前の変数の定義
var sample;

はじめについている var というのが variable（変数）の略で変数を定義する際に使います。

これで「sample」という空の箱を作れます。

続いて代入ですが、このような空の箱にデータを保存するします。

// sampleという名前の変数の定義
var sample;

// sampleに数字の1のデータを保存する
sample = 1;

イコールサインの左側に値を入れ替えたい変数と右側に代入したい値（箱に入れたいデータ）を使います。

ちなみに定義と代入を同時にすることができます。

// 定義と代入を同時にする

var samaple = 1;

それでは実際にページから取得した様を変数に保存してみましょう。

上記のように img という変数に document.querySelector('img') で取ってきたimgタグの要素を代入しています。

そして、 img と入力するだけで、そのデータを表示できましたね。

それでは実際にこの画像を変えてみましょう。

imgタグの要素には src という、画像のURLを設定するところがあります。これらを表示したい画像のURL先に設定することでHTMLのimgタグは特定の画像を表示することができます。

そして、Javascriptにおいて属性にアクセスするには「.」を使います。たとえば、上記の img という変数の src 属性にアクセスしたい場合は

img.src

というふうにします。試し見してみると現在表示されているグーグルの画像のリンク先が表示されると思います。

それではそのsrcを変更するにはどうすればいいのでしょうか。代入をしようすることにより、srcの値を上書きすることができます。

それでは実際に書き換えてみましょう。今回はグーグルで適当にとってきた猫の画像をしようします。

最後に

いかがだったでしょうか。今回は一つ一つ手動でやっていきましたが、これらのコードをファイルに移して自動で走らせることも可能になります。このようにJavascriptはHTMLと深く関連していてブラウザで動かす事ができる稀な言語です。今回はブラウザで表示されている写真を変更したのみでしたが、応用すればFacebookに表示されているすべての投稿を「いいね」できたり、TinderのWebサイトで自動で左や右にスワイプすることも可能になります。

それでは次回はJavascriptや他の主な言語を使用するにあたって必要な言語の文法というものを見ていきたいと思います。

Naggi Club（ナギ倶楽部）ではプログラミング学習をサポートしております。

現役のシリコンバレーエンジニアが豊富な経験と知識により、挫折しないプログラミング学習を全力で提供します。

プログラミングに関する技術的な質問からスケジュール管理やモチベーション維持まで精一杯サポートさせていただきます。

詳しい情報はこちらからよろしくおねがいします。