EP6. 効率的な開発にはツールが不可欠!?@東雲すみれのWEB開発

メイン画像

前回までのあらすじ

IT開発事業部としての初仕事として、HTML/CSSを使ってLPを作成するすみれ。

しかし、思うようにページをうまく表示できず悩んでいると...

 

目次

  1. EP1. 初心者なのにIT開発事業部長!?
  2. EP2. 開発マシンを準備セヨ
  3. EP3. プログラミングの向き不向き
  4. EP4. ITの基礎理解は大切です!
  5. EP5. HTML/CSSでLP制作!
  6. EP6. 効率的な開発にはツールが不可欠!?(現在のページ)

 

1/4

 

2/4

 

3/4

 

4/4

 

効率的に開発するためには開発者ツールが重要!

 

どのような開発においても、効率的に開発するためには開発者用のツールを使いこなす必要があります。

漫画の中でも触れられているように、問題を解決するにはまず原因を特定しなくてはなりません。

そのような時は、開発者用のツールを使うと効率的に原因を探すことができます。

 

特にWebのフロントエンド開発においては、ブラウザに付属している「検証ツール」を使うとよいでしょう。

 

 

初心者がよく行ってしまう非効率な方法は

  • 大元のソースファイルのコードを書き換える
  • 画面を更新して問題が解決したかどうか確認する

 

という作業を繰り返し行うことです。

 

実際の開発では、このような進め方はほとんどしません。

 

まずは検証ツールを使い、「どのコードが間違っていて表示が崩れているのか?」といった原因を特定することに集中します。

原因が特定できたら、実際のコードを修正するといった進め方をする場合がほとんどです。

 

規模が大きなものになるとソースコードは数万行以上にも及んできます。

そのため、原因がわかっていない状態で行き当たりばったりにコードを修正して表示確認を繰り返すより、原因を特定することをまず優先させた方が効率よく問題を解決できます

 

そのため、検証ツールを使えるようにしておくことは、開発の基礎となっています。

 

今回は、検証ツールの中でも多く使われているChromeブラウザのデベロッパーツールについてみていきましょう。

 

 

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

 

デベロッパーツールとは、Chromeに付属している検証ツールです。
 

ページ上で右クリック→[検証]をクリックするか、以下のショートカットで起動することができます。

  • Macの場合:Command + Option + I
  • Windowsの場合:Ctrl+Shift+I

 

デベロッパーツールには非常に多くの機能があり、フロント開発におけるほとんどの問題を解決することができます

 

機能の一例としては

  • DOMの確認・編集
  • Styleの確認・編集
  • 任意のJSの実行
  • JSのエラー確認
  • 通信内容の確認

 

などをはじめとした、多くの機能があります。

 

 

デベロッパーツールを使うとどう便利なのか?

 

デベロッパーツールでは、ブラウザ上で擬似的にコードを書き換えて表示を変更したりすることができます。

これは実際のコードに影響を与えることなく、Webページの各パーツのコードを確認したり、表示を修正したりすることができるということです。

この機能があるおかげで、漫画で触れられていたような「CSSの優先度」を確認したり、「セレクタの選択ミス」の修正を簡単に試すことができます。

 

また、デベロッパーツールではPCでの表示だけではなく、スマートフォンやタブレットなどでの表示確認をすることもできます

近年はスマートフォンなどからサイトをみる人が増えた結果、レスポンシブ対応があたりまえになっています。

しかし、開発段階から実機でいちいち表示テストをしていては非効率的です。

そのような場合に、デベロッパーツール上から各端末ではどのように表示されるかを確認しながら開発をすると効率的に開発することができます。

 

このように、デベロッパーツールには開発を効率化するための機能がたくさん備わっており、うまく活用することで余計な手間を省略することができるのです。

 

今回紹介したものの他にも、様々な機能があります。

例えばHTMLやCSSを使って見た目を作っていく先の段階では、ページの表示速度の改善やJavascriptのデバッグなどがありますが、そこでもデベロッパーツールが使われます。

 

このように、デベロッパーツールはWebのフロントエンド開発のあらゆる段階において必要になってくるので、その使い方について学んでおく必要があるのです。

 

デベロッパーツールの詳しい使い方については、公式ページや使い方の紹介記事などを探して読んでみると良いでしょう。

Chrome DevTools - Google

 

ツールを使いこなして効率よく開発することを目指しましょう!


記事一覧に戻る

関連記事

東雲すみれのWeb開発
サムネイル画像
2019/07/23 18:00
EP6. 効率的な開発にはツールが不可欠!?@東雲すみれのWEB開発
東雲すみれのWeb開発
サムネイル画像
2019/04/27 22:10
EP2. 開発マシンを準備セヨ@東雲すみれのWEB開発
東雲すみれのWeb開発
サムネイル画像
2019/04/25 19:10
EP1. 初心者なのにIT開発事業部長!?@東雲すみれのWEB開発
東雲すみれのWeb開発
サムネイル画像
2019/06/11 17:20
EP4. ITの基礎理解は大切です!@東雲すみれのWEB開発
東雲すみれのWeb開発
サムネイル画像
2019/06/09 15:30
EP3. プログラミングの向き不向き@東雲すみれのWEB開発
前の記事:未経験からのエンジニア転職で最低限現場から求められるスキル・レベル感