JavaScript
HTML5

Visual Studio Code(VS Code)でJavaScriptを使う最低限の環境構築手順

Google検索が悪いのだろうか,なぜか知ってさえいれば出来るが前提問題として重要ということほど全く見つからないか「言葉足らず」で「自分のための覚書き」られていることが多いように感じられる。そして結局答えにたどり着くのはなぜか英語圏になる。せめてリンクくらいは貼れば良いのではないかと思うことが少なくないがこのパターンは非常に多い。なぜ多くの人は公開しながらわざわざ断片にしたがるのかよくわからない。ブログの功罪ということなのだろうか(笑)。ほぼ一息に書いたので失念したか勘違いがあるかもしれないがMarkdownしたのでついでにここに整理しておくことにした(Markdownは確かに速い)。

今回かゆいところをサクっと教えてもらったのは次のページ:

前者はAtomの話題だがVS Codeにも妥当する。が,後者のリンク先で全部解決する。

プログラミングの世界は,どうやらその導入部分である環境構築で挫折させられる傾向が非常に強いらしい。しかし,環境構築というプログラミングの外側の単なる手続問題の情報をもったいぶる風潮はいかがなものかと思う。これはプログラミングブームに入ってから出てきた傾向だ。誰か環境構築系を体系的に端的にマニュアル化「しておいてくれる」べきだ(笑)。

前提

  • Windows環境。他の環境は適宜読み替え。もっとも,射程は自ずとWindowsユーザーになるものと思われる。
  • いうまでもなく,ダウンロードやインストールはそれぞれのプラットフォームであるOS版となる

確認

  1. いろいろなプログラミング言語がある。(まずはここから 笑)
  2. プログラミングはコンピューターでソフトウェアを作って動作させるための様々な形式の命令文やその前提の定義や宣言文の総体である
  3. コンピューターは機械(ハードウェア)を躯体とするが,それをコントロールする機械じゃない部分がソフトウェアであり,その合成された全体をコンピューターという。なお,Appleがコマーシャルで「コンピューターって何?」と何もわからない子供を使って言わせようが,ディスプレイを指でなぞらせる仕組みを講じようが,Macもまた“コンピューター”以外の何者でもない
  4. 中ニの数学の先生あたりがやりそうな「コンピューターは本当は0と1しか理解できないんだよエヘヘ」みたいなベタな説明は本当はあまり何もわからせてくれない。だからいつまでもYahoo知恵袋に「コンピューターがプログラムで動けるのはなぜ?」みたいな疑問が消えない。「じゃ,それ説明してみて! せ,説明??」みたいなCMが訴求するのもそのせいである
  5. 本当は,コンピューターは0と1さえ理解できない。0も1も2進数ということ自体も,人間が勝手に考えた概念である。コンピューターはそもそも何も理解できない,CPUでさえ別にそれを理解しているわけではない。実際のところ,ソフトバンクの犬より何も理解出来ていない。だって機械なんだから(笑)。AIが完成してもこの点は何も変わらないしシンギュラリティも起こらない(笑)。コンピューターは電気のon/offと磁気のN/Sで“仕掛け”に基づいて“動作”しているだけであり,その意味では本当は指人形とあまり変わらない。
  6. そうした工学部門の物理現象はとりあえず無視できる文系の理系偽装または理系の自己負罪拒否特権みたいなのもが「コンピューターは0と1で理解するんだよ」だ。これはそもそも比喩であり,現代のプログラマはこの比喩を大前提としておけば良いことになっている。そもそも専用用紙にパンチングすることを考える必要さえ(ほぼ)一生ない。
  7. この0と1の2進数ベースはすでに一般的な意味でのソフトウェアの領域になる。これが最低水準でありマシン語と言われる。この0と1のセットの組み合わせで人間が機械の動作のパターンを表現することは技術的には一応可能だが,労働問題的にはあまりにも馬鹿げている(笑)。ただ,高水準な言語が開発されるまでは一時それをやってたというのに過ぎない。むしろ,その馬鹿げた労働に耐えられないから2進数をより人間的な言語表現で代替できるように工夫を重ねた。それを繰り返しながらいろんな派生言語を生んだ過程で現代のいろいろな高水準言語と言われる各種のプログラミング言語が生まれた。
  8. 2018年,プログラマは出来ることが増えた分,無駄に忙しくなっている(笑)。出来ることが増えた分,スキルが上がれば上がるほど,より多くやらされている。トランスパイルも覚えめでたく茶柱も立ったし人柱にもなった(笑)。それを促進するために,フレームワークやライブラリといったツール類が無数に生産され,バージョンアップが行われているのである(笑)。だから時々リタイアして田舎でノマドしようとする人も出てくるが,そこには主婦プログラマーみたいな思いがけない競合が待ち構えている場合もあるので油断できない,サイクリングしながらノートパソコンで気楽にノマド生活という構想が頓挫する現実に直面することがある。
  9. こうしたプログラマ側の事情をよそに,特にフレームワーク競争は日々激しさを増していった。フレームワークは最狭義にはテンプレート又はプリセットと言う事ができ,IT版うちのごはん,2分でごはん,なんかちょーだいみたいなものと言える。最広義には統合開発環境(IDE)であると言い得る。また,最狭義のIDEとしてコードエディタを位置づけることもできる
  10. こうした生態系の中で,近年,有償製品だったVisual StudioというIDEにフリーのエディションが出て広く利用されている。これが現在Visual Studio Communityという名称で展開されている。さらに,そのコードエディタのエディションでVisual Studio Codeというフリーウェアが出た。
  11. 近年のAppleコンピュータの追い上げとオープンソース化の浸透過程を通じたLinuxの市民権の拡大に伴い,MicrosoftはWindows及びその関連製品の戦略で大きく舵をとり,事実上サブスクリプション化された。その過程でLinuxにも片足か半身をかけてきた。さらに評判の良いAtom方式も吸収してVisual Studio Code(VS Code)が出来上がってきた,たぶん。だから,結構,VS Codeからこの2つの要素を取り除いたら何も残らない(笑)。そして,この2つの要素が上手く統合し,Microsoftらしく美味しいところだけ混ぜたものになっているので使いやすいものになってしまっている。
  12. ここで,軽くプログラミング的なことも出来るという程度の多くの人に目を移すと,たとえばメモ帳のようなテキストエディタやその他のコードエディタなどを使用してHTML-CSS-JSあたりをそのままベタで多少書けているとする。それは,上述のような高水準プログラミング言語で最低水準の2進数にレバレッジをかけてコンピュータの工学分野にアプローチしているお調子者である。そのお調子者の前に最近,VS Codeというエディタが現れ,そこにはコード補完を含めAtomみたいな感じとターミナルのlinuxのような雰囲気と簡単にプラグインできるエクステンション制がオールインワン状態になっている旧巨人軍か現ソフトバンク的好都合なものが期待通り無料で落ちてきた。さてどうするか,もーカネさえあればバカでも社長と言わんばかりに使うしかないだろう。ここまでくれば後は手順を押さえて使い始めれば良い。あとはメガネの度数が上がるのをゆっくり待つだけだ。日本のプログラミング教育の成否はスマホを持った子供が弐萬圓堂に行列を作る人数で測ることが出来る。

手順

  1. VS Codeをダウンロードし,インストールする
  2. 最初にVCSを起動したとき,「Gitが見つかりません」で始まるメッセージが表示される場合がある。その場合は,素直にそのメッセージに含まれる「Gitのダウンロード」をクリックしてダウンロード及びインストールするか,使い始める - Gitのインストールから辿る。Windowsの場合,いきなりダウンロードが始まっても良ければ http://git-scm.com/download/winをクリックする

  3. Node.jsをダウンロードし,インストールする

超最低限のカスタマイズと動作確認

超最低限のカスタマイズ

これをやらずにES6を使うと次の警告が出る。

[jshint] 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104)

解決法は次の2種類ある。1つはプロジェクトのみを解決し,もう1つはワークフロー全体を解決する。

  1. プロジェクトのみを解決 => これは,プロジェクト(フォルダ)単位で上記の警告が出ないようにする方法であり,言い換えればES6を気兼ねなく使える状態にする解決を,特定のプロジェクト内でのみ行う方法である(2種類ある):

    1. 外部ファイルで解決

      1. プロジェクト内(のルート)に次のファイルを作成する
        • .jshintrc
      2. 上記ファイル内に次のコードを記述する
          {
              "esversion": 6
          } 
      
    2. JSファイルに直接書き込んで解決

      1. ES6で書きたいファイルの冒頭に次のコメントを書く

            /*jshint esversion:6*/
        
        
  2. ワークフロー全体を解決 => これは,VS Code全体でES6を有効にすることで,プロジェクト毎の手当てをしなくても良くする方法である:

    1. ユーザー設定を開く(ファイル > 基本設定 > 設定)
    2. ユーザー設定タブ上部の検索フィールドに次を入力:
      • "jshint.options"
    3. ユーザー設定は,左側に「既定の設定」が表示され,右ペインに「ユーザー設定」の状況が表示されるようになっている。2.を入力することにより既定の設定ペインに次が表示される:

        // The jshint options object to provide args to the jshint command.
        "jshint.options": {}
      
      
    4. 上は,カスタマイズしていないことを意味するので,右ペイン(のユーザー設定)に次をペーストする:

         "jshint.options": {
          "esversion": 6,
         }
      
      

      なお,既存の最後のコードの末尾にカンマを追加しておく

vsc_settings.PNG

上記いずれかの方法でES6をjshintからの警告なしに使用することができるようになる。あとは,必要に応じてエクステンションを追加するなどすると良い。

動作確認

  • 「ファイル > フォルダーを開く」でプロジェクトとして登録するフォルダを選択する
    • 基本的には,1つのワークスペース(開いているエディタ全体)につき,1つのプロジェクトとなる
    • ただし,登録するフォルダの中に実質的に異なるプロジェクトとなるフォルダを置いていれば,事実上Atomでやっているようなツリー構造でのプロジェクト管理も可能と思われる
    • エクスプローラペイン(通常左側)にあるワークスペース欄を右クリックするか,ファイルメニューをクリックすると,「ワークスペースにフォルダーを追加」があるので,ここからフォルダを追加することも出来る。
      • あとは,右クリックして表示されるコンテキストメニューその他のメニューを見れば基本的なことを知るには差し当たって不自由はない
  • 統合されているターミナルの表示及び非表示は,「Ctrl + `」となる

その他のリテラシー

  • VS Codeに関するショートカット
  • エクステンション
  • ターミナルのコマンド
  • Git(主として共同作業に関わる場合。本腰を入れるなら1人でも必須に)
  • 地味に(そして面倒なことに)多少の英語力