Javascript学習のためのエクステンションガイド

JavaScriptは、Web制作におけるバックエンド、Webサイト、Webアプリ、デスクトップアプリさらにモバイルアプリに使用されるプログラミング言語である。Web制作においては、最もよく使われるプログラミング言語といっていいだろう。ちなみにエディタのBracketsはJavaScriptで開発されているのは有名な話である。残念ながらこのエディタは2021年9月にサポートが終了した。

さて、JavaScriptを学習する環境は２つの方法がある。ひとつは、基本的にターミナルから実行する方法。もうひとつは.htmlファイルを作成し、<script>と</script>の間にコードを書いていくかJavaScriptファイルを指定する方法である。出力結果は、ターミナルの場合console.log()、ブラウザへはdocument.write()になる。どちらの方法でも構わないが、Node.jsやVue.jsなどによる開発を考えて、JavaScriptファイルを指定する方法にすることにする。

前記事「プログラミング学習のための環境を作ろう」を読んでおり、学習環境の準備ができていることを前提としている。まだ、読んでいない方は、必ず読んでおいていただきたい。また、JavaScriptを学習するとき、JavaScript単体で学習するケースとHTML/CSSを含めた学習するケースがある。この記事はHTML/CSS学習からこないで、この記事へ直接アクセスされることを考えて「HTML/CSS学習のためのエクステンションガイド」の内容をそのまま含むことにした。したがって「HTML/CSS学習のためのエクステンションガイド」と重複していることをあらかじめお詫びしておく。

なお、記事は前半はJavascriptについて記述し、後半はHTML/CSSのエクステンションについて記述してある。

環境

Linux mint 20.3 MATE Edition
Visual Studio Code 1.66.2
ESLint 2.2.2
Live Server 5.7.5
Live Sass Compiler 3.0.0
CSS Peek 4.2.0
Indent-Rainbow 8.3.1

学習する前に

siteフォルダの中にJavaScript学習用フォルダを作成する。Node.jsとnpmをインストールしていない場合はインストールしておく。Node.jsとnpmをインストールするのは、今後のためと拡張機能のESLintを有効にするためである。ESLintは、eslintがインストールされていないとアクティブにならない。それだけインストールしただけではダメなのである。

エクステンションガイド

ESLint

JavaScriptの文法や書き方などをチェックしてくれる。PythonのFlake8のような機能を持っている。設定が大変なので、難しく感じた方は、この拡張機能をインストールしなくても学習に差し支えない。コードの補完についてはVisual Studio Codeがサポートしている。

使い方

Visual Studio Codeを起動して学習用フォルダを開く。Ctrl+Shift+@でターミナルを開いて、以下のコマンドを入力する。

npm install eslint --save-dev

インストールオプションとして、-gをつけて紹介しているサイトもあるが、必ず、–save-devとする。

※2022/01/17
インストールされるeslintのバージョンは8.7.0である。そのため、以降の手順で行うと、ダウングレードを要求される。そのため、次のようにバージョンを指定してインストールする。

npm install eslint@7.32 –save-dev

フォルダ内に、node_moduleフォルダ、package.json、package-lock.jasonが作成されるので設定をおこなっていく。

設定

最初にESLintの初期化を行う。ターミナルから次のコマンドを入力しよう。区切りを示す/は、Windows10だと￥記号になるかもしれない。

"node_modules/.bin/eslint" --init

ここから質問に答えていく。複数の選択肢がある場合は、上下または左右矢印キーで選択できる。太字が今回選択したもの

１.

? How would you like to use ESLint?
  To check syntax only
　To check syntax and find problems
  To check syntax, find problems, and enforce code style

２.

? What type of modules does your project use?
　JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

３.

? Which framework does your project use?
　React
  Vue.js
  None of these

４.

Does your project use TypeScript? ‣ No / Yes

５.

? Where does your code run?
✔ Browser
　Node

６.

? How would you like to define a style for your project? 
　Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

７．

? Which style guide do you want to follow? …
  Airbnb: https://github.com/airbnb/javascript
　Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

８.

? What format do you want your config file to be in? … (設定ファイルをどの形式にしますか？)
　JavaScript
  YAML
  JSON

選択した内容は以下のとおりである(太字の部分が選択したもの)。

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · YAML

※2022/01/17
最後の質問に答えたあとにプラグインをインストールするかどうか聞かれるので、とりあえずYesを選択してインストールしておく。

eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0
? Would you like to install them now with npm? ‣ No / Yes

作成された.eslintrc.jsonの内容は以下のとおり。もし、ecmaVersionの値が１３になっていたら、２０２１に変更しておく。１３という値は有効ではないからだ。

env:
  browser: true
  es2021: true
extends:
  - standard
parserOptions:
  ecmaVersion: 2021
  sourceType: module
rules: {}

設定ファルが作成されたら、Visual Studio Codeを再起動する。

eslintによるチェック

試しに適当な名前の.jsファイルを作成してみた、ルールはデフォルトのルールのままである。エラーが出ているのは、JavaScript Standard Styleによるもので、禁止されている事項だからである。

エラーのクィック修正

この１行で２箇所がエラーとなっている。シングルクォートとセミコロン問題である。手動で訂正してもいいが、２行目に水色のアイコンが表示されている。このアイコンをクリックして、[Fix all auto-fixable problems]を選択すると修正することができる。便利。

以上で、最低限の設定はできた。厳しいすぎると感じたら、.eslintrc.jsonのruleに項目を追加して、ルールを調整するとよい。

ESLint Rules

デバッグについて

デバッグについて述べる。JavaScriptファイルを開いてブレークポイントを設定する。設定したら、Ctrl+Shift+Pでコマンドパレットを開き、Debug: Open Linkと入力する。次にlocalhost:<ポート番号>を入力する。この方法は、デバッグするために、いちいちDebug: Open Linkから操作することになるが、簡単にデバッグできるのがいいかもしれない。

Live Sass Compiler

この拡張機能は、Sassで記述された.scssファイルを.cssファイルへコンバートしてくれる。CSSはHTMLと較べてファイルが大きくなりやすく、記述も冗長になったり、同じ指定を何回も指定することがあり、コードの保守性や視認性を悪くしている。そのため、修正ミスを起してしまうこともある。できるだけこれらを防ぎ、コーディングのしやすさからSassで記述するのが一般的である。

しかし、Sassで記述するかどうかはCSS設計の段階で決めるとよい。何がなんでもSassで記述しなければならないというわけではなく、CSSのファイルが大きくなればなるほど、Sassの有用性が出てくるので、このあたりを検討して決定するとよいだろう。比較的小さければSassで記述しなくても問題ないのである。

なお、Sassで記述された.scssファイルはそのままで使用することができないために、.cssファイルへコンバートする必要がある。Live Sass Compilerは、.scssファイルを.cssファイルへリアルタイムでコンパイルしてくれる拡張機能のひとつだ。ほかにもあるので、気に入ったものをインストールするとよいだろう。

使い方

とくに使い方というものはない。インストールさえしていれば、.scssファイルまたは.sassファイル保存時に.cssファイルへ勝手にコンパイルされる。ただし、設定がデフォルトのままだと、.scssファイルがある同じ階層に.cssファイルが作られてしまう。そのため、コンバートされた.cssファイルをcssフォルダに入れたい場合は、きちんと設定する必要がある。

設定

Live Sass Compilerの設定内容は非常にシンプルである。

設定内容は次の３項目だ。

設定項目	設定内容
format	expanded \| compact \| compressed \| nested　デフォルトはexpanded
extensionName	.css \| .min.css　デフォルトは.css
savePath	scssファイルがある場所から、cssファイルを保存する場所を相対指定する。デフォルトはnull

表.１ Live Sass Compilerの設定

これらをsettings.jsonに記述する必要がある。実際にやってみよう。

下図のように順番に選択していき、設定アイコンをクリック、表示されるコンテキストメニューから[拡張機能の設定]クリックする。

最初に拡張機能を選択し、２番めにLive Sass Compilerの設定アイコンをクリック、表示されるコンテキストメニューの一番下にある[拡張機能の設定]をクリック — Live Sass Compilerの設定

一番上のLive Sass Compiler > Settings: Autoprefixの[settings.jsonで編集]をクリックして、setting.jsonを開く。

Live Sass Compilerの設定でsetting.jsonで編集をクリックする — settings.jsonで編集

編集画面が開いたら、｛｝の中に次のコードを記述していく。

    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "./css"
    ]

記述し終わったら、保存して編集画面を閉じ、設定画面も閉じて実際に動作するか確認してみよう。

まず[ファイル]→[フォルダを開く]から前記事の「プログラミング学習のための環境を作ろう」で作成しておいたsiteフォルダを開く。次にscssフォルダ内にstyle.scssという空のファイルを作成してSassで記述する。

ul {
  margin-top: 1em;

  li {
    padding:10px;
    color: Green;
  }
}

このファイルを保存すると、cssフォルダ内にstyle.cssとstyle.css.mapの２つのファイルがcssフォルダに作成されてるのがわかるはずだ。

.cssファイルが作成されない

settings.jsonに記述した内容に間違いがないか確認する
Ctrl+Sift+@でターミナルを開き、出力タブをクリックして、変換先を確認する（一度保存しなおす）

Change Detected...
style.scss
--------------------
Generated :
/mnt/callisto/learn/site/css/style.css
/mnt/callisto/learn/site/css/style.css.map
--------------------
Watching...
--------------------

Live Sass CompilerがWatchingモードになっているか確認する（上図の青いバーのところに（見にくいが）Watching…と表示）表示されていない場合は、Ctrl+Shift+Pでパレットを開き、Live Sassと入力すると、一覧が表示されるので、[Live Sass: Watch Sass]をクリックする。

Live Server

Apacheがインストールされていなくても、.htmlファイルに変更（保存）があったとき、デフォルトブラウザを起動して内容を表示してくれる。cssファイルに変更があっても反映される。たとえば、h1のタグの文字色を変更したといった場合である。ただし、PHPには対応していないので注意が必要である。

使い方

Alt+L、Alt+Oと押して起動する。

設定

不要

CSS Peek

いちいち.cssファイルを開かなくとも、.htmlファイル上でCSSもしくはSassファイルの変更が行える。優秀な拡張機能のひとつである。.scssファイルにも対応している。つまり、.scssファイルの内容を変更して保存すると.cssファイルにも反映させることができるということである。なお、設定する項目もあるが、設定しなくとも問題がないはずである。必要になったら設定すればいいだろう。

使い方

Class名をクリックして、次のいずれかの操作をする。

Ctrl:
　Ctrlキーを長押しすると、Class名の下に下線が表示され、適用されているCSSが表示される。

Ctrl+Shift+F10:
　説明ではF12となっているが記述ミスである。適用されているCSSが表示されて編集も行える。

F12:
　CSSファイルを開いて、該当するCSSへカーソルが移動した状態で表示される。

.scssファイルを変更した場合は、[ファイル]→[すべて保存]とすること。.cssファイルがない場合も同じである。そうしないと、反映されない。

CSS PeekでCSSファイルを編集することができる — CSS PeekでCSSを編集

設定

不要

Indent-Rainbow

インデントを色付けしてわかりやすくしてくれる。一見なんでもないような機能だが、タグごとにインデントして記述する場合は、開始タグから終了タグまでをわかりやすくしてくれるので、入れておいて損はない。

使い方

インストールのみ。

Indent-Rainbowを導入すると、インデントを色付けしてくれる — Indent-Rainbowによるインデントの色付け

設定

不要だが、インデントの色を変更したい場合は設定を変更しよう。Ctrl+,で設定画面を開き、検索欄に「indent-rainbow」と入力する。Indent Raibow: Colorsのsetting.jasonで編集をクリックする。下記のコードを任意の位置に記述する。一番外側の{}の外に記述しないこと。

インデントの色を変更してみた。保存したら、Visual Studio Codeを再起動する。ちなみに、1個しか書かない場合は、インデントの色がすべて同じになるので注意が必要である。下記では４つのインデントまで指定している。５つ目は最初の色になる。基本的に４個あたりまで色を指定しておくといいだろう。もとに戻すには、ブロック丸ごと削除する。

,
"indentRainbow.colors": [
        "rgb(252, 175, 62)",
        "rgb(252, 233, 79)",
        "rgb(138, 226, 52)",
        "rgb(114, 159, 207)"
],

以上で、Javascriptの学習環境ができた。

では、よいプログラミングライフを！

関連記事：プログラミング学習のための環境を作ろう

環境