BraintreeSDKを利用してPayPal ExpressCheckoutを実装するその12(index.jadeファイルの表示)

2018年3月12日2018年3月16日

その11ではその10までで作成したコードについてのエラーの確認やその修正方法について紹介をしました。これでユーザーがapp.jsにアクセスした場合、index.jsを経由してテンプレートエンジンのjadeを利用したビューファイル(views/index.jade)が表示されることになります。

views/index.jadeファイルの作成

Error: Failed to lookup view “error” in views directory "/Users/myusername/Braintreetest/views"

前回の記事で”localhost:3000″にアクセスすると、「ビューファイルがない」と指摘されてエラーが表示されると言うところで説明を終えました。なので実際にビューファイルを作成してみましょう。

ビューファイルの作成

$ pwd
/Users/myusername/Braintreetest
$ mkdir views
$ cd views
$ touch index.jade

プロジェクトの直下にviewsディレクトリを作成し、さらにその下に”index.jade”ファイルを作成すればOKです。

ビューファイルの表示

作成したビューファイルに簡単なコードを記述して、ブラウザでの表示を確認してみましょう。なおjadeの記述についてはQiitaの記事を参考にしました。

[php]div Hello World from PayPal to Braintree![/php]

index.jadeを保存して”localhost:3000″にアクセスすると、”Hello World from PayPal to Braintree!”が表示されていることが分かります。今回の記事に関するコードは、GitHubに公開しています。ご興味のある方は参考にしてください。

【補足説明】 Node.jsのバージョンアップ

自分はその11までの記事では、Node.jsのv4.3.0を使用していました。ですがv4.3.0を使用していると、index.jadeを作成したあとにアプリケーションを実行しても、「モジュール不足」を指摘されてエラーが発生します。

$ node app
module.js:328
    throw err;
    ^

Error: Cannot find module '/Users/myusername/Braintreetest/views/app'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Function.Module.runMain (module.js:442:10)
    at startup (node.js:136:18)
    at node.js:966:3

「モジュール不足」の解消方法

ではどのように「モジュール不足」によるエラーを回避すれば良いのでしょうか？結論から言うと、モジュールを追加するのではなくNode.jsのバージョンをUPさせる必要があります。

$ npm install -g npm-install-missing
$ npm-install-missing

Google検索をしていると、この2つのコマンドを実行すると「モジュール不足」によるエラーが回避できることになる記事がよくヒットします。

ERROR: npm is known not to run on Node.js v4.3.0
Node.js 4 is supported but the specific version you're running has
a bug known to break npm. Please update to at least 4.7.0 to use this
version of npm. You can find the latest release of Node.js at https://nodejs.org/

ですがv4.3.0の状態で2つのコマンドを実行すると上記のエラーが表示されます。要するに「v4.7.0にバージョンUPしてね！」と言うことです。

Node.jsのバージョンアップ

$ node -v
v4.3.0
$ ndenv install -l
Available versions:
  v0.1.14
  v0.1.15
...
  v4.7.0
  v4.7.1
...
$ ndenv install v4.7.0
$ ndenv global v4.7.0
$ node -v
v4.7.0

Node.jsのバージョンアップ方法は上記の通りです。Node.jsのバージョンを確認した上で、”ndenv“コマンドを用いてv4.7.0をインストールしてmacOS丸ごとv4.7.0を使用するようにNode.jsの使用を切り替えます。