入門!Expressのインストールと基本のまとめさてさて、これまでこのブログではLaravelやVueの記事を多く公開してきましたが、この度「より高速に動くサイト」を開発する可能性が出てきたので、これまで虎視眈々と狙っていたNode.jsのフレームワーク「Express」も少しずつ記事として紹介していけたらな、と考えています。(といってもメインは大好きなLaravelで不動ですが😊)そこで!今回は、まずはExpressをインストールする方法と、さらに、Expressを使う基本的な内容をまとめてみることにしました。皆さんのお役に立てると嬉しいです。合わせて読みたいフォルダを用意するまずExpressをインストールするフォルダをつくります。フォルダ名はお好みで変更してください。Expressをインストールするターミナルで先ほど作成したフォルダに(cdコマンドで)移動し、以下のコマンドを実行してnpmを初期化します。質問されますが、めんどうな場合はEnterキー連打で終了させるか-yをつけて質問をスキップしてください。次にExpressの本体をインストールします。--saveインストールが完了するとフォルダ内は、次のようになります。ウェブサーバー用のコードをつくる続いて、ブラウザからExpressにアクセスできるようにウェブサーバーが起動できるようにしましょう。start」の部分を以下のように書き換えてください。注意:Ubuntuの場合Node.jsのコマンドはnodeではなくnodejsです。nodeで実行したい場合は、以下のコマンドでシンボリックリンクを作っておくといいでしょう。/usr/bin/node続いて、同じフォルダ内に「app.js」を作成し中身を以下のようにします。console.log(`${PORT}番のポートで待機中です...`);});続いて、以下のコマンドを実行してnpmを起動します。startすると、以下のような表示になります。これで、ウェブサーバーの設定は完了です。実際にブラウザから「http://localhost:5000」にアクセスしてみましょう。独自ドメインをつかうもちろんこのまま開発を進めてもいいでしょうが、「localhost:5000」では開発するサイトが増えてくると、どれがどのサイトかわからなくなってしまいます。そこで、今回は「http://express41.test」にアクセスすると、今回作ったExpressアプリが実行できるようにしてみましょう。「/etc/nginx/sites-available/default」を開いて以下のコードを追加して保存します。}}【追記:2020.02.04】IPアドレスを取得するために最後の行を追加しました。これがないと全てローカルからの接続になるので「::ffff:127.0.0.1」になってしまいます。IPアドレスを取得するには以下のようにします。req.connection.remoteAddress;保存したらnginxを再起動してください。nginx次に「express41.test」がローカルに向くようにします。18.04編」に別れます。ご自身の環境に合わせて読み進めてください。10編まず、検索ボックスに「notepad」と入力してメモ帳を表示させます。そのままクリックせず、右クリックをして「管理者として実行」をクリック。確認のポップアップが表示されるので「はい」をクリック。すると(おそらく)何も表示されないので、右下の表示ファイルタイプを「すべてのファイル」に変更し、「hosts」を開く。express41.test」を追加して保存する。以下のコマンドを実行します。/etc/hostsテキストエディタが開くので、127.0.1.1express41.testを追加して保存してください。ブラウザで確かめるでは、ブラウザから「http://express41.test」にアクセスしてみましょう。直接アクセスできる「public」フォルダをつくる例えば、画像やHTML、CSS、(ブラウザ側の)JSファイルに直接アクセスできるようにしてみましょう。今回は以下の画像を使います。(神戸ポートタワー近くに展示されているクリスタル・ピアノです😊)では、まずは「/public/images」フォルダをつくって、そこに「crystal_piano.jpg」を設置します。次に、「app.js」で「public」フォルダに直接アクセスできるよう以下のコードを追加します。console.log(`${PORT}番のポートで待機中です...`);});注意:ここで注意が必要なのが、「app.js」に変更を加えた場合は必ずnpmを再起動しないといけいないということです。「Ctrl+C」などでストップしてもう一度以下のコマンドを実行しないと変更箇所が反映されません。startこれで、「http://express41.test/images/crystal_piano.jpg」にアクセスすると、「public/images/crystal_piano.jpg」の画像が表示されることになります。(URLにはpublicは不要ですので注意してください)データベースにアクセスする今回はexpress41という名前のデータベースをMySQLで用意して、そこからデータを管理できるようにします。以下のコマンドでmysqlのパッケージをインストールしましょう。mysqlインストールが完了したら、MySQLにデータベースを作り、テストとしてusersというテーブルをつくります。utf8mb4_unicode_ciを使っています。テスト用に以下のようなユーザーデータも追加しておきます。続いて、このデータベースにアクセスできるようルートフォルダに「db.js」というファイルを作成し、中身を以下のようにしてください。db;では、「app.js」に戻ってusersテーブルからデータを取得してみましょう。res.send('データが見つかりません。省略この状態で「http://express41.test」にアクセスすると、以下のようにDBデータがJSON形式で表示されることになります。[{"id":1,"name":"太郎","email":"taro@example.com"},(省略)}]テンプレート・エンジンをつかうExpressは多数のテンプレート・エンジンをサポートしていますが、今回はLaravelのBladeに近いmustache.jsを使うことにします。以下のコマンドでパッケージをインストールしてください。--save次に、「app.js」でテンプレート・エンジンの設定をします。省略これで、viewsフォルダの中にある.mstという拡張子がついたファイルがテンプレートとして使えるようになりました。「/views/index.mst」を作成して中身を次のようにしてください。start」を使って再起動してブラウザから見てみましょう。配列をループするmustache.jsで配列をループするには、まず配列をパラメータとしてセットします。5]});そして、テンプレート・ファイルの方で以下のようにするとループすることができます。}}コレクションをループするmustache.jsでオブジェクトが配列としてまとまった、いわゆる「コレクション」をループするには次のようにします。パラメータとしてセットします。]});テンプレートの中でのループはこのようになります。ルートを分割するここまででは、「app.js」内にルートを作って実行してきましたが、開発を進めていく上で、さすがに全てのルートを同じファイル内に書いてしまうと、どこに何があるかが分かりにくくなってしまうので、ルートを分割する方法をご紹介します。「routes」というフォルダをつくり、その中に「users.js」というファイルを作成します。中身は以下のようにしてください。router;続いて、「app.js」で以下のように設定します。require('./routes/users'));では、npmを再起動してブラウザで確認してみましょう。この方法を応用すればミドルウェアを使って、/users階層は要ログインにすることもできます。ちなみに:idの値を取得したい場合は以下のようにすればOKです。req.params.id;});おわりにということで、今回は新たな試みとしてNode.jsのフレームワークExpressを使って基本的な内容をまとめてみました。ちなみに、初めて本格的にExpressを使ってみた雑感ですが、やはり「いかにLaravelが便利機能をたくさん持っているか」を実感しました。いうのも、LaravelだとDBテーブルを管理するマイグレーションが標準搭載していますし、ログイン機能も(最近パッケージとして分離されましたが)最初から存在しています。DBモデル(Eloquent)のようなものがExpressにはないので、これも自前で実装するかパッケージを使う、もしくはSQL文を直に書く必要があります。なると、やはり保守管理や開発スピードを考えるとLaravelの方が優位かなと感じています。(Express初心者なので重要な部分が抜けている可能性は高いですが・・・)また、Node.jsの一番の欠点は「エラーが発生すると、サーバーが落ちる」。これにつきます😫(ただし、この点に関しては解決する方法もあるそうなので、今後掘り下げて調査していこうかと考えています)ただ、やっぱり実行スピードの高速化というのはとても大きな魅力なので、もう少し使ってみようなかなという感じです。皆さんもぜひExpressにチェレンジしてみてくださいね。〜!「遅れましたが、新年あけましておめでとうございます。Log」をよろしくお願いいたします。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。