プログラミング勉強日記
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
実行結果
