自分専用のギアを揃える瞬間って少しワクワクするよね。Web制作の世界にもギアがあるんです。
いきなりコードを書き始める前に、まずは自分の手に馴染むギアを知り、揃えることから始めてみるのはいかがでしょうか？プロのクリエイターが毎日どんな道具を使ってWebサイトを組み立てているのか。今回は、そんなWeb制作の裏側を支える道具箱の中身を覗いてみたいと思います。
ブラウザとChrome
今このページを見ているアプリがブラウザです。このアプリ、Webサイトを表示するだけではなく、Web制作でもとっても役に立ちます。
Web制作の現場では、GoogleのChrome（クローム）が標準的に使われています。もちろん、世界中で一番使われているブラウザだからというのもあるけれど、作る側をサポートしてくれる便利な機能がたっぷり詰まっていることも大きな理由です。
プロっぽいデベロッパーツール
プロのツールでも代表的な機能がデベロッパーツール（検証ツール）です。
Chromeで適当なWebページを開き、画面上で右クリックして［検証］を選んでみてください。画面の横や下に、コードがずらっと並んだパネルが出てきます。
これがデベロッパーツールです。今見ているページがどんなHTMLやCSSで構成されているのかを、様々な機能で調べられる機能です。デザインの微調整をしたり、エラーの原因を探ったりするのに便利な機能が揃っています。
エディタでコードを書く
Windowsのメモ帳をテキストエディタと呼びます。テキストの編集用ソフトですね。Windowsのメモ帳などでもコードは書けますが、専用のエディタを使うと、文字に色がついて圧倒的に読みやすくなったり、入力の続きを予測してくれたりします。
現在、世界中で圧倒的な人気を集めているのが、VS Code（Visual Studio Code）です。豊富な拡張機能（プラグイン）を組み合わせて、自分好みのエディタに仕立てられるのが大きな魅力です。
一方で最近は、AIと一緒にコードを書くことを前提としたCursorや、Googleが提供するAntigravityといった、新しい世代の開発環境も注目されています。
どれも無料で使い始めることができます。ただ、AIにコードを書かせたり、エラーを直してもらったりと使い込んでいくと、AIの利用制限にかかり、有料プランが必要になる場合があります。
どれを選ぶか迷うよね。まあ、どれを使っても大丈夫だけど、決めきれない場合は無料で使えるVS Codeから始めてみて。とにかくどれか一つはインストールしておいてね。
CursorはVS Codeをベースに作られたエディタですし、AntigravityもVS Codeと共通する操作感や拡張機能の仕組みを取り入れています。つまり、最初にVS Codeで基本的な操作を覚えておけば、別のエディタに移ったときにも、その経験を活かしやすいというわけです。
まずは無料で、新しい時代の制作スタイルを試してみましょう。
Visual Studio Code
https://code.visualstudio.com/download
Cursor
https://cursor.com/ja
Google Antigravity
https://antigravity.google/
使えるとかっこいい「ターミナル」
映画などでハッカーがカタカタと高速で文字を打ち込んでいる黒い画面を見たことはある？あれがターミナルです。少し近寄りがたく見えるかもしれないけれど、ターミナルはパソコンを操作するための窓口です。ジャンルとしてはマウスと同じといっていいでしょう。
では、なぜわざわざ文字で命令する必要があるのでしょうか？Web制作の世界では、便利なソフトウェアをインストールしたり高度な設定を行ったりと、ターミナルからでないと実行できない操作がたくさんあるからです。もちろんファイルの移動や特殊なプログラムの実行も、慣れてくればマウスを使うよりずっと素早くできるようになります。
最初は見慣れない画面に戸惑うかもしれないけれど、まずはパソコンと文字で直接対話する場所があるということだけ覚えておいてください。
AIに指示してみよう
道具の名前と役割がわかったところで、実際に手を動かしてみましょう。
エディタを使ってファイルを作り、ブラウザのデベロッパーツールで覗いてみる。そんな一連の流れをやってみましょうか。HTMLファイルの作成方法は下記のレッスンでやっているよ。
知ってお得な学習法
AIへの指示はこんな感じかな。
AIに聞こう
「リラックス」という文字を表示する、最小限のWebページのコードを書いてください。
実際のコード例
AIはきっと、こんなコードと手順を教えてくれるはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リラックス</title>
</head>
<body>
<p>リラックス</p>
</body>
</html>実際に試してみよう
さあ、ここからはあなたの出番です。お使いのエディタを開いて、上のコードを貼り付けてください。
メニューの［ファイル］-［保存］を選び、ファイル名を practice.html として保存します。この「.html」という拡張子がとても重要です。
保存したファイルをChromeで開きます。
画面を右クリックして［検証］を選び、デベロッパーツールを開いてみましょう。
画面下に次のようなパネルが表示されていると思います。このパネルを使って、文字の色や文字の内容を変更することができます。
試しに「リラックス」を他のテキストに変更してみましょう。パネルから<p>リラックス</p>という行をダブルクリックすると、文字の部分が選択状態になると思います。ここで好きな言葉を入力すると、画面のテキストも変更した内容に変化します。
このパネルで変更した内容はファイルには反映されません。画面をリロードすると、文字は変更前の「リラックス」に戻ります。
まとめ
今回は、Web制作に必要な道具たちを紹介しました。
- コードを読み解き、画面に映し出すブラウザとデベロッパーツール
- コードを快適に書くためのエディタ
- パソコンと直接対話するターミナル
最初は見慣れない画面に戸惑うかもしれないけれど、使っていくうちに必ず手に馴染んできます。まずはエディタを開いて、一つファイルを作るところから。Web制作の第一歩を、ぜひ楽しんで踏み出してみてくださいね。