プログラミング初心者がChromeをおすすめする理由【デベロッパーツール・拡張機能】
こんにちは。 今回は、独学でHTML、CSS（SCSS）、そして今現在JavaScriptを勉強中の主婦が、愛用中のブラウザ・Chromeについての記事になります。
などをご紹介します！
Chromeとは
正式名称：
Googleと名のつく通り、Googleが開発したウェブブラウザです。
一般的に、WindowsだとMicrosoft Edge、MacだとSafariを使用することが多いと思うんですが、Chromeを使用すると、プログラミングがかなり捗ります。
（ウェブブラウザは他にもFirefoxなど有名ですね）
また、Android端末では標準ブラウザがChromeになっているので、スマホ端末を触っている方にはなじみ深いかと思います。
Google Chromeをダウンロードする www.google.co.jp
Chromeで便利な点
一番便利な点は、デベロッパーツールです。 そして次に便利な点が、拡張機能。
web制作やプログラミングと無関係な方には、デベロッパーツールは不要かもしれませんが、拡張機能の方は万人にお勧めできます。
デベロッパーツールとは
まずは便利機能その1、デベロッパーツールから。
こちら、Chromeでウェブサイトのhtmlやcssを表示できたり、コンソールと呼ばれる入力可能なエリアでプログラムを実行できたりする優れもの。
表示だけでなく、web上でリアルタイムにhtmlを編集したり、cssを編集したりすることもでき、デザインの確認やちょっとした修正にとても役立ちます。
また、入力途中でも変換候補が予測して出てくれるので時短にもなります。（忘れちゃっても候補で出てくるのでいちいち単語を検索しなくていいのも利点。）
デベロッパーツールの表示
表示方法は
- 右クリックで検証
- 上部ツールバーから検証
- ショートカットキーで検証
の３パターン。
右クリックで検証ならこう。
表示→開発/管理→要素の検証と進むならこう。
検証画面はこんな感じ。
ショートカットキーはoption+command+i！
実際に検証画面から、このブログのデザインを整えてみた記事はこちら！
Comming soon…
もう少しお待ちください🙇♀️
また、ショートカットキーにはそれぞれの検証画面が振り分けられているので、
- ソースを表示：
option+command+u - 要素の検証：
option+command+c - JavaScriptコンソール：
option+command+j
でそれぞれの画面をいち早く表示することができます。
※要素の検証はデベロッパーツールで開いた時と同じなので省きます。
デベロッパーツールの使い方
画面説明から。
画像のような表示だった場合、左側がWebサイトのプレビュー、右側に編集可能ゾーン（コード）が配置されてます。
配置の変更もし配置を変えたい場合は、歯車マーク隣のから変更可能。
Dock sideの右横にあるマークをクリックで配置が変わる。
HTMLの編集方法
HTMLを編集したい時は、HTMLのゾーンで右クリック後、「Edit as HTML」をクリックで編集可能になります。
また、各タグの左側の「▶︎」を押すことで子要素が表示されるので、編集したい箇所が子要素なら、表示してから右クリック。
試しにまるっとコードを消すと…
左側のプレビューにも反映される。
※あくまでも【検証ツール】なので、部分的な編集が主だと思いますが、もし全ての部分を編集したい場合は、<body>を選択して編集してください。
HTMLを検証ツールで編集するメリット
Edit as HTMLは、選択した親要素の中身が編集可能なので、例えば
- 記事の中の見出しタグのクラスを付け替えたい
- ブログのタイトル部分に画像を付け足したい
- 記事フッター部分のSNSエリアのIDを調べたい
などといった時に部分的に編集できるのが便利だと感じています。
HTMLを検証ツールで編集するデメリット
デメリットは、HTMLタグを全て編集するには不向きなこと。
全部編集するならまるっとコピーして適当なテキストエディタで編集しましょう。（VSCodeならリアルタイムプレビューできるし）
あとは保存できないので、修正内容はあとでコピペする必要があります。
ブラウザ更新しちゃうと全部リセットされるのでそこも要注意。（これはCSSもコンソールも全部そう）
まだまだ使いこなせてないので、もっとたくさんメリット・デメリットあるとは思いますが私個人として現在はそんな感じです。
CSSの編集方法
まずはhtmlの<div>タグを試しに選択してみます。
そうしたらCSSの表示ゾーンに、このタグのデザインのCSSのコードが出てきてくれます。
試しにコードを書き加えてみます。
border:3px solid #000; //3pxの実線を追加 box-sizing: border-box;
と書き加えました。
※追加したいコードの右あたりをクリックすると、そのすぐ下にコードを追加できます。
左側に表示してあったサイト画面に、すぐ反映されました。
コピーの仕方
cssの上で右クリックすると、
- Copy declaration
- Copy property
- Copy value
ーーーーーーー
- Copy rule
- Copy all declaration
- View computed value
と表示されます。
それぞれのコピー結果は以下。
| 名前 | 結果 |
|---|---|
| Copy declaration | border: 3px solid #000; |
| Copy property | border |
| Copy value | 3px solid #000 |
| Copy rule | ID名やclass名などを含み全てコピー（以下参考） |
| Copy all declaration | スタイルを全てコピー（以下参考） |
Copy ruleでコピーした結果
#globalheader-container { background-color: #75c9e4; color: #ffffff; border: 3px solid #000; box-sizing: border-box; }
Copy all declarationでコピーした結果
background-color: #75c9e4;
color: #ffffff;
border: 3px solid #000;
box-sizing: border-box;
View computed valueをクリックした場合
これはスタイルをコピーするものではなく、指定したセレクタの情報だけ抜き出して確認できるみたいです。（使ったことなかった😅）
便利機能
デベロッパーツールの便利な機能をご紹介します。
1.一時的にスタイルを消したい時。
チェックマークを外す。
サイトの表示も変わる。
2.カラーコードを変更したいとき
#〜〜の左にある色のついた四角をクリックすると、カラーパネルが表示されます。
変更の仕方は、
- カラーパネル上でクリックする
- スライダーで色味を変える
- スポイト機能で他の場所の色を採用する
- カラーコードで直接指定する
- 透明度を変更する
といった方法があります。
情報量多くて見辛くなっちゃいましたが以下参考画像。
またスライダーを動かすことで透明度を変更することもできます。
他にも、カラーコードの下部+マークの▲▼「Preview palettes」をクリックすると、
カラーパレットの一覧が出てきてくれます。
また、カラーコードの隣にある▲▼をクリックすると、rgb形式やhsl形式にも変更できます。
カラーコードは+マークをクリックすることでストックすることもできます。
3.レスポンシブ表示を確認
サイトが表示されているエリアの上部にある▲▼をクリックすることで、様々なデバイスサイズでの表示をすぐに確認できます。
4.要素の情報を確認
マウスを上に置くと情報がみれます。 ID名がわかったり、フォントサイズがわかったり、横幅・縦幅がすぐにぱっとみて分かるので重宝します。
クリックするとその要素をCSSのエリアで編集できます。
5.transitionの動きを視覚的にチェックして選択
最近のwebサイトは動きがありますが、transitionの設定もデベロッパーツールを使用することで難なく設定できます。
自分でカーブを編集することも可能ですし、元からあるプリセットを選んで使用することもできます。
動きも上の球体が実際にアニメーションしてくれるのでわかりやすいです。
私の場合だと、ハンバーガーメニュークリック後、表示されるメニューのアニメーションを設定するのに、ほんっっっと〜〜にめちゃくちゃお世話になりました。（いろいろ試して結局シンプルなのに落ち着いたけど）
6.flexの設定が超絶簡単
デベロッパーツールのおかげでflexについて理解したといっても過言ではありません。そのくらいお世話になっているツールの一つ。
まずはdisplay:flex横のアイコンをクリック。
吹き出し内の設定をクリックすることで、ウェブサイト上にもすぐさま反映される。
アイコンがこれまたわかりやすい。
リアルタイムに反映されるので、プレビューをみながら設定でき、flexについて理解していなくても、いじっているうちにだんだんと理解できました。
デベロッパーツールの公式説明サイト
他にも便利な機能はてんこもり！
もっと知りたい方は公式サイトへ。
developer.chrome.com
おすすめ拡張機能
ここまで長々とデベロッパーツールについて説明してきましたが、お次は拡張機能について。 こっちはプログラミングと無関係の方でも便利な機能だと思います。
拡張機能の追加方法は、Chromeウェブストアにアクセス後、好きな拡張機能を追加するだけです。
chromeのアドレスバー右横に追加されていきます。
表示されていない場合は、パズルのピースのようなマークをクリックしてみてください。
ピンマークをonにすることで、表示されるようになります。
Black Menu for Google™
翻訳するのにめっちゃ使ってます。
というのも、プログラミングの勉強サイトや、コンソールでのエラーメッセージが英語なので、毎回日本語に訳してます。
英語できないので重宝してます。
ダウンロード chrome.google.com
関係ないけど™ってoption + 2で表示できるの、知ってました…？最近たまたま知りました。
メールもこっからチェックできるので、ログインで最近よくある二段階認証で送られてきたメールとかも、いちいちブラウザ切り替えなくてよくて便利です。
Save to Pocket
いろいろサイトで調べ物していて、いちいちブックマークにいれちゃうと膨大な量になっちゃいません？？？
そんな時私はPocketにとりあえず保存しています。
タグ付もできるので、あとから検索も簡単。
基本プログラミング関係のことを保存しています。
ダウンロード chrome.google.com
Text Blaze
これ最近知ったんですが、定型文を辞書ツールで登録するよりよいです。
ブラウザ上でしか使えないんですが、例えばブログで記事書いてる時に、毎回同じ言い回し使うとか、毎回同じコード書くとかいうときに、TextBlazeの機能を使うと/〜〜で瞬時に呼び出せるんでめっちゃ時短なんです。（実際にめっちゃ使ってます）
/〜〜の形じゃなくても登録可能。私は見本通り/から始まるようにしています。（普通に文字入力しているときに変換されると鬱陶しいので）
開くとこんな画面
フォルダの名前と説明（あってもなくても）を入力。
+マークを押すと、新しい定型文が登録できます。
私の場合だと、記事で使うタグを登録してすぐ呼び出せるようにしています。（はてなブログの定型文機能だと15件までしか作成できないので。）
この機能の素晴らしい点は、動的：（翻訳前はDynamic：）と書かれた右側のアイコンで、日付や時間、カーソルの位置などを挿入できるところ！！！
とくにカーソルの位置はとても便利。
先ほどのスクリーンショットの例でいくと、
<span class="badge blue"></span>の間に{cursor}が挿入されています。
これは、ここにカーソルを持ってくるという意味。
試しに、/badgeと入力すると、カーソルの位置は<span></span>の間にきちんときてくれています。
挿入後、すぐさま文字を入力できるのは時短。
毎回カーソルを<span>タグの間にもってくるのは不便ですから、とっても便利な機能だと感じています。
ダウンロード chrome.google.com
Web Maker
これはプログラミングしない方には必要ないですが、する方には超便利機能だと思います。
とくに私のような初心者には必見！！！
CodePenのように、プレビューを見ながらコードをかけるんですが、魅力的なのはオフラインで使用可能というところ。
HTML、CSS(SCSS)、JSが使える点はCodePenと同じですね。
入力内容は即座に右側のプレビューへ反映されます。
また、場面下部のアイコンクリックで、CodePenで編集＆保存ができたり、配置を変えることもできます。
エディタの見た目も歯車マークで変更可能。
また、各エディタの{}をクリックするとコードが綺麗に整形されます。
見辛くなってしまったコードもこれでばっちり見やすいコードに。
CodePenは保存しちゃうと誰でも見れますが、こっちはローカルに保存なので、共有には向きませんが、個人的なメモ程度のプログラムや練習にはもってこいかと思います。 あとで公開したくなったらCodePenに引き継げる点もいいところ！！
ダウンロード chrome.google.com
まとめ
いかがだったでしょうか。
Chromeでは、
ということがわかっていただけたかなと思います。
また、Chrome間でウィンドウも共有できるため、
といったことや、
といったこともでき、好きな端末でwebページを引き続き閲覧することができます。
そういった点も、Chromeをおすすめする理由の一つ。
気になった方は是非、ウェブブラウザにChromeを導入してみてくださいね！
Chromeのダウンロードはこちら www.google.co.jp
