MomentJS-環境設定

この章では、ローカルコンピューターでMomentJSの作業環境を設定する方法について詳しく学習します。 MomentJSでの作業を開始する前に、ライブラリにアクセスできる必要があります。次の方法のいずれかでそのファイルにアクセスできます-

方法1：ブラウザーでMomentJSファイルを使用する

この方法では、公式WebサイトのMomentJSファイルが必要になり、ブラウザーで直接使用します。

ステップ1

最初のステップとして、MomentJSの公式Webサイトhttps://momentjs.com/[https://momentjs.com]にアクセスします。ここに示すようなホームページがあります-

セットアップ

利用可能な最新のMomentJSファイルを提供するダウンロードオプションがあることを確認してください。ファイルは縮小化の有無にかかわらず使用できることに注意してください。

ステップ2

次に、 script タグ内に moment.js を含めて、MomentJSの操作を開始します。このためには、以下に示すコードを使用することができます-

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

ここに与えられているのは、より良い理解のための実際の例とその出力です-

例

<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

出力

上記のスクリーンショットに示すように、異なるロケールで動作する moment-locale ファイルも利用できます。次に、以下に示すようにスクリプトタグにファイルを追加し、選択したさまざまなロケールで作業します。このためには、以下に示すコードを使用することができます-

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

ここで与えられているのは、モーメントロケールの実用例と、より良い理解のための出力です-

<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

出力

方法2：Node.jsを使用する

この方法を選択する場合は、システムに Node.js および npm がインストールされていることを確認してください。次のコマンドを使用して、MomentJSをインストールできます-

npm install moment

MomentJSが正常にインストールされたら、次の出力を確認できます-

NodeJs

今、MomentJSがNode.jsで正常に動作するかどうかをテストするには、ファイルtest.jsを作成し、次のコードを追加します-

var moment = require('moment');
var a = moment().toString();
console.log(a);

さて、コマンドプロンプトで、以下のスクリーンショットに示すようにコマンドノードtest.jsを実行します-

NodeJSテスト

このコマンドは、* moment（）。toString（）*の出力を表示することに注意してください。

方法3：Bowerを使用する

Bowerは、MomentJSに必要なファイルを取得するもう1つの方法です。次のコマンドを使用して、Bowerを使用してMomentJSをインストールできます-

bower install --save moment

以下のスクリーンショットは、Bowerを使用したMomentJSのインストールを示しています-

バウアーの使用

これらは、MomentJSがインストールするためにBowerからロードされたファイルです。インストールされた瞬間とロケールファイルは、以下の画像に示されています-

Bower MomentJS

Momentjs-environment-setup