JavaScriptプログラミング入門講座

デバッグと便利なツール

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptで開発していくにあたり、デバッグの仕方と、便利なツールについてご紹介します。
講師:
08:10

字幕

このレッスンでは JavaScript で プログラミングを進めていくにあたり デバッグの方法とその便利なツールについて 解説していきます まずはダウンロードしてきた ファイルの中の debug.html と debug.js を エディタで開いておいて下さい そしてこれらがそれらのファイルを開いた 状態のエディタとなります これらを使ってデバッグの方法に ついて解説していきたいと思います それでは始めていきましょう まずデバッグというものは どういうものなのかを 先にお話ししておきたいと思います デバッグとはプログラミングを 進めていくにあたり 間違えやエラー いわゆるバグがないかどうか また きちんと自分の意図したとおりに 動作しているかなどを チェックする作業の事を指します このデバッグの作業ですが 何もツールを使わないと どこでどういったエラーが 起こっているのかというものを 自分で探さないといけないため 大変時間がかかってしまう作業となります そういったところに 時間を取られてしまわないように ここでは Web 制作の現場で有名な 2つのツールについて ご紹介したいと思います まずひとつ目のデバッグツールは Firefox ブラウザにインストールして使うタイプの Firebug と呼ばれるものです そしてもうひとつは Chrome ブラウザに標準で搭載されている デベロッパーツールという機能となります 実は Firefox にインストールして使う Firebug と Chrome のデベロッパーツールは 非常によく似た機能を持っていて 画面の見た目も非常にそっくりです 使い方もほぼ同じですので 今回は Chrome のデベロッパーツールを 中心にご紹介していきたいと思います では Chrome のデベロッパーツールを 起動してみたいと思います 今この Firebug のページを見ているこのブラウザ これは Chrome ブラウザとなります この Chrome ブラウザのこちらのボタン この3本線のボタンをクリックして頂くと このようなメニューが出てきます この中で「ツール」を選択して さらに「デベロッパーツール」をクリックすると Google のデベロッパーツールを 起動することができます それではクリックしてみましょう するとこのような画面が ブラウザの下に表示されてきました これが Chrome の デベロッパーツールの画面となります それでは一度この画面を表示した状態で 先程ダウンロードしてきた debug.html を ブラウザに読み込ませてみましょう 先程ダウンロードしてきた debug.html を Chrome ブラウザに ドラッグアンドドロップします するとこのような画面になります では早速デベロッパーツールの画面を 見ていきたいと思います このデベロッパーツールの一番上には メニューとしていくつか英単語が並んでいますが この Console というものが 選択されている状態であることを確認して下さい 選択されていなければこちらの Console をクリックしておいてください そして中に目を移しますと このように赤文字で何かが書かれていますね この部分には JavaScript の エラーの内容が記されています 今回の場合は SyntaxError と書かれていますね この SyntaxError とは簡単に言いますと JavaScript の文法が 間違っているよという事を指します ではこの SyntaxErrorは JavaScript のどの部分で 間違っているのかを調べるためには このまま目を右に移していただきますと ここに debug.js 1 と 書かれている箇所があります これは debug.js ファイルの中の 1行目で SyntaxError が 起こっていることを指しています それでは実際にこの debug.js を エディタで見てみたいと思います debug.js の1行目はこちらになります "ここにJavaScript のコードを書きます" というところが SyntaxError 要するに JavaScript の文法が 間違っているよということになりますので ためしに一度 この一文を消してみたいと思います こちらをそのまま削除して保存します そしてブラウザに戻って この更新ボタンを押してみます するとどうでしょう 先程ここにあった赤い文字で エラーの内容が記されていましたが 先程の一行目を削除しましたので エラーが無くなっている状態です このようにエラーの内容とエラーの場所を このデベロッパーツールが教えてくれるので 非常に修正も早いですね それでは次に このデベロッパーツールを使っていく上で 便利な JavaScript のコードを ご紹介したいと思います 一度 debug.js のエディタ画面に戻ります さてこの debug.js 今は何も書かれていない状態ですが ここに1つコードを書いてみたいと思います Console.log(); そして この括弧の間に“”をいれて 例えば "テスト" といれてみましょう この状態で保存します そしてブラウザに戻って 更新ボタンを押してみましょう この更新ボタンを押してみます するとこのデバッグツールの中に 「テスト」というように 先程 debug.js の中に書いた Console log の () の中に書いた 文字列が表示されてきました このConsole log はあくまで デベロッパーツールの中で このようにテキストを 出力したりできるツールですので デバッグを進めていくにあたって 非常に便利な JavaScript の命令となります 実はこの「テスト」と 書かれたテキストだけではなくて また別のレッスンで紹介している 変数や配列― オブジェクトといった物に 格納されているデータを 確認する事もできるため 非常に便利です スムーズに JavaScript を プログラミングしていく上で とても便利な機能となっているので 覚えておくとよいでしょう 以上で今回のレッスンは終了です 今回は JavaScript で プログラミングを進めていくにあたり デバッグとその便利なツールについて 解説いたしました デバッグツールを使うのと 使わないのとでは 開発のスピードに 大きく差が出てしまいますので 積極的に使っていきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。