エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』 #30DAYSトライアル

DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』 #30DAYSトライアルです。 

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』 

DAY10. 『Chromeの検証を使ってみよう+LiveServerをインストールしよう』ということで、ローカル環境設定完了です。 

 

ちなみに、課題の中の「iPhoneXのサイズで確認する」というのはこれのことです。

 

Google Chromeの検証機能とは

Google Chromeのデベロッパーツール(要素の検証機能)は主に3つの目的・使い方があります

  1. ソースコードを確認する
  2. ウェブブラウザ(Chrome)上でソースコードの「変更結果」を確認する
  3. ウィンドウサイズを変更して、レスポンシブデザインの確認をする

 

ウェブサイトづくりに関連することが、GoogleChrome上で色々出来るので便利!

 

他にも、JavaScriptが絡んできたり、ネットワークが絡んでくると、もっと多様に使えるようです。

下記の記事が「全体像」を知るにはちょうど良い内容だと思います。

employment.en-japan.com

 

LiveServerとは

LiveServerとはVSCodeの拡張機能で、超簡単にローカルサーバーを起動できる…というものです。

そもそもサーバーとは何か?GoogleChromeとどう関係しているか?

サーバーとGoogleChromeの関係について説明します。

  1. サーバーという「ソフトウェア」を自分のPC上で起動させる
  2. そのサーバー(ソフトウェア)にソースコード(例:index.htmlとtest.css)を置いておく
  3. GoogleChrome(別のソフトウェア/WEBブラウザ)を使って、サーバーからソースコードをもらう
  4. GoogleChromeソースコードを元にして表示する

という流れです。

多分よくわからないと思いますw

 

この辺りはWEBの基本的な仕組みの理解が必要です。

あまり分かりやすい記事が無かったのですが、以下の記事を見ると少しイメージつかめるかも…。

参考:サーバーとは

 

LiveServerは簡易的にローカルサーバを起動できる

LiveServerは簡易的にローカルサーバを起動できるVSCodeの拡張機能です。

これを使うことで、ローカル環境に置いてあるソースコードを修正・確認するときに、ちょっと楽になります。

ソースコードを読み込んで、修正する時、以下のような違いがあります

  • ウェブブラウザで手動で読み込む→ファイルの変更を動的に反映しない(Chrome上で更新ボタンを押す必要がある)
  • LiveServerを使う→ファイルの変更を動的に反映する(Chrome上で更新ボタンを押す必要がない)

 

LiveServerの使い方

LiveServerの使い方は、Visual Studio Marketに書いてあるとおりです(英語ですけどね)

marketplace.visualstudio.com

 

Shortcuts to Start/Stop Server

Open a project and click to Go Live from the status bar to turn the server on/off.

ということで、画面下の「Go Live」を押せばとりあえず使えます。

これだけ覚えておけばとりあえずはOKかと。

 

【余談】GoogleChrome拡張機能に英語辞書を入れるのがオススメ

余談ですが、こうやって英語のドキュメントを読むことが増えてくると思います。

GoogleChrome拡張機能の英語辞書を入れるのがオススメです。

 

私はこれを愛用しています。分からない英単語にカーソルを置くだけで翻訳してくれるので超便利です(もちろん無料ですw)

chrome.google.com

 

 

以上、DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』というお話でした。

【関連記事】

  1. DAY8.『エディタをインストールしよう』 #30DAYSトライアル
  2. DAY9.『基本のショートカットを覚えよう+ファイルパスを理解しよう』 #30DAYSトライアル
  3. DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』 #30DAYSトライアル

www.engineer-step.com