LoginSignup
10
7

More than 3 years have passed since last update.

@k_zoo(ZOO)inobniz

VS Codeで簡単にJava Script, HTMLの統合開発環境を作ってみた(obnizに応用してみた)

Last updated at Posted at 2019-05-14

今回はVS CodeでJava Script, htmlの統合開発環境を簡単に作ってみたのでそれを紹介します．
また，それを用いてIoTを手軽に出来るマイコンボードである「obniz」を用いた統合開発環境を作ったので紹介します．

なぜこれをやったのか

obnizというマイコンボードを使いたかったからです．
obnizは

  • htmlとJava Scriptで実行できる
  • オンラインで書き込む

などの特徴を持ったIoTに特化したマイコンであり，クラウドを活用できるといった特徴から，それに付随したオンラインエディターが整備されています．詳しい仕様はAmazonの説明欄が分かりやすいのでどうぞ．
obniz - 現実をソフトウェア化する
ただ，使ってみて，これはほぼ全てのオンラインエディターにも言えると思いますが，「オンラインエディターマジで使いにくい」と感じました．
AtomとVSCodeを使っている身としては，

  • プラグインを手軽に入れられない
  • Intellisense，オートインデントなどの自動補完が使えない
  • 定義したところにジャンプ出来ない，同じ変数を参照できない
  • Gitなどでのバージョン管理が出来ない(ものによる)

...
等，便利な機能ほど使えなくなった時のフラストレーションがすごい．
そこで発想を転換して，「マイコンの実行開発環境をVS Codeに入れてやろうぜ！」ってなったのがきっかけでした．
幸いobnizはhtmlとJava Scriptで実行できるので，結果的にVS CodeにhtmlとJava Scriptの実行環境を作りました，って話です．

用意するもの

  • VS Code
    • 使ったことない人は僕の記事をチェックしてインストール！(ダイマ)
  • Google Chrome
    • 実行環境として必要ですのでインストールしておきましょう．逆に言えば，Google Chromeで実行できる言語は今回の方法で全て実行出来るようになります！
  • obniz

VS Codeの設定

参考までに図を以下に添付．どこの場所を説明しているのか適宜見るといいと思います．
VS Code説明図

プラグインを入れる

プラグインの入れ方は簡単です．各自調べてください．
必要最低限しか書かないので，自分で気に入ったプラグインがあればどんどん入れて使いやすくしていきましょう．

  • Live Server

    • htmlをライブ編集出来るようになる．正直他のhtmlプラグインでも良いけど，htmlを編集すればブラウザに自動で反映されるので，作業が進めやすくておすすめ．

  • Debugger for Chrome

    • Chromeのデベロッパーツールのデバッガーを使えるようにする．(デバッガー使わない人は入れなくても良い)

html(Java Script)を実行

以下手順です．

  1. [ファイル]→[フォルダーを開く]で，プログラムを入れたいフォルダーを選択．(もう選んでればスキップ)

  2. その後[エクスプローラー]部を右クリックとかでhtmlファイルを作成．ファイル名は"index.html"とかお好きにどうぞ．参考プラグラムを作ったので良ければコピペして下さい．ん？本文ほぼJSじゃないかって？細かいことは良いんだよ！

    index.html
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <script>
        console.log("hello!");
        document.write("hello!", "<br>")
        window.onload = function () {
            console.log("Let's count...");
            document.write("Let's count in console!", "<br>")
            for (var i = 5; i >= 0; i--) {
                console.log(i + ",");
                if (i == 1) console.log("Last!");
            }
            console.log("Conglaturation!!")
            document.write("Conglaturation!!", "<br>")
        }
        console.log("Confirm your install success!")
        document.write("Confirm your install success!", "<br>")
    </script>
</body>

</html>

  3. 「Live Server」を入れていれば下部メニューに[go Live]ボタンがあるのでクリック．htmlファイルが実行される．

これで終わりです．後はhtmlを編集するとブラウザが自動で変更されます．簡単だよね？(威圧)

デバックできるようにする(launch.jsonを設定)

上の「Live Server」でも十分なんだけど，問題が1つ．
ただ実行するだけなので，コンソールが表示されないです．
コンソールがあると，htmlとは別に変数を表示できたり，エラーの個所を表示してくれるので，このデバッグ機能がぜひ欲しい．

因みに，デバッグはプログラムを1行ずつ実行する動作のことです．(暴論)
変数にその時何が入っているか逐一分かるので，どこでエラってるかをしっかり確認出来ます．特に大きいプログラムを作っているときには重宝します．

launch.jsonとは，VS Codeにおいてプログラムをデバッグするときの設定ファイルです．
ただ，VS Codeは[F5]を押すと自動で構成してくれるので，デバッグオプションを付けたい人だけ追加で書く感じ．今回は便利にする為に追加で書きます．以下手順．

  1. [html(Java Script)を実行]の2番目までと同じ．htmlファイルを作る．
  2. 左のサイドバーの[デバック]をクリック(若しくは[Ctrl+Shift+D])して，デバッグ画面を開く．
  3. 歯車アイコン(launch.jsonを開く)ボタンを押して実行環境から[chrome]を選択．launch.jsonが開く．

  4. 既定の文章が生成されてますが，クソなのでlaunch.jsonに以下の文章をコピペ．該当部分を書き換えるだけでもOK．これで現在編集しているファイルを自動で選択してデバックできます．

    launch.json
    {
    "version": "0.2.0",
    "configurations": [
        { //chrome debagger設定
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${file}"
        }
    ]
 }

  5. 後はデバック画面で[launch chrome against localhost]を選択しているのを確認し，[F5]で実行．[F5]で実行すると実行終了でchromeが閉じて便利．実行画面を残したい場合はデバック画面の緑矢印とかで実行して．

  6. ブレークポイントを適当にセットすると実行がそこで止まります．また，実行時に画面上部に現れるメニューに[ステップイン]ってあるので，それを押すと少しずつ実行されるのが分かると思います．

以上！参考プログラムはコンソールとChromeに表示されるようになってます．デバック機能が分かりやすいようにあえて面白い順番で実行されるようにしてるので，興味あれば調べてみてください．

(追記)Chrome debuggerでもっと詳しくデバッグ・開発

VS Codeのデバッグコンソールの画面，正直Chrome debuggerの方が見やすいと思ったので追記．
え，"Chrome debugger結局使うならVS Code要らなくない"って？
いや，やっぱ書きやすさが段違いなんで...
image.png
特に普段Chrome debuggerを使ってた人はこっちの方がおすすめかも．
さっきの
　5.デバック画面で[launch chrome against localhost]を選択しているのを確認し，[F5]で実行．
の時に，出てきたChrome上で[F12]を押すと以下の画面に．
[Console]タブがVS Codeと同じデバッグコンソール画面だけど，他にも[Element]で自分の作った要素を確認出来たり，VS Codeだとリンクされないエラー箇所にリンクがちゃんと飛ぶとかまあまあ便利．
用途によって使い分けよう．
image.png

obnizに応用

まあ正直，obnizはhtmlとJSが動けばどこでも実行できるのが強みだから特にobniz用に設定することはないです．嬉しいね．
参考プログラムをちょろっと書く．実行すると色んな所に[Hello!]って出ると思います．ん？本文ほぼJSじゃ(以下略)

obniz_hello.html
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
</head>

<body>
    <div id="obniz-debug"></div>

    <script>
        //define
        var HL = "hello obniz world!"

        var obniz = new Obniz("")           //obniz ID here
        obniz.onconnect = async function () {   //if obniz connect
            console.log("Connect!")
            obniz.repeat(async function () {    //repeat every 1000msec (Callback)
                obniz.display.clear();
                obniz.display.print(HL);
                document.write(HL, "<br>")
                console.log(HL)
            }, 1000)
        }
    </script>

</body>

</html>

感想

思ったより簡単にできて満足．
エディターがクソで損しているマイコンとかたくさんあるので，全部VS Codeで書けるようになればいいと思うんだけど...すごい人に頑張って欲しい．

今後は環境も整ったので，obnizに関する記事もちょくちょく上げていきたいと思います．
ではまた．

10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
7