～快適な環境で効率UP＆収入アップを狙おう！～
フリーランス、副業で稼ぎたいと思っているみなさん、こんにちは！
「Web制作を始めたいけど、何を準備すればいいの？」と悩んでいませんか？
ここではPCをWeb制作ができる状態にするための3ステップをわかりやすく解説します。専門的な言い方では「環境構築」って言います。
Web制作に必要な超基本ツールの紹介から、コーディングを爆速にするための効率化ツール、最後にプロの案件で必須なツールを紹介！この記事を読めば初心者でもスムーズに制作を始められます！
読んだあとは「これなら簡単そう！」と感じて作業がはかどること間違いなし。参考になったらぜひ他の初心者のためにもSNSで共有してあげてください！
さらに効率を極めたい方には僕が執筆したガイドブックもおすすめ！ぜひ最後までご覧ください！
【レベル1】VSCodeとChromeだけで「基本のWeb制作」スタート！
初心者ならVSCodeとGoogle Chromeがあれば十分です！
VSCodeはコードを書くために必要なコードエディタ、Google Chromeは書いたコードを確認するためのブラウザです。この2つさえあれば、「コードを書く→ブラウザで結果を見る」の基本サイクルを最速で回すことができます！
初心者は環境構築に時間をかけすぎるより手を動かして学ぶことが大切！「とりあえず動く」状態にして学習スピードを最速にしましょう！
ちなみに、コードエディタにもブラウザにもいくつか種類がありますが、最初はこの2つがおすすめなのでぜひ使ってみましょう！
VSCodeのインストール＆日本語化
ダウンロードページにアクセスして、お使いのPCに合わせてダウンロードボタンを押してください。
あとは普段通りインストールを行なってください。
インストールしたら日本語化しておいた方が何かと便利です。次の記事の「基本編｜絶対に入れよう」を参考に設定を行なってください！
Google Chromeのインストール
ダウンロードページにアクセスして中央の「Chromeをダウンロード」ボタンを押しましょう。自動でダウンロードが始まります。
あとは普段通りインストールを行なってください。
これで準備OK！
実際にコードを書いて試してみる
では実際にコードを書く準備をしてみましょう！
初めてVSCodeを開くと「ようこそ」という画面が表示されます。
画面左上のメニューから「ファイル」→「フォルダーを開く」を選択しましょう。
エクスプローラーが開くので、好きなフォルダを選択してください。
そうすると画面左にスペースができます。そこで右クリックをして「新しいファイル」を選択してください（メニューの「ファイル」からでも良いです）。
ファイル名の入力を求められるので、index.htmlとしてください。これで最初のHTMLファイルを書き始められます！
左のファイル名部分を右クリックして「Open In Browser」を押せば、そのファイルがデフォルトのブラウザで開きます。コードの結果を確認するのもバッチリですね！
初心者の皆さんはここまでできればOK！ガンガンコードを書いて学んでいきましょう！
【Lv2】VSCode拡張機能でコーディングが一気に爆速化！
ある程度学習に慣れてきたら、VSCodeの拡張機能を入れて一気に効率UPを狙いましょう！VSCodeといえばこの拡張機能の豊富さも魅力の1つなんです！
正直いうと拡張機能を入れるだけでコーディングの効率は何倍も変わります！
実はすでにおすすめの拡張機能をまとめた記事があります！拡張機能のインストール方法や詳しい使い方はそちらをご覧ください！
ここでは特におすすめなものを簡単に紹介します！
Auto Rename Tag
HTMLタグの開始タグ、閉じタグを同時に変えられる拡張機能です。
リンク：Auto Rename Tag – Visual Studio Marketplace
一度書いたタグを後から変更したい時って結構あるんですよね！あとはコード量が多いと終了タグの変更を忘れることもよくあります。
そんな時はこれを入れておけばOK！開始タグを変えると自動で閉じタグも変わってくれるんです！
これは本当にありがたいので必ず入れておきましょう！
Markuplint
HTMLの構文をチェックし、間違いがあればエラーを出してくれる上に解決方法もある程度教えてくれる神ツールです！
リンク：Markuplint – Visual Studio Marketplace
HTMLに間違い、エラーがあると赤の波線で教えてくれるんです！さらにカーソルを合わせると間違っている理由まで表示してくれます！
Markuplintに従うだけでコードの品質UP！本当にありがたいですね！
【Lv3】Gitで「いつでも過去に戻れる」安心感+プロレベルの環境をゲット！
さて、もうコードを書くのは慣れてきたという方はぜひGit、GitHubを導入してください！Gitを使うと書いたコードの変更履歴を記録することができます。もし何か失敗しても「過去の正常な状態」にすぐ戻せるんです！
最近はGoogleドキュメントなどでも過去のバージョンに戻れる機能がありますよね、あれに似ています。仮にPCが壊れたりデータが消えたりしてもGitで管理していれば大丈夫！これで安心してコードを書けますね。
Git、GitHubの導入方法は次の記事を参考にしてみてください！
ここまでできればプロの開発環境とほぼ同じ！
万が一のミスやトラブルもすぐにリカバリーできるGitは、プロの現場でほぼ間違いなく使われているツール。将来案件を受ける時に「Git使えますか？」って聞かれても「はい！」と言えるようにしておきましょう！
そしてこれが他のコーダーより一歩先に行く大きなポイント！GItのスキルがあれば優良案件を任せてもらいやすくなり、仕事の質や収入アップの可能性が高くなります！
次の一歩へ
ここまでの3ステップで、あなたのPCはもう「Web制作ができる状態」になりました！
- VSCodeとChromeで即スタート
- 最低限のツールで素早くコードを書き、結果を見ながら学ぶ。
- VSCode拡張機能で効率UP
- コード整理やエラーチェックが自動化され、初心者でもプロっぽい作業環境に。
- 短時間で多くの作業がこなせるベースが整います。
- Gitでプロレベルの安心感を手に入れる
- いつでも過去の状態へ戻れるから何が起きてもリカバリーできる安心感。
- プロの案件にもスムーズに参加でき、収入アップのチャンスが広がる。
「これなら自分にもできそう！」と思ったあなた、次はさらに効率を極めて利益倍増を目指しませんか？
僕が書いたガイドブックには、効率化テクニックや裏ワザ的なノウハウがぎっしり詰まっています。
せっかくWeb制作環境が整った今がチャンス。
この一歩で、あなたのWeb制作スキルと収入アップの可能性を一気に引き上げましょう！
コメント