JavaScript
前回、PythonでGmailからメールを送信する方法を紹介しました。
![](https://3pysci.com/wp-content/uploads/2022/09/gmail1-17-300x162.png)
今回からはWordPressでWebアプリを作りたくなったのでJavaScriptを勉強しようというお話です。
今回はとりあえず開発環境を整えるということをしていきます。
それでは始めていきましょう。
Node.jsのインストール
ます最初に「Node.js」なるものをインストールします。
JavaScriptは元々ブラウザ上でのみ動くプログラムであり、Pythonのようにターミナル上で動かすで動かすことはできない言語なんだそうです。
ただそれではシステム上色々な制約があることから、ブラウザ上に限らずパソコン上で動くようにしたのが「Node.js」とのことです。
とりあえずJavaScriptを勉強するには、まずNode.jsをインストールするようなので、私もインストールしてみます。
まずはこちらのサイトにアクセスします。
「推奨版」と書かれている方をクリックし、ダウンロードします。
推奨版と最新版の何が違うかというと、推奨版は安定して動くことが確認された最新バージョンであり、最新版は実験的に導入された機能を含み、安定性は保証されていないけど、新しい機能を試したい人向けのバージョンのようです。
私の場合は使い始めてもいない素人もいいところなので、安定板を使用します。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-1-1024x489.png)
インストーラーのダウンロードが終わったら、早速ダブルクリックして起動します。
インストーラーが立ち上がるので「続ける」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-2-1024x778.png)
使用許諾契約が表示されるので「続ける」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-3-1024x778.png)
再度同意の確認が表示されるので「同意する」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-4-1024x778.png)
インストール先の選択が出てきますが、とりあえず何も変更せず「続ける」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-5-1024x776.png)
MacのTouchIDかパスワード入力が求められるので入力し、インストールを許可します。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-7.png)
インストールが完了したら「閉じる」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-8-1024x776.png)
親切なことにインストーラーをゴミ箱に入れていいか聞かれますので、「ゴミ箱に入れる」をクリック。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-9-1024x776.png)
これでNode.jsのインストールは完了です。
Visual Studio CodeでJavaScript
Jupyter Notebookは基本的にはPythonの開発環境なので、JavaScriptの開発環境としてはVisual Studio Codeを使用していきます。
Visual Studio Codeをインストールしていない方はこちらの記事をどうぞ。
![](https://3pysci.com/wp-content/uploads/2021/03/vscode1-9-300x230.png)
私の場合はインストールされているので、LauchpadからVisual Studio Codeのアイコンをクリックして起動します。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-10.png)
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-11-1024x599.png)
起動したらメニューバーの「ファイル」の「Open」をクリックします。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-12.png)
JavaScriptのプログラムを保存したいフォルダまで移動し、「開く」をクリックします。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-13-1024x599.png)
次にJavaScriptのプログラムを作成するため、メニューバーの「ファイル」の「New File…」をクリックします。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-14.png)
適当なファイル名を付けていいですが、拡張子は「.js」にします。
これがJavaScriptのプログラムの証です。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-15-1024x599.png)
とりあえず画面に「console.log(“Hello World!”);」とタイプします。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-16-1024x599.png)
メニューバーの「ファイル」の「Save」をクリックしてプログラムを保存します。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-17.png)
画面右上の「▷」をクリックするとプログラムが実行されます。
そして画面の下の方に実行結果が表示されます。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-18-1024x599.png)
今回は「Hello World!」と表示されました。
Jupyter NotebookでJavaScript
先ほどJupyter NotebookはPythonの開発環境なので…と言いましたが、実はJupyter Notebook上でもJavaScriptを使えるようにできたりします。
その方法としてはマジックコマンドを使います。
JavaScript用のマジックコマンドは「%%javascript」で、このマジックコマンドを書いたセルでJavaScriptが使えるようになります。
ただ先ほど使った「console.log()」では結果が表示されないようなので、「alert()」を使ってみます。
%%javascript
alert('Hello World!')
実行結果
![](https://3pysci.com/wp-content/uploads/2022/09/javascript1-19-1024x576.png)
「Hello World!」というホップアップウインドウが出れば成功です。
ただ先ほども述べたようにPythonでいうprintにあたる「console.log」で結果が表示されないので、Visual Studio Codeが使えるのであれば、そちらを使ったほうが良さそうです。
次回はJavaScriptでの出力であるconsole.logとコメントアウトに関して解説してみます。
![](https://3pysci.com/wp-content/uploads/2022/09/javascript2-1-300x182.png)
ではでは今回はこんな感じで。
コメント