Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JavaScriptを学ぶ準備とデベロッパーツールの基本

JavaScript学習の忘備録として

実際の動作を確認する上でデベロッパー・ツールが便利です。

Chromeデベロッパー・ツールとは?

  • Webアプリのデバッグやパフォーマンスチューニングに役立つツール群
  • JavaScriptを実行したり、通信の状況を確認したり、HTMLのレイアウトを確認したり、Webアプリ開発で役に立つ便利な機能が使えるもの
  • Chromeブラウザに標準で搭載された機能(Chrome以外のブラウザにも似た機能を持つものもあります)

手順
1. 適当なウェブページを開く
2. 右クリックして検証 を選択

  • Macの場合、command(⌘) + option(⌥) + i 3つのキーを同時に押します
  • windowsの場合、 F12
  • タブが複数あるので Console タブを選択します

コードを動かす上で簡単な記述について。

// 単純な計算 
// + (加算) 
// - (減算) 
// / (除算) 
// * (乗算) 
// % (余り)

1 + 1
// 結果:2

3 - 1
// 結果:2

5 * 5
// 結果:25

10 / 2
// 結果:5

10 % 3
// 結果:1


// 変数に数値を保存して計算
var num1 = 10
var num2 = 15

num1 * num2 // 150


// ログ出力 文字の場合は`引用符`と呼ばれる記号で囲むこと
console.log("好きな文字")


// 警告表示
alert("好きな文字")


// 関数の登録
function hello(){
  console.log("HEllO WORLD!!")
}
// 関数の呼び出し
hello() // "HEllO WORLD!!"


// JavaScriptオブジェクト
var obj = { 
  name: "マスオさん", 
  age: 32, 
  favorite_foods: ["トマト", "ぶどう", "みかん"] 
}

obj.name // マスオさん
obj.age // 32
obj.favorite_foods[0] // トマト

便利な小技

  • キーボードの上キー(↑)を押すと、直前に入力したプログラムを呼び出せる

以前に実行したプログラムを再度実行したいときに便利です
以前実行したプログラムを修正して再度実行することもできます

  • 🚫マークをクリックすると、コンソールの中身をクリアできる

consoleを綺麗にしたい場合に使えます。
変数や関数などは登録されたままです。


学んだことを忘れないために記述して行きます。
何か間違いやご指摘があれば遠慮なくお願いします。

taro_zun
未経験からエンジニア転職を目指して学習中。日々学んだことをアウトプットしていきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away