JavaScript勉強会

JavaScriptの学習日記

Webサイト制作【3】 Visual Studio Code準備編

JavaScript学習の一環として、Webサイト制作の練習もやってみます。

今回は、プログラムを書くツールを準備します。

以前用意した「Visual Studio Code」に、PHP用の設定を追加してみます。

 

f:id:jsstudy:20170402110321p:plain

 

用語

 

統合開発環境 - Wikipedia

統合開発環境IDE (Integrated Development Environment) は、ソフトウェアの開発環境。

従来、コンパイラテキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境(多くはGUI)から利用できるようにしたもの。

最近のIDEには、GUIアプリケーション開発のための迅速なプロトタイピング (RAD) が可能なものが多い。

統合開発環境を使うことによって、巨大かつ複雑なソフトウェアでも、作成者に負担をかけることなく開発することが可能になる。

 

サンがJava FXの実例をデモ − @IT

ゴスリング氏は最近のコンパイラや開発環境の進化について触れ、「もうテキストエディタを使ってはいけない。NetBeansを使ってほしい」と語りかけた。

NetBeansは、パフォーマンスチューニングに欠かせないプロファイラや、GUIエディタなどを含む統合開発環境だ。

 

ジェームズ・ゴスリン - Wikipedia

ジェームズ・アーサー・ゴスリン(James Arthur Gosling、1955年5月19日 - )はソフトウェア技術者であり、元サン・マイクロシステムズ社のフェローである。
オブジェクト指向プログラミング言語Javaの生みの親として広く知られている。 

 

Javaを作ったジェームズ・ゴスリン氏は、プログラミングのツールとして、テキストエディターよりもIDEの使用を推奨しています。

テキストエディターでもOKですが、IDEが利用可能な場合は是非活用しましょう。

 

Visual Studio Code

Visual Studio CodeVS Code)は、マイクロソフトが開発している無料のソースコードエディターです。

Windows, Linux, macOS 上で動作し、シンプルなIDEとして使えます。

 

jsstudy.hatenablog.com

 

VS Codeで、PHPを便利に利用するための設定を追加します。

 

PHPの実行ファイルを指定

Visual Studio Codeで、PHPのファイルを編集していたら、以下のような警告文が表示されました。

Cannot validate since no PHP executable is set. Use the setting 'php.validate.executablePath' to configure the PHP executable.

 

検索したら、修正方法が紹介されていました。

teratail.com

 

変更の手順

(※以下の説明は、Visual Studio Code バージョン 1.10.2の場合となります。)

 

(1) VS Codeで、[ファイル] → [基本設定] → [設定] を開きます。

f:id:jsstudy:20170402113242p:plain

 

すると、「settings.json」というVisual Studio Codeの設定ファイルが開きます。

f:id:jsstudy:20170402113928p:plain

 

(2) 上記画面の右側が「ユーザー設定」を追記する部分です。

ユーザー設定の欄に、以下のようなJSONを追記して、保存します。

{
    "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
    "php.validate.enable": true,
}

 

f:id:jsstudy:20170402115623p:plain

 

  • XAMPPの中にあるPHPの実行ファイル(php.exe)の場所を指定
  • バックスラッシュ「\」(日本語キーボードだと半角の「¥」マーク)は、1個だとなぜか動作しないようだったので、2個に重ねました。
  • 「\」はエスケープが必要な特殊記号の扱い?=「\\」に変更

 

エスケープ文字 - Wikipedia

コンピューティングや通信において、エスケープ文字(escape character)とは、それに続く文字について別の解釈をすることを示す文字である。

エスケープ文字は、メタ文字の特定のケースである。

通常、何がエスケープ文字であるか、またはそうでないかは、前後関係に依存する。

 

JavaScriptでは \(バックスラッシュ)をエスケープ文字として使用する。

 

  • JSONの中で「\」はエスケープ文字(特殊記号)として扱われるため「\」の一文字では意味をなさない。
  • 「\」自身を表示したいときは、「\」を「\」でエスケープする=2個重ねて「\\」と書けば、通常の文字としての「\」として表示できる(扱える)。

 

注意深く見ないと、こういう所ではまりますね?(面倒)

 

【追記】 2017年4月10日

Visual Studio Codeの設定ファイル(JSON)で、不足がありました。

(参考)PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting

"php.executablePath"という項目も設定が必要でした。

訂正後の設定内容は、以下のようになります。(一番下の行が追加された)

{
    "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
    "php.validate.enable": true,
    "php.executablePath": "C:\\xampp\\php\\php.exe"
}

【追記】ここまで

 

PHPのコーディングに役立つプラグイン拡張機能)もいろいろあるようなので、調べて便利そうなやつを適当に入れてみましょう

→ visual studio code php - Google 検索

 

code.visualstudio.com

 

などのプラグインが人気のようです。

 

Visual Studio CodePHPの設定ができたら、さっそくプログラミングしてみましょう!

 

 

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)