WEB 初心者向け 開発環境/ツール

【VSCode】日本語化とHTML+CSS+JavaScript開発環境構築ノウハウ

VSCodeVisual Studio Code)使ってます?

 

無料でプログラミングできるって聞いたからインストールしたものの正直わけわかんないんだけど。みんなこんなの使いこなしてるの?

たしかにインストールした直後は英語表記なので日本語化しておくと良いです。これから試すHTML+CSS+JavaScriptはプラグイン不要ですが、Extension(拡張機能)を入れないとC/C++とかPythonの開発はできないですね。

 

やっぱそうか。初心者にあんまり優しくないかもね。

無料ということもあり手取り足取りというわけにはいきませんけど「VSCode 日本語化」とかで調べると解説記事が見つかりますし、この記事でも日本語化HTML+CSS+JavaScript開発環境を構築しますので、良かったら読んでってください。思ったほど難しくないと思いますよ。

環境

Windows10 Home(64bit)1903

Visual Studio Code 1.44.2

Japanese Language Pack for Visual Studio Code 1.44.2(VSCODEプラグイン)

この記事で解決できること

  • VSCodeのインストール、日本語化、HTML+CSS+JavaScript開発環境構築方法がわかる。

関連記事

【VSCode】日本語化とHTML+CSS+JavaScript開発環境構築ノウハウ

【VSCode】C/C++開発環境構築ノウハウ

【VSCode】テキストでシーケンス図を書いてみよう

【VSCODE】テキストでUMLを書いてみよう

【Sourcetrail】ソースコードを可視化する(VScodeと連携させる)

 

VSCodeって何よ?

Microsoftが開発した無料(オープンソース)のプログラミング用エディタです。特徴は以下の通り。

軽量でサクサク動く。すぐ立ち上がる。
Extension(拡張機能)が豊富。C/C++、Python、JavaScript、などなど。
入力候補の自動表示(インテリセンス)がいい感じ。
デバッガがついてる(WindowsでC言語をデバッグする場合、MinGWのgdb.exeを指定すればステップ実行できる)
コンソール(コマンドプロンプト)がGUI上で使える。これって意外に便利。

インストール手順

①VSCodeを配布しているページに行く

ここを開きます。

≫Download Visual Studio Code

②VSCodeをダウンロード

自分のプラットフォームのインストーラをダウンロード(私はWindows10なので一番左をクリックしました。本記事はWindows前提で書いてます)。

③インストーラを実行

インストーラをダブルクリック。

「同意する」を選択し「次へ」をクリック。

「次へ」をクリック。

「インストール」をクリック。(PATHへの追加がなにげに便利で、あとで紹介しますがCMDプロンプトにcodeと入れてリターン押すとVSCodeが起動します。これ超便利)

インストール中…。

「完了」をクリック。

VSCodeが起動します。

日本語化パックのインストール

①日本語化パックを検索しインストールする。

左端の「Extensions」アイコンを押し、検索ウィンドウに「Japanese Language Pack for Visual Studio Code」と入力しリターン。Microsoftの日本語化パックが見つかるので「Install」をクリック。

再起動が求められるので「Restart Now」をクリック。

再起動後、日本語表記に変わる。

HTML+CSS+JavaScript

①作業フォルダを設定する

メニューから「ファイル」→「フォルダーを開く」をクリックし、例えば「C:\temp\html_css_js」というフォルダを指定します。

②HTML、CSS、JavaScriptのファイルを作成する

メニューから「ファイル」→「新規ファイル」を選択。

「Untitled - 1」というファイルが出来るのでエディタで以下の内容を入力しtest.htmlいうファイル名で保存。

再びメニューから「ファイル」→「新規ファイル」を選択。「Untitled - 1」というファイルが出来るのでエディタで以下の内容を入力しtest.jsいうファイルを名で保存。

再びメニューから「ファイル」→「新規ファイル」を選択。「Untitled - 1」というファイルが出来るのでエディタで以下の内容を入力しtest.cssいうファイルを名で保存。

ここまで進めるとエディタがこんな風になります。

③Live Serverでtest.hmtlを開く

図のようにtest.htmlを右クリックして「Open with Live Server」をクリック。Live Serverとは擬似的なWebサーバーです。

標準ブラウザ(Firefox)が開き、ポップアップ画面が表示され「OK」ボタンをクリックすると続いてWEBページが表示されます。

このようにHTML+CSS+JavaScriptを入力してLive Serverで表示することで、Webページの見た目を適宜チェックすることが出来ます。

 

まとめ

VSCodeの日本語化とHTML+CSS+JavaScriptの環境構築を行いました。この後はHTML+CSS+JavaScriptの入門書などを参考にいろいろなWEBページを作ってみると良いと思います(当ブログでも実験記事を書いていきますので、ぜひ見てって頂けるとありがたいです)。

関連記事

【VSCode】日本語化とHTML+CSS+JavaScript開発環境構築ノウハウ

【VSCode】C/C++開発環境構築ノウハウ

【VSCode】テキストでシーケンス図を書いてみよう

【Sourcetrail】ソースコードを可視化する(VScodeと連携させる)

 

  • この記事を書いた人
  • 最新記事

ペイヴメント

ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。

-WEB, 初心者向け, 開発環境/ツール

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.