概要 App Engine に Nodeで作ったバックエンドをデプロイするときにいつも何かしらで詰まるので、チェックリストを備忘録としてまとめました。 1. ポート Nest.jsとかだとデフォルトで3000ポートでリッスンする用になっているが、process.env.PORTでリッスンするようにする。 app.listen(process.env.PORT ?? 3000) 2. スタートコマンド "scripts": { // "start": "nest start", "start": "node dist/main", App Engineでは npm scripts の startコマンドが実行される。このとき、Nest.jsなどデフォルトで設定されているstartコマンドだと、実行できないことが多々ある(App EngineではdevDependenciesはインストールされないなどが原因) 3. DBの接続先 Cloud SQLへPostgreSQLで接続する際には以下のようにする postgresql://user:password@localhost:5432/<データベース名>?host=/cloudsql/<接続名> 接続名はCloudSQLのコンソールから確認できる。プロジェクトID:リージョン:インスタンス名の形式のやつ。 4. Prisma https://qiita.com/kiyoshiro/items/878358e74a1935463b28 こちらを参照

Changelog Reference .at()とは -1を渡すと末尾の要素を、-2を渡すと末尾から2番目の要素を返す、ブラケット[]の拡張。 Array[Array.length - 1] が Array.at(-1)のように書ける。簡単。嬉しい。 去年の11月からTC39 ProcessのStage 3に格上げされ、Chrome 92 および Firefox 90から利用可能となっている。 https://github.com/tc39/proposal-relative-indexing-method その他の提案 もっとシンプルに自由に配列にアクセスしたい、という思いから提案された仕様は他にもある。 ブラケットのスライス表記 元からあるslice()メソッドが分かりにくすぎる！という提案。 PythonやGolang等にある[1:3] [-1:]のような書き方を追加するというもの。 良さそうだけどドラフトになる気配なし… .lastItem .lastIndex その名の通り、最後の要素を指すlastItemと、最後のインデックスを指すlastIndexを追加する というもの。 .at()又はスライス表記のどちらかがStage 3に進めば、提案は破棄という予定だったので消滅。

概要 ホットペッパーAPIを利用して近隣店舗の情報を取得する。 ホットペッパーAPI ホットペッパーAPIとはリクルートが提供するOPENAPI。ホットペッパーとホットペッパーBeautyの2種類のAPIが提供されているが、今回はホットペッパーのAPIを利用していきます。 ※ホットペッパーAPIの公式リファレンス 準備 ホットペッパーAPIを利用するには利用申請が必要となります。 リンクより新規登録し、APIキーを取得してください。申請からAPIキー取得までのリードタイムは約10分程度です。 実装 ライブラリインストール ~/develop/study/node/hotpepper $ yarn add fs xml2json node-fetch ディレクトリ構造 ~/develop/study/node/hotpepper $ tree -I node_modules . ├── hotpepper.js ├── package.json └── yarn.lock 0 directories, 3 files hotpepper.js const fs = require('fs'); const parser = require('xml2json'); const fetch = require('node-fetch'); const API_KEY = 'HOTPEERのAPIキー' /**APIのURL */ const URL = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=' + API_KEY + '&large_area=Z011' /** 非同期処理 */ async function main() { try { const res = await fetch(URL); if (!res.ok) { throw new Error(`${res.status} ${res.statusText}`); } const data = await res.text(); var json = parser.toJson(data); const obj = JSON.parse(json) console.log('xmlns:' +obj.results.xmlns) console.log('店舗名:' +obj.results.shop[0].name) console.log('住所:' +obj.results.shop[0].address) } catch (err) { console.error(err); } } main(); 実行結果 ~/develop/study/node/hotpepper $ node hotpepper.js xmlns:http://webservice.recruit.co.jp/HotPepper/ 店舗名:さーて 四ッ谷店 住所:東京都新宿区四谷１-7-15 山田ビル2F

相対パスで指定すると、実行するディクレトリによって結果が変わってしまう。 なので NodeJS のスクリプトの中でのパス指定は絶対パスを使う必要がある。 結論 __dirname を使う。 __dirname は実行中のファイルへの絶対パスを取得できる環境変数。 __dirname is an environment variable that tells you the absolute path of the directory containing the currently executing file. bin/ |_ index.js src/ のようなディレクトリ構成で、index.js から src/ を指定したい場合、 index.js const srcPath = path.resolve(dirname, '../src') と指定すると、 node bin/index.js でも、 cd bin/ && node index.js でも同じ結果になる。

例えばNextJSのビルド前だったりGatsbyJSのgatsby-node.js(nodeしか使えないページ)、ライブラリが使えない、などの何らかの形で素のJSだけでお手軽にデータを取得したい時があります。 microCMSがそのケースでした。その時に少し工夫が必要だったので知見としてコードを載せてみました。 GETのデフォルトが10件までしか取得できない 通常は以下のようなコードで取得すると思います。 node.js const axios = require('axios').default; require('dotenv').config({ path: '../../.env' }); // package.jsonから動かす場合はpathが通っていると思われるので不要。必要であれば.envのあるファイルの相対パスを記載 const getMicroCMSdata = async() => { const url = `https://hoge.microcms.io/api/v1/hoge`; const apiKeyHeaderOption = { headers : { "X-API-KEY": process.env.MICROCMS_API_KEY }}; return await axios.get(url, apiKeyHeaderOption).then(r => r.data); } console.log(getMicroCMSdata().then(data => console.log(data))); しかし記事データを確認すると10件しか取得できていません。 取得したJSONの中身を確認すると { contents: [ {省略}... ], totalCount: 100, offset: 0, limit: 10 } となるように limit: 10 が返ってきています。確認したところやはり limit: 10 が取得できる件数を示していました。 したがって、この limit の上限を自身のコンテンツの数（totalCount以上）に設定する必要があります。 ただし、面倒であれば url に ?limit=1000 のような大きめの数字でオプションをつけてあげれば済みます。 ですがそれだとちょっと気持ち悪いので先に totalCount を取得してから ?limit=${totalCount} となるようなコードを書きました。 ２回GETさせてみた node.js const axios = require('axios').default; require('dotenv').config({ path: '../../.env' }); // package.jsonから動かす場合はpathが通っていると思われるので不要。必要であれば.envのあるファイルの相対パスを記載 const getMicroCMSdata = async() => { const url = `https://hoge.microcms.io/api/v1/hoge`; const apiKeyHeaderOption = { headers : {"X-API-KEY": process.env.MICROCMS_API_KEY }}; const getUrlOption = (number, url) => { const UrlandOption = url + `?limit=${number}`; return String(UrlandOption); } // microCMSのコンテンツを引っ張ろうとするとデフォルトでlimit=10のオプションがついており全てのコンテンツを引っ張ってこれない。totalCountでコンテンツ総数をチェック const getTotalCountUrl = getUrlOption(0, url), totalCountUrlData = await axios.get(getTotalCountUrl, apiKeyHeaderOption).then(r => r.data), { totalCount } = await totalCountUrlData; // ２回目のGET const getContentUrl = getUrlOption(totalCount, url), contentUrlData = await axios.get(getContentUrl, apiKeyHeaderOption).then(r => r.data), { contents } = await contentUrlData; return contents; } console.log(getMicroCMSdata().then(data => console.log(data))); getUrlOption の関数で引数に応じた ?limit=${number} のオプションをURLに追加させています。 初回のGET時は ?limit=0 にして無駄なリソースを取得しないようにして、２回目のGET時には取得した totalCount の値を渡して実行するようにしました。

DockerでWordPress環境を構築 前提としてDockerとNode.jsがインストールされていること。 目的 WordPressでチーム開発する予定が立ちそうなのでメモを兼ねて書くことにしました。 できること dockerを用いてWordPressの環境を作る。 今回はwp-envを使用して立ち上げる。 順番にやっていくだけで構築できるはずです。 開発環境 Windows10pro Docker version 20.10.7 npm version 7.19.0 node version 14.17.0 pacage.jsonを作成 任意のディレクトリに移動したら npm init pacagenameなどが問われますが特になければエンター連打でOK ディレクトリ内にファイルができていることを確認 wp-envのインストール npm i @wordpress/env --save-dev このコマンドでインストールできる。 node_modulesが作成される。 同時にpacage-lock.json（インストール情報が載ったファイル）というファイルも作成される。 pacage.jsonにコマンドを追記する ・pacage.json元 { "name": "wptest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { // 6行目前後のここに書く "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@wordpress/env": "^4.1.0" } } "wp-env": "wp-env",をscriptsに追記する。 { "name": "wptest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "wp-env": "wp-env", ←ここに追記 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@wordpress/env": "^4.1.0" } } これでnpm run wp-envが使用できるようになる WordPressをダウンロードして立ち上げる。 npm run wp-env start これでDockerが立ち上がってWordPressがダウンロードされて環境が構築される docker desktopを見てmysqlやWordPressのコンテナが起動していることを確認 これでもう起動しているでブラウザで localhost:8888 で検索するとトップページが開く localhost:8888/wp-login.php 検索すると管理ページのログイン画面に飛べます アドレスが admin パスワードが password でログインできます。（初期設定の簡単で危険なアドレスとパスワードなので必要に応じて再設定してください。） 以上で環境構築までは完了です。 日本語設定 サイドバーのsettinggのgeneralからsite languageを日本語に切り替え タイムゾーンを＋９ に設定して保存 wp-envを用いてプラグインやテーマをインストール .wp-env.jsonというファイルをルート直下に作成 プラグインをインストールしてみよう 今回は日本語版に必須なMV Multibyte Patchをインストールします。 ブラウザでMV Multibyte Patchで検索しこのページを開きます(大体検索結果の上の方にあります。) もしくはこちらhttps://ja.wordpress.org/plugins/wp-multibyte-patch/ 開けたらダウンロードボタンのリンクのアドレスをコピーする .wp-env.jsonを開き以下のように記述 { "plugins": [ "ここにインストールしたいプラグインのURLを追記", "2個目のプラグイン", "3個目のプラグイン" ] } 今回の場合はこのような記述になります。 { "plugins": [ "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip" ] } ここまで完了したら以下のコマンドを実行 npm run wp-env start --update 再起動がかかりアップデートされる。 再度ワードプレス管理画面のプラグインを見るとMV Multibyte Patchがインストールされていて有効化もしていることが確認できます。 テーマを作ろう ルート直下に好きなテーマ名のフォルダを作成 今回はsample そのフォルダに最低限のindex.phpとstyle.cssファイルを作成 .wp-env.jsonを開き以下のように記述 { "plugins": [ "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip" ], // ここから追記 "themes": [ "./sample" ←sampleには先ほど作成したフォルダ名を記述 ] 　 // ここまで } ここまで完了したら以下のコマンドを実行 npm run wp-env start --update 再起動がかかりアップデートされる。 管理ページのテーマを見ると追加されていることが分かる。 チーム開発にも使える。 gitなどでこのファイル群を共有して npm install で各環境にwp-envの環境を入れます。 そして npm run wp-env start とすると同じ環境で開発することができる。

DockerでWordPress環境を構築 前提としてDockerとNode.jsがインストールされていること。 目的 WordPressでチーム開発する予定が立ちそうなのでメモを兼ねて書くことにしました。 できること dockerを用いてWordPressの環境を作る。 今回はwp-envを使用して立ち上げる。 順番にやっていくだけで簡単に構築できるはずです。 環境構築が苦手な僕でも10分くらいで完了しました。笑 開発環境 Windows10pro Docker version 20.10.7 npm version 7.19.0 node version 14.17.0 pacage.jsonを作成 任意のディレクトリに移動したら npm init pacagenameなどが問われますが特になければエンター連打でOK ディレクトリ内にファイルができていることを確認 wp-envのインストール npm i @wordpress/env --save-dev このコマンドでインストールできる。 node_modulesが作成される。 同時にpacage-lock.json（インストール情報が載ったファイル）というファイルも作成される。 pacage.jsonにコマンドを追記する ・pacage.json元 { "name": "wptest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { // 6行目前後のここに書く "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@wordpress/env": "^4.1.0" } } "wp-env": "wp-env",をscriptsに追記する。 { "name": "wptest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "wp-env": "wp-env", ←ここに追記 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@wordpress/env": "^4.1.0" } } これでnpm run wp-envが使用できるようになる WordPressをダウンロードして立ち上げる。 npm run wp-env start これでDockerが立ち上がってWordPressがダウンロードされて環境が構築される docker desktopを見てmysqlやWordPressのコンテナが起動していることを確認 これでもう起動しているでブラウザで localhost:8888 で検索するとトップページが開く localhost:8888/wp-login.php 検索すると管理ページのログイン画面に飛べます アドレスが admin パスワードが password でログインできます。（初期設定の簡単で危険なアドレスとパスワードなので必要に応じて再設定してください。） 以上で環境構築までは完了です。 日本語設定 サイドバーのsettinggのgeneralからsite languageを日本語に切り替え タイムゾーンを＋９ に設定して保存 wp-envを用いてプラグインやテーマをインストール .wp-env.jsonというファイルをルート直下に作成 プラグインをインストールしてみよう 今回は日本語版に必須なMV Multibyte Patchをインストールします。 ブラウザでMV Multibyte Patchで検索しこのページを開きます(大体検索結果の上の方にあります。) もしくはこちらhttps://ja.wordpress.org/plugins/wp-multibyte-patch/ 開けたらダウンロードボタンのリンクのアドレスをコピーする .wp-env.jsonを開き以下のように記述 { "plugins": [ "ここにインストールしたいプラグインのURLを追記", "2個目のプラグイン", "3個目のプラグイン" ] } 今回の場合はこのような記述になります。 { "plugins": [ "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip" ] } ここまで完了したら以下のコマンドを実行 npm run wp-env start --update 再起動がかかりアップデートされる。 再度ワードプレス管理画面のプラグインを見るとMV Multibyte Patchがインストールされていて有効化もしていることが確認できます。 テーマを作ろう ルート直下に好きなテーマ名のフォルダを作成 今回はsample そのフォルダに最低限のindex.phpとstyle.cssファイルを作成 .wp-env.jsonを開き以下のように記述 { "plugins": [ "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip" ], // ここから追記 "themes": [ "./sample" ←sampleには先ほど作成したフォルダ名を記述 ] 　 // ここまで } ここまで完了したら以下のコマンドを実行 npm run wp-env start --update 再起動がかかりアップデートされる。 管理ページのテーマを見ると追加されていることが分かる。 チーム開発にも使える。 gitなどでこのファイル群を共有して npm install で各環境にwp-envの環境を入れます。 そして npm run wp-env start とすると同じ環境で開発することができる。

みなさん、いかがお過ごしでしょうか? 前回の Microsoft Teams 開発者プラットフォームに関連する記事では、Tab と Bot、そしてメッセージ拡張機能といった機能を構築する方法を紹介しました。それらのチュートリアルでは Teams アプリ機能の種類や概念についてに焦点をあてるために App Studio を使用し、手動で最小限のローカル環境のみをセットアップする方法をとりました。 今回のチュートリアルでは、最近リリースされた開発者ツールを使っての開発方法を紹介したいと思います。 この VS Code 用の Teams Toolkit (プレビュー版)を使うと複雑な Teams アプリを構築するのに必要な、統合されたアイデンティティ、クラウド ストレージへのアクセス、Microsoft Graph からのデータ取得、および Azure および M365 の他のサービスを使用することが以前よりラクにできるようになります。 さて、開始する前にまず必要な作業環境の準備ができているかチェックしましょう。 ? 始める前に まず、チーム クライアントでカスタム アプリを「サイドロード」できるかどうかを確認します。開始する前にカスタム Teams アプリを有効にするをオンにし、カスタム アプリのアップロードを有効にします。 または、無料の Microsoft 365 開発者プログラムにサインアップして、サンプル データ パックが付属された開発者テナントのサンドボックスを取得してください。 そして最新バージョンの Visual Studio Code を入手してください。(以前のバージョンでは、ツールキットでは動作しない場合があります)。 ? Teams Toolkit のインストール まず、VS Code を起動し、Teams アプリの開発に役立つ拡張機能をインストールしていきましょう。 左側のアクティビティバーの拡張機能アイコンを選択し、Microsoft Teams ツールキットをインストールします。2 つの異なるバージョンのチーム、ツールキットが表示される場合は、このチュートリアルで使う「プレビュー」バージョン 2.x を選択してください。 ? オプションツール Teams ツールキット拡張機能は、必要に応じて以下のツールが自動的にインストールされます。ただし、Linux (WSL を含む) を使用する場合は、次のツールを自分でインストールしてから使用する必要があります。 Azure Functions コア ツール ngrok ? ツールキットで新規プロジェクトの作成をする Microsoft Teams 左側のアクティビティバーのアイコンを選択し　Create New Project をクリックし新しいプロジェクトの作成を開始します。そしてポップアップされるメニューから、Create a new Teams app を選択します。 Select capabilities セクションで機能を選択します。このチュートリアルでは、Bot のみを選択して Tab を選択解除し、OKを選択します。 Bot registration セクションで、Create a new bot registration を選択し、新規ボットの登録をします。 Programming Language セクションで、JavaScript を選択します。 次にワークスペースを選択します。プロジェクトのワークスペース内に新しいフォルダが作成されます。 アプリの名前を入力してください。 設定にはしばらく時間がかかりますのでしばらく待ちましょう。 このプロセスでツールキットが自動的に次のことをしています： M365 テナント内での Azure アクティブ ディレクトリ アプリケーションの登録 アプリ マニフェストの作成 アプリをサポートするために Azure Functions コア ツールを使用して API をローカルで実行 ローカルホストからチームクライアントへのセキュアなトンネルを提供する ngrok のインストールと設定 ? サンプルボットをローカルで実行する プロジェクトを設定したら、テンプレート アプリがどのようなものか見ていきましょう。 まず詳しく見ていく前に、先にこのサンプル アプリをビルドしてローカルで実行しましょう。 キーボードの F5 キーを押してデバッグ モードを有効にします。 もしくは、このようにサイドメニューからデバッグアイコンをクリックします。 アプリが初めてビルドされる際には、すべての依存関係がダウンロードされますので完了までに数分かかる場合があります。 完了すると、チームの Web クライアントが自動的にブラウザー ウィンドウで開かれます。Add をクリックしてローカルにインストールします。 アプリをインストールしたら、 Bot を試してみましょう。 ? ユーザー権限の付与 この Bot 用の show コマンドを試してみると、アプリが次のように情報を表示する許可を求めることがわかります。 続行 (Continue) をクリックすると、認証画面が開きます。 つまり、アプリ (およびサードパーティ製アプリ) は、ユーザーの同意なしではユーザーの情報を自動的に取得することはできないのです。 次のチュートリアルでは、ユーザー情報にアクセスする Microsoft Graph について説明し、チームの実装方法について説明しますので、ご期待? ?? この記事を原文（英語）で読みたいという方は dev.to のリンクからどうぞ！