フロントエンド開発：環境構築と学ぶべき重要なトピック

導入

プリセット環境でウェブ開発を学ぶことから自分のローカル開発環境を作ることへの飛躍は大きいですよ！この記事では、テック業界の専門家マット・ローレンスとマイク・カランが、あなたがプリセット環境から自分のローカルウェブ開発セットアップを作り、雇用可能なデベロッパーになるために必要な学習トピックへの道しるべを提供します！

この記事でカバーするトピック:

プリセット環境から自分のローカルウェブ開発セットアップを作るへの移行
フロントエンドデベロッパーとして学ぶべきこと

プリセット環境から自分のローカルウェブ開発セットアップを作るへの移行

ローカル開発環境の構築
VS Codeエディター
Node JSのインストール
ノードパッケージマネージャー（npm）
ビルドツールとタスクランナー（Webpack、Gulp、Grunt）
CSSプリプロセッサー（Sass）
バージョンコントロール
GitHub
継続的インテグレーションと継続的デプロイメント（CI/CD）への導入

フロントエンドデベロッパーとして学ぶべきこと:

HTML、CSS、JavaScript
コマンドラインインターフェース（CLI）の基本
RESTful APIおよび外部データとの連携への導入
基本的なウェブパフォーマンス最適化手法
テストとデバッグ（ユニットテスト、統合テスト、ブラウザデバッグ）
ウェブサーバーとホスティングの理解
フレームワーク

ローカル開発環境の構築

自分のローカル開発環境を作るなんて、ちょっとしたジェダイの騎士がスターファイターでコルサント上空の戦いに挑むくらい挑戦的よね！

でも心配無用、パダワン！これが「ローカル開発環境」への道です。

フロントエンド開発環境を設定するための必須ツール

Visual Studio Code: 人気の無料コードエディターで、コードの書き込みと整理に使用。
Google Chrome、Mozilla Firefox、その他のブラウザ: ウェブアプリのテスト用。
Node.js と npm: JavaScript実行環境とプロジェクト依存関係を管理するパッケージマネージャー。
Git: 変更を追跡し、プロジェクトの共同作業に使用されるバージョンコントロールシステム。
ターミナル: コマンドの実行やファイルシステムの操作に使用するコマンドラインインターフェース。（VS Code内でアクセス可能）
開発サーバー: ウェブアプリケーションをローカルで提供し、変更のプレビューやテストを容易にするツール。（VS Code内でアクセス可能）

各ツールのセットアップ手順は以下の通りです。

Visual Studio Code

公式Visual Studio Codeウェブサイトを訪問：https://code.visualstudio.com/
あなたのOS（Windows、macOS、Linux）向けのインストーラーをダウンロード。
インストーラーを実行し、表示される指示に従いインストールを完了させる。

Google Chrome、Mozilla Firefox、その他のブラウザ

ブラウザの公式ウェブサイトを訪問（例：https://www.google.com/chrome/ または https://www.mozilla.org/en-US/firefox/new/）。
あなたのOS向けのインストーラーをダウンロード。
インストーラーを実行し、表示される指示に従いインストールを完了させる。

Node.js と npm

公式Node.jsウェブサイトを訪問：https://nodejs.org/en/download/
あなたのOS（Windows、macOS、Linux）向けのインストーラーをダウンロード。
インストーラーを実行し、表示される指示に従いインストールを完了させる。

Git

公式Gitウェブサイトを訪問：https://git-scm.com/downloads
あなたのOS（Windows、macOS、Linux）向けのインストーラーをダウンロード。
インストーラーを実行し、表示される指示に従いインストールを完了させる。

ターミナル

LinuxとmacOSユーザーには、標準のターミナルアプリがプリインストールされています。
Windowsユーザーは、標準のコマンドプロンプト、PowerShell、またはMicrosoft StoreのWindows Terminalやhttps://cmder.app/からCmderなどのターミナルエミュレーターを利用できます。

開発サーバー

Visual Studio Codeを開く。
サイドバーの拡張機能アイコンをクリック。
"Live Server" by Ritwick Deyを検索。
インストールボタンをクリックして拡張機能をインストール。
インストール後、プロジェクトのHTMLファイルを開き、ステータスバーの「Go Live」ボタンをクリックして開発サーバーを開始する。

VS Codeエディター

VS Codeエディター、またはVisual Studio Codeは、Microsoftによって作られた人気のフリーウェアで、ほとんどの開発者がプロジェクトのコードを書く、整理する、編集するために使用しています。

あなたがおそらくfreeCodeCamp、Codepen、Scrimbaなどのサイトでコーディングに慣れていると思います。これらのプラットフォームのコードエディターおよび環境全体はあなたのために事前に設定されていますが、自立的に作業するためにはコードエディターをインストールして環境全体を自分で構築する必要があります。

VS Codeエディターの使い方を学び始めるために、テック業界の専門家ジェシー・ホール（codeSTACKr）が、速く慣れるために必要なすべてをカバーした初心者向けの無料YouTubeプレイリストを用意しました！

codeSTACKr: VS Codeのコツと裏技

Node JSのインストール

JavaScriptのコードはウェブブラウザー内で動作するって知ってましたか？Node.jsはサーバーサイドでJavaScriptのコードを動かす実行環境で、ブラウザーの外でウェブアプリケーションを構築して実行することを可能にします。Node.jsを使うと、アプリケーションのフロントエンドとバックエンドのためにJavaScriptを使ってデータの保存、ユーザーリクエストの処理、ファイルの管理などのタスクを処理できます。

Node.jsはコンピューターにプリインストールされていないため、公式Node.jsウェブサイトからダウンロードしてインストールする必要があります。

ノードパッケージマネージャー（npm）

独学のウェブ開発者として初めてNode Package Managerの概念と機能を理解するのは大変でした。それで、この開発者が日常的に使用している重要なツールは何でしょうか？Node Package Manager、つまりnpmは、モジュールと呼ばれる再利用可能なコードパッケージを簡単にダウンロード、インストールして管理するのを助けるツールです。これは、あなたのプロジェクトに機能を追加するために最初からコードを書かなくても済むようにするために使用されます（まあ、何それって思うかもしれないけど 😅）

心配無用！ジェシカ・チャン（Coder Coder）がNPMが何であり、何のために使用するのかについてすばらしく、わかりやすいビデオを作りました。わかりにくさに頭を悩ます日があった時にこんなビデオがあったら良かったな！

Coder Coder: NPMって何？なぜ必要か？ | 初心者向けチュートリアル

ビルドツールとタスクランナー（Webpack、Gulp、Grunt）

ビルドツールとタスクランナー（Webpack、Gulp、Gruntなど）は、依存関係を管理するためにnpmと共によく使用される有益なアシスタントです。これらは、SassからCSSをコンパイルするなどの繰り返しタスクを自動化し、コードの記述に集中できるようにします。例えば、Sassを作業するとき、GulpのようなタスクランナーはSassファイルの変更を監視して、保存するたびに自動的にCSSに変換できます。これは時間を節約し、CSSが常に最新の変更内容であることを保証します。

この作業がどのように行われるか実際に見たいなら、ジェシカ・チャン（Coder Coder）が書いた詳細な記事を是非チェックしてみてください：初心者向けの超シンプルなGulpチュートリアル

CSSプリプロセッサー（Sass）

では、この記事で何度も言及されているSassとは一体何のことでしょうか？CSSプリプロセッサー、Sassなどは、変数、ネストルール、ミックスインなどの機能を追加することでCSSの能力を拡張するツールです。より整理され、管理しやすいCSSコードを書くことができます。プリプロセッサーは、ブラウザーが理解できる標準のCSSに独自の構文を変換します。

Sassの特徴：CSSを向上させる機能

変数: 再利用とメンテナンスが簡単な値を保存
ネスティング: 階層的にセレクターを整理
ミックスイン: オプションでパラメーターを持つ再利用可能なコードブロック
関数: 計算を実行し、値を返す
条件分岐: if、else-if、elseを使用して条件に基づいてスタイルを適用
ループ: スタイルを生成するためにリストやマップを反復処理
Importとパーシャル: コードを小さく扱いやすいファイルに分割

バージョンコントロール

ちょっとした乗り物になるのでしっかり座って！バージョンコントロールとは、あなたがデベロッパーとしてコードに時間をかけて行った変更を追跡するシステムで、必要なときに前のバージョンに簡単に戻れるように助けてくれるものです（コードの詳細な履歴ログがあるようなもので、変更を保存するたびにスナップショットを撮っています）。特にチームで作業するときに役立ちます。なぜなら、衝突を防ぎ、誰もが最新のコードバージョンで作業していることを保証するからです。最も人気のあるバージョンコントロールシステムはGitで、GitHubやGitLabのようなオンラインプラットフォームと組み合わせて共同作業やリモートストレージに使用されます。

練習を始めるのに素晴らしい場所はhttps://learngitbranching.js.org/です。Learn Git branchingは、ブラウザ内でGitとブランチ管理の基本を視覚的に教えるインタラクティブなウェブアプリです。Gitの概念を実践するレベルを提供し、アクションにフィードバックを与えます。レベルは難易度が上がり、ツールは各レベル後にパフォーマンス統計を表示します。ビジュアルで実践的な方法でGitの基礎を学ぶための無料リソースです！

**い

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/michaellarocca/front-end-development-setting-up-your-environment-and-essential-learning-topics-41am