E-1. VSCodeを使用しよう(extern)

はじめに

アプリ開発やWeb開発におけるエンジニアリングは、「ユーザーの課題をソフトウェアで解決し、使いやすく価値のある体験を提供し、安定した運用によって継続的な信頼を築く」活動です。現代の開発では、フロントエンド・バックエンド・インフラ・データが密接に関わり、全体を見据えた設計と実装が求められます。開発エンジニアとしてプログラミングの知識を持つことで、以下のような価値を発揮できます。

◼️ ユーザー課題を技術で具体的に解決できる
要件を単なる仕様として受け取るのではなく、「なぜ必要か」を理解した上で最適な実装に落とし込めます。UI/UXや処理フローを設計し、ユーザーにとって使いやすいアプリケーションを実現できます。

◼️ 効率的な開発と自動化ができる
開発環境の構築、テスト、デプロイなどを自動化し、開発スピードと品質を両立できます。繰り返し作業を減らし、より重要な設計や改善に時間を使えるようになります。

◼️ 最適な技術選定とアーキテクチャ設計ができる
フレームワークやクラウド、APIなどを適切に選定し、要件に合ったシステム構成を構築できます。将来的な拡張や保守性を考慮した設計が可能になります。

◼️ データを活用した改善ができる
ログやユーザー行動データをもとに、パフォーマンス改善や機能改善を行えます。感覚ではなく、データに基づいた意思決定でプロダクトの価値を高められます。

◼️ 安定した運用と継続的な改善ができる
監視やエラーハンドリング、テストを通じて品質を担保しながら、継続的に機能改善やリファクタリングを行えます。長期的に信頼されるサービスを支える力が身につきます。

◼️ 新しい価値や機能を自ら生み出せる
新技術や外部サービスを取り入れながら、これまでになかった機能や体験を実装できます。単なる開発者ではなく、「プロダクトを成長させるエンジニア」としての役割を担えます。を維持しながら改善を繰り返すことができます。障害対応やリファクタリングを通じて、長期的に信頼されるシステムを構築できます。

フロントエンドのデザイン理解

フロントエンドにおけるデザイン理解は、「見た目を整える」だけでなく、「ユーザーの行動を設計し、プロダクトの価値を最大化するための技術領域」です。WebアプリケーションやLP開発では、UI/UX・パフォーマンス・実装のすべてが密接に関わるため、エンジニア自身がデザイン意図を理解し、実装に落とし込めることが重要になります。

◼️ ユーザー行動を設計するUI実装
フロントエンドエンジニアは、単にデザインカンプを再現するだけでなく、「どのようにユーザーが操作し、どこで意思決定するか」を考えながらUIを実装します。色・レイアウト・タイポグラフィ・CTA配置などを通じて、ユーザーの行動を自然に誘導する設計が求められます。
例：ボタンの色や配置、余白の調整によってクリック率やコンバージョンが変わるため、実装レベルでの微調整とABテストの実行が重要になります。

◼️ HTML/CSSを軸にした再現性と拡張性の高い実装
HTML/CSSの理解は、デザインを正確に再現するだけでなく、保守性・再利用性の高いコンポーネント設計につながります。BEMやCSS設計、モダンなフレームワーク（React/Vueなど）と組み合わせることで、効率的な開発が可能になります。
例：ボタンやフォームをコンポーネント化し、スタイルを一元管理することで、デザイン変更にも柔軟に対応できる構造を作る。

◼️ 開発チームとの精度の高い連携
デザイナーの意図を正しく理解し、エンジニアリング観点で最適な実装に落とし込むことが求められます。デザインと実装のギャップを埋める役割として、仕様のすり合わせや改善提案を行えることが価値になります。
例：デザイン上は成立していても、実装やパフォーマンスに課題がある場合、代替案を提示しながら最適解を導く。

◼️ UXとパフォーマンスの両立
ユーザー体験は見た目だけでなく、表示速度や操作レスポンスにも大きく依存します。フロントエンドエンジニアは、Core Web Vitalsやレンダリング最適化を意識しながらUXを改善します。
例：画像の最適化や遅延読み込み、CSS/JSの軽量化によって表示速度を改善し、離脱率を低減する。

◼️ データに基づいたUI改善（フロントエンド起点の改善）
実装したUIがどのように使われているかを計測し、改善につなげることも重要な役割です。クリックイベントやスクロール、滞在時間などのデータをもとに、UIの最適化を継続的に行います。
例：特定のボタンが押されていない場合、配置や文言を変更して改善するなど、フロントエンドからプロダクト成長に貢献する。

プログラミングを始める

プログラミングやデザインは、「心を動かす仕掛け」を強化するツールです。
最初は難しく感じるかもしれませんが、少しづつ理解していけば、大きな一歩を踏み出せます。あなたが学んだ知識は、現場で「すぐに使える力」となり、クライアントやチームからの信頼を勝ち取る武器になります。さあ、今日から一歩踏み出しましょう！

プログラミングの環境準備

プログラミングを始める際、適切な環境設定をしておくことは、料理を始める前にキッチンを整えるのと同じくらい重要です。環境設定はマーケティングにおける「実行力」と「効率性」を高める基盤となります。

現場での即戦力になる 開発現場では、スピードと正確性が求められます。環境設定を事前に済ませておけば、クライアントの要望（例: 「LPのボタンを今すぐ変更したい」）に迅速に対応でき、プロとしての信頼感を高められます。例: クライアントから「今すぐLPのフォントを変更してテストしたい」と言われたとき、環境が整っていれば数分で対応可能になります。
再現性と一貫性の確保 環境設定を整えることで、同じツールや設定を繰り返し使い、作業の一貫性を保てます。これは、データ分析やLPのA/Bテストなど、マーケティングで結果を比較する際に特に重要です。例: データ分析用のPython環境が整っていれば、毎回同じスクリプトで売上データを処理し、正確な比較が可能になります。
トラブル回避と時間の節約 環境が整っていないと、エラー対応やツールの設定に時間を取られ、マーケティングの戦略立案や提案に使える時間が減ります。事前準備は、こうした無駄を防ぎます。

VSCode　エディターで編集しよう！

・エディターとは、プログラムのファイルを作成・編集するためのアプリケーションソフトウェアです。以下主なエディター一覧

１．Visual Studio Code

２．phpStorm

３．Eclipse

VSCode(Visual Studio Code)をダウンロードページからダウンロードしてインストールしてください。

VSCodeは、いくつものプラグイン（拡張機能のこと。WebブラウザやCMSなどに機能を追加し、使いやすくするための）が用意されています。

・Japanese Language Pack for Visual Studio Code

・日本語へ変更

・ブラウザをプレビュー出来るようにする

VSCode導入プラグインから上記の2つを導入してみましょう。

プラグイン設定方法

ショートカットキーを使用する

PCで操作するツールは、ショートカットキーがあります。キーボードのみで実行が可能なので効率よく作業を進めることができます。

コマンド量が多いのでよく使うキー（「Control」+cなど）や使いやすいキーを参考に利用してください。

ファイルの拡張子

ファイルにはすべて拡張子があります。

.zip(圧縮ファイル)
.txt(テキストファイル)
.jpg(画像ファイル)
.xlsx(エクセルファイル)
.html(HTMLファイル)

参考：拡張子一覧

Windowsでは、デフォルト設定で拡張子が非表示になっているため、設定を変更してください。

参考：拡張子を表示する方法

隠しフォルダ・隠しファイル

隠しファイルとは、そのファイルが保存されているフォルダーを開いても、その中にあることが見ても分からないように非表示に設定されているファイル、あるいはフォルダーのことです。

非表示にする理由としては

通常は触れる必要のないファイルやフォルダーなので非表示にすることで誤って削除や変更をしないようにする
増えたファイルを整理するため古いファイルを非表示にする
セキュリティやプライバシーの観点で第三者から見えなくする

※設定で簡単に再度表示させることもできます。

参考：隠しファイルの設定方法