【Meteor】Hello Worldを出力する

2742 ワード
JavaScript プログラミング勉強日記 Meteor 初心者 Node.js JavaScript テキストリンク

プログラミング勉強日記

2021年2月23日
前の記事でNode.jsの3大フレームワークについて取り上げた。今日は、MeteorでHello Worldを表示する方法をまとめる。

Meteorを導入する方法

　Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人はこちらの記事(Windows版)を参考に環境構築してみてください。
　Windowsの場合、Chocolateyを公式サイトからインストールする。

管理者のPowerShell
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
管理者のPowerShell
$ choco install meteor

Hello Worldを出力する

　Meteorでプロジェクトを作成するためにcreateコマンドを使う。作成したいディレクトリの箇所で下記を実行すると、プロジェクト名のディレクトリが作成される。

$ meteor create プロジェクト名

　作成されたディレクトリの中に入ってるHTML,CSS,JSファイルはclientフォルダ内に配置されている。今回は、その中にあるmain.htmlを書きかえてHello Worldを表示する。

client/main.html
<head>
  <title>sample</title>
</head>

<body>
  <h1>Hello World</h1>
  <div id="react-target"></div>
</body>

　プロジェクト名の階層に戻ってmeteorコマンドを実行すると自動的にサーバーが立ち上がる。デフォルトではhttp://localhost:3000にアクセスするとページが表示される。

$ meteor

実行結果