JavaScript

【入門】JavaScriptを実行する【デベロッパーツール編】

どうも、つよぽんです!

今回は、デベロッパーツールを使ったJavaScriptの実行方法について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • JavaScriptを「勉強しようと思っている」「勉強している」
  • JavaScriptの実行方法がわからない
  • JavaScriptを試してみたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
デベロッパーツールでJavaScriptを直接実行する方法ブラウザのデベロッパーツールを使うことでJavaScriptファイルを作成せずともJavaScriptを実行することができます。値の確認や、簡単な動作の確認であればデベロッパーツールを使って直接JavaScriptを実行した方が効率的です。...

デベロッパーツール(開発者ツール)は、Chrome・Safari・Firefoxなど様々なブラウザに最初から用意されています。

今回はChromeのデベロッパーツールを使って解説をしていくので、同じ環境で試してみたい方は以下の記事を参考にChromeをインストールしていただけたらと思います。

あわせて読みたい
開発環境の準備「Web開発」の開発コンテンツ内で利用する開発環境を紹介しています。基本的にはお好みの環境で開発していただいて問題ありません。しかしブラウザの種類や環境の違いによって、学習コンテンツと同じように動かない可能性もあるので、まだ開発環境を用意していない方は合わせていただけると無難です。...

それでは次の内容で話を進めていきます。

今回の内容
  1. デベロッパーツールとは
  2. デベロッパーツールの開き方
  3. デベロッパーツールを使ったJavaScriptの実行手順

 

デベロッパーツールとは

デベロッパーツールとは、Webブラウザ(Chrome・Safari・Firefoxなど)に最初から搭載されている「効率的にWeb開発を進めることが出来る機能がたくさん用意されているツール」のことです。

デベロッパーツールに用意されている機能はたくさんあるので、ここでは全部書きませんが代表的なものを3つ挙げたいと思います。

デベロッパーツールの機能
  1. HTML・CSSを直接編集してリアルタイムでWebの表示を変更する
  2. JavaScriptを実行する(ファイルを読み込んでいれば、読み込んだファイルに記述されている値や関数を操作することも出来る)
  3. ブラウザに保存されているデータを確認することが出来る(cookielocalStorage
    など)

上記の3つはあくまでもデベロッパーツールの機能の一部にすぎません。

今回は、上記3つのうちの「JavaScriptを実行する」の方法について説明してきます。

それでは次の章から、実際にデベロッパーツールの開き方を覚えて、JavaScriptを実際に実行するところまで見ていきましょう。

デベロッパーツールの開き方

デベロッパーツールを開く方法はいくつかあります。

デベロッパーツールを開く方法
  1. ブラウザ右上の設定アイコンから開く
  2. 画面上部の「表示」メニューから開く
  3. ショートカットキーで開く

今回は画像を使って説明していくので、上記3つの内、の方法で説明していきます。

ブラウザ右上の設定アイコンから開く

下の画像が見づらい場合は画像をクリックすることで拡大することが出来ます。

ブラウザ右上の設定アイコンから開くブラウザ右上の設定アイコンから開く

ここでいう「ブラウザ右上の設定アイコン」とは「縦に3個の点(・)が並んだアイコン」のことです。

この「ブラウザ右上の設定アイコン」をクリックすると、上の画像のように白背景の選択メニューが出てくるので、「その他のツール」→「デベロッパーツール」の順番で選択することでデベロッパーツールを開くことが出来ます。

デベロッパーツールを開くと次の画像のような画面が表示されます。

JavaScriptを実行できるデベロッパーツールの画面(Consoleタブを選択)JavaScriptを実行できるデベロッパーツールの画面(Consoleタブを選択)

画像の中のオレンジ色の文字で書いてあるように「Console」を選択することでJavaScriptを実行する画面を開くことが出来ます。

画面上部の「表示」メニューから開く

下の画像が見づらい場合は画像をクリックすることで拡大することが出来ます。

画面上部の「表示」メニューから開く画面上部の「表示」メニューから開く

画面上部に「表示」と書かれたメニューをクリックします。

クリックすると、上の画像のように白背景の選択メニューが出てくるので、「開発/管理」→「デベロッパーツール」の順番で選択することでデベロッパーツールを開くことが出来ます。

デベロッパーツールを開いた後は、前の項目話したことと同じように、「Console」を選択して、JavaScriptを実行できる画面を表示します。

デベロッパーツールを使ったJavaScriptの実行手順

デベロッパーツールでJavaScriptを実行する手順は単純で「コードを打ち込んでエンターキーを押す」ことで実行できます。

コードを打ち込む」ためには最低限JavaScriptの文法を理解する必要がありますが、今回は実行するまでが目標であるため、簡単な計算(たし算・かけ算など)をしてJavaScriptが動いているの確認してみましょう。

簡単の計算をJavaScriptで実行している様子簡単の計算をJavaScriptで実行している様子

計算だけだとJavaScriptを実行している感覚がないかもしれないので、文字列の打ち込み文字列の連結をJavaScriptで実行している様子の画像も以下に貼っておきます。

文字列の打ち込みと文字列の連結を行っている様子文字列の打ち込みと文字列の連結を行っている様子

他にも「変数」を使うなど、もう少し複雑なことをしたい場合は、以下の記事の「プリミティブ型と変数」のセクションにあるスライド記事を参考にしていただけたらと思います。

あわせて読みたい
JavaScript基礎文法編このページはJavaScriptの文法に関する学習コンテンツをまためたページとなります。これからJavaScriptの学習を始める方はまずは基礎文法を学習することからスタートです。文法知識がついてからWeb開発が出来るようになります。...

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. ブラウザに用意されているデベロッパーツールを使うことで効率的にWeb開発を進めることが出来る
  2. デベロッパーツールの「Console」を選択することで、ブラウザ上でJavaScriptを直接実行することが出来る
  3. デベロッパーツールのConsoleでJavaScriptを実行する方法は「コードを打ち込んでエンターキーを押す」だけ

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
デベロッパーツールでJavaScriptを直接実行する方法ブラウザのデベロッパーツールを使うことでJavaScriptファイルを作成せずともJavaScriptを実行することができます。値の確認や、簡単な動作の確認であればデベロッパーツールを使って直接JavaScriptを実行した方が効率的です。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です