プログラミング

プログラミングを始めるにあたって必要なツール5選

この記事のテーマ

この記事では自分オリジナルのWebサイトを作成するにあたって、

必要になってくるツールを紹介していきます。

 

プログラミング必須プラグイン

・Google Chrome（推奨ブラウザ）

・VScode（テキストエディタ）

・デベロッパーツール

・デバッグツール

 

Google Chromeについて

ブラウザとは、インターネットを閲覧するためのツールです。

ブラウザにはいくつか種類があります。
代表的なブラウザには、Google Chrome、Microsoft Edge、Safari、Firefoxなどがあります。
WindowsのPCを使われている方は、WindowsのPCに標準装備されているMicrosoft Edgeを使用している方が多く、
MacのPCを使っている方は、Safariを使っている方が多いと思います。

このようにいくつかブラウザがある中で、この講座ではWebサイトを制作していくのに便利な機能が使える【Google Chrome】を利用します。
まずはGoogle Chromeをインストールしましょう。

Google Chromeのインストール

１. 【Google Chromeサイト】にアクセスします。

２. 【Chromeをダウンロード】をクリックします。

上記手順でダウンロードが完了しました。

Macの場合は下記設定が必要となります。

Google Chromeを起動してみましょう。
Google Chromeのアイコンをダブルクリックして起動してみましょう。
下記画像のように表示されれば起動完了です。

特に設定を変更していない場合、Windowsの方はInternet ExplorerまたはMicrosoft Edge、
Macの方はSafariがデフォルトで利用するブラウザになっています。
下記のリンクをクリックすると、デフォルトブラウザの変更手順を見ることができます。
今後、Google Chromeを利用する機会が多くなるので、変更することをオススメします。

デフォルトのブラウザを変更する

 

テキストエディタについて

テキストエディタとは、文章やプログラムを作成、編集するためのソフトウェアです。
テキストエディタにはさまざまな種類があり、メモ帳のように単純な文章作成に適したものから、コードを書くことに適しているものなどいろいろあります。
開発を行う際は、テキストエディタを使ってファイルにコードを記述していきます。

VSCode(Visual Studio Code)について

Visual Studio Codeというテキストエディタを推奨しています。
Visual Studio Codeはプログラミング開発に特化したエディタで、エンジニアに人気が高いエディタの一つです。
Visual Studio Codeの特徴としては、下記が挙げられます。

    • Microsoft社が提供している
    • 豊富な拡張機能(カスタマイズ性が高い)
    • とても軽量
    • デバッグ機能が標準装備されている(エラーの解消がしやすい)

このサイトではVSCodeを推奨していますが、テキストエディタは個人で好みが分かれたり、現場によって推奨が変わることがあります。
他にも有名なエディタとして、AtomやVimなどあります。興味があれば調べてみてください。

 

VSCodeのインストール

Download Visual Studio CodeをクリックしてOSに合わせたインストーラをダウンロードしましょう。

ダウンロード後の設定がOSによって少し異なります。

◆ Macの方
ダウンロードしたZipファイルを展開するとDownloadフォルダにアプリケーションが格納されますので、
ドラッグ＆ドロップでアプリケーションフォルダへ移動させて下さい。

◆ Windowsの方
ダウンロードしたZipファイルを展開するとVSCodeのセットアップ画面が開かれます。
下記手順に沿って進めましょう。

  • 使用許諾契約書の同意
    • 「同意する」を選択して「次へ」をクリック
  • 追加するタスクの選択
    • 「PATHへの追加(再起動後に使用可能)」を選択して「次へ」をクリック
  • インストール準備完了
  • 「インストール」をクリック

インストールが完了したらアイコンをクリックして開いてみましょう。
下記画像のようにVSCodeの画面が表示されます。

　◆Zipファイルとは

Zipとは、複数のファイルを単一のファイルのように圧縮してまとめるファイル形式です。
通常のフォルダでも同じことは出来ますが、圧縮という手順を踏むことで、データを軽量化できます。
メール送信やダウンロードなどの時、ファイル受信にかかる時間を短縮することができます。
Zipファイル化することを「圧縮」、元のファイル状態に戻すことを「解凍」と呼びます。

 

VSCodeの基本設定

VSCodeでは左下の歯車アイコンから設定を変更することができます。
より使いやすくするためにカリキュラムでは下記設定を行います。

    • 日本語設定
    • ソースコードに関する設定

こちらのサイトで指定した設定以外に、使ったら役立ちそう効率が良くなりそうと思う設定は積極的に取り入れていきましょう！
設定は元に戻すことが可能ですので、気になる設定は試してみることをおすすめします。

 

日本語設定

VSCodeのデフォルト言語は英語です。
英語が得意な人以外は日本語に設定しましょう。

左下歯車アイコンから「Command Palette...」をクリックしてください。
表示されたフォームに「Configure Display Language」と入力し、
入力フォームの下に表示された「Configure Display Language」をクリックしてください。

「en」「Install additional languages...」の二つが表示されますので、
「Install additional languages...」をクリックします。

下記画像のように左サイドバーに言語を選択するメニューが左側に表示されるので、
「Japanese Language Pack for Visual Studio Code」を選択しましょう。

メイン画面の緑ボタン「Install」をクリックしてインストールを行います。

インストール後に画面右下に「In order to use VS Code in Japanese, VS Code needs to restart.」が表示されますので「Restart Now」をクリックして再起動しましょう。
※ 表示されなかった場合は一度VSCodeを閉じて再度立ち上げれば大丈夫です。

下記画面のように日本語で表示されていれば成功です。

ソースコードに関する設定

ソースコードを記述していく上で推奨する設定を行います。
左下「歯車アイコン」→「設定」をクリックしてください。
いくつかの設定を変更していきます。検索フォームもあるのでスクロールして見つからない場合は検索して探してください。
下記項目を修正します。

  • Auto Save
    • off → afterDelay
  • Tab Size
    • 4 → 2
  • Tab Completion
    • off → on
  • Format On Save
    • チェックを入れる

設定変更後は自動で保存されます。

 

VSCodeの拡張機能

VSCodeには拡張機能と呼ばれる、VSCodeの使い勝手をよくするために追加できる機能があります。
拡張機能なしでも充実しているVSCodeですが、
拡張機能を入れると「効率が良くなる」「エラー解消が早くなる」といった、
開発をスムーズに進めるためのメリットがたくさんあります。
拡張機能は基本的に、VSCode作成者以外の方が作成し公開しているケースがほとんどです。
ブラウザで「VSCode 拡張機能 〇〇」などと検索すると多くの検索結果が出てきます。(〇〇は言語名など)
下記におすすめの拡張機能を記載しますので、インストールしていきましょう。
主にHTML/CSSのエラー防止機能やコード整形を行うための拡張機能です。
※ 下記に記載のない拡張機能をインストールする場合はその拡張機能がどういう機能なのかは把握するようにしましょう。
拡張機能はとても便利ですが、入れすぎは良くないです。

 

  • Auto Close Tag
  • Auto Rename Tag
  • Code Spell Checker
  • HTML CSS Support
  • HTML Snippets
  • HTMLHint
  • Trailing Spaces
  • Prettier - Code formatter

 

拡張機能のインストール

それでは実際にインストールを行なっていきます。
左サイドバーの上から5つ目のアイコンをクリックし、
表示されたフォームに上記の拡張機能を入力します。

リストが表示されたら該当の項目をクリックし、
インストール画面が表示されたらインストールボタンをクリックします。

インストールが終了したら再度フォームから拡張機能の名前を入力し、
全てのインストールを終えましょう。

※ インストールが終了したらインストールボタンの箇所に「再読み込みが必要です」と表示されることもあります。
その場合は「再読み込みが必要です」をクリックしてVSCodeの再起動を行いましょう。

デベロッパーツールについて

ここでは、デベロッパーツールというWebサイトを開発する上で便利なツールについて説明していきます。
次章以降で学ぶHTMLやCSSにおいて大活躍するツールですので、しっかり学んでいきましょう。
※ デベロッパーツールを使わないでHTMLやCSSの開発を行う人はほとんどいませんので、

徐々に慣れるようにしましょう。

 

デベロッパーツールとは

デベロッパーツールは、Chromeが提供する機能の１つです。
Webサイトの要素を確認したり、サイトのコードを試しに編集することができます。
HTMLやCSSの文が、そのまま目に見えて動くのでとてもわかりやすく、Webデザインの仕事でもよく使われています。

 

使用方法

Chromeで開いたページ上で右クリックし、［検証］を選択 。
もしくは、ショートカットキーで、
Mac：command⌘ + option + i
Windows：F12 もしくは Ctrl + Shift + i
で開くことができます。

初心者がデベロッパツールを使いこなすのは難しいので、

当サイトではデベロッパーツールの使う方法を少しだけ説明します。

デベロッパールを開き、デベロッパーツールの左上の矢印マークを押すことで

カーソルを当てた箇所のCSSやHTMLを閲覧することができます。

気になるサイトを見かけた歳は是非使って見て下さい。

 

デバッグツールについて

ここでは、デバッグツールというHTMLの文法チェックツールについて説明していきます。
HTMLを記述してブラウザで確認すると思った通りに反映されないということが初めは頻発します。
主なエラー内容はスペルミスや記述漏れといったヒューマンエラーです。
そういったエラーをなくすため、またエラーが起きた際にいち早く対処できるよう
「W3C Markup Validator」というツールを使用します。

使い方はとても簡単です。
まずW3C Markup Validatorにアクセスします。

中央の大きなフォームにHTMLコードを記述します。
試しに下記コードをコピペしてフォームに貼り付けてください。

 html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Webサイト構築</title>
<meta charset='UTF-8'>
</head>
<body>
<h1>デバッグツール検証</h1>
<p>改行して文字を書くタグ</p>
</body>

 

「More Options」からオプションを選べますがデフォルトのままで問題ありません。
フォームに貼り付け後、チェックボタンをクリックしてください。

下記が解析後の結果です。
文法上問題ないと表示されました。

 

次にあえてエラーがあるコードを解析してみます。

h1の閉じタグが抜けています。

「Check」を押して見て貰いましょう。

 

黄色のマーカーでエラー箇所周辺を教えてもらうことができました。

 

こちらの画像からわかることは、

  • エラーが一つでも予測で複数のエラー推測が出力される
  • エラー箇所周辺がハイライトされる

ということです。

このツールはあくまでも推測であり、完璧にエラー箇所を指摘してくれるわけではありません。
ですが、ハイライトされている箇所やエラー文を読むとなんとなく推測は可能です。

HTMLでエラーが出た際はこのツールで解析をかけて、
エラー文やハイライト周辺を確認してエラーを探し出すようにしましょう。

 

-プログラミング
-, , , ,