sitateru tech blog: Node

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル Node の投稿を表示しています。 すべての投稿を表示
ラベル Node の投稿を表示しています。 すべての投稿を表示

2021年2月26日金曜日

Node.jsのバージョン管理をVoltaに統一したわけ

2月 26, 2021

Node.jsを使っていれば永遠のテーマである(?)バージョン管理ですが、皆さんはどのようにしているでしょうか。

今更ながら、ローカル環境で使用するバージョン管理を原則としてVoltaに統一する運びになったので、その背景などを書いてみたいと思います。



今までは特にバージョン管理ツールを標準で決めておらず、個人やチームでそれぞれ好きなものを使っているような状態でした。
それはそれで大きく困るようなことはなかったのですが、先日多くのリポジトリにざっといくつかの設定・アップデートをして回るようなタスクがあって話が変わりました。

それぞれのリポジトリで使っているNodeのバージョンをどこからか見つけてきて切り替えする作業を1日に何度もやるのはやはり効率が悪いしストレスですね。
バージョン管理ツールを決めて全社標準で設定してもらわないことには、私が 😇 してしまう・・・

ということで何のツールをツールを使うか検討を始めました。
今回の悩みを解消するためには、要件はこんなところです。

  • 設定しておけばカレントディレクトリに応じて自動でNodeのバージョンが切り替わる
  • 設定したバージョンをVCSに記録できる
  • npmのバージョンも記録して自動切換えできる

ちなみに最後の条件はnpmのバージョン7がもう一般リリースされているので出てきたものです。
npm 7 is now generally available! - The GitHub Blog
それまでのバージョン6とは機能面の破壊的変更とlockファイルの変更などがあるので、これも併せてバージョン管理しておきたくなったわけですね。



さて結論ですが、Voltaを使うことにしました。
Volta - The Hassle-Free JavaScript Tool Manager
ある程度メジャーなツールで上の要件を満たすものとなるとVoltaしかなかったためです。

使うのも簡単でいい感じですね。
Voltaの使い方については詳しい記事が各地にあるのでここではあまり書きませんが、例えばNode 14, npm 6を使うなら

$ volta install node@14 npm@6
$ volta pin node@14 npm@6

とすると package.json にバージョンが書き込まれます。

{
  ...
  "volta": {
    "node": "14.15.5",
    "npm": "6.14.11"
  }
}

これをgitにコミットしておけば、自動でこのバージョンのnodeとnpmが実行されるようになります。
全リポジトリで設定されればもうバージョンを気にしなくてよくなるわけですね🤗

Nodeはもちろん、npmやその他nodeツール類のバージョン管理をしっかりやりたいという方はVoltaを一度試してみてはいかがでしょうか💁‍♂️

2019年2月21日木曜日

Alexaスキルを作ろう - 第2回

2月 21, 2019
こんにちは。シタテルでエンジニアをしている熊谷です。

SPECというサービスのバックエンド開発などを行っています。

今回は前回の続きで、Alexaスキルの作成について書いていきます。


今回は、前回作成したスキルから呼び出されるLambdaを作成します。

まずAWSコンソールにログインして、Lambda - 関数の作成に行きます。

そこから「一から作成」、「設計図」などが選べます。

「設計図」でalexaを検索すると、
それぞれのスキルタイプに合わせたsdkが用意されています。
使用したいタイプのsdkがある場合は、それを使用しましょう。

今回はとても単純なスキルを作成したので、「一から作成」を選択します。
いろいろな言語が選べますが、今回はNode.jsで作成しました。

関数を作成すると、シンプルなレスポンスを返す関数が書かれているので、その中身を変更します。

今回作成したスキルは、「言葉を逆さまにする」です。
シンプル...!

コードを記述します。

exports.handler = async (event) => {
  const word = event.request.intent.slots.word.value;
  const response = {
    "version": "1.0",
    "response": {
      "outputSpeech": {
        "type": "PlainText",
        "text": word.split('').reverse().join('')
      },
      "shouldEndSession": false
    },
    "sessionAttributes": {}
  };
  return response;
};

こんな感じになりました。

responseの形式について、詳しくは応答の形式を参考にしてください。
「intent.slots.word」の部分の「word」は前回設定した「スロット名」に対応します。

次にこのLambdaを呼び出すトリガーを設定します。

「トリガーの追加」から、「Alexa Skills Kit」を選択して、スキルID(alexa developer consoleを参照)を設定します。

alexa developer consoleでテストしてみましょう。

前回、スキルの呼び出し名とサンプル発話を設定しました。

テスト画面で、

「<スキルの呼び出し名>を開いて、<サンプル発話>おはよう」と入力すると‥


ちゃんと逆さまにして返してくれましたね!

シンプルなスキルですが動くと面白いと思います。


今回はここまでにします。

次回は実機でのテストとスキルの公開について書ければと思います。

ありがとうございました!

2019年1月24日木曜日

Gulp+EJSでページを量産

1月 24, 2019

こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。

複数の静的ページを作る際に便利なGulp+EJSについて紹介します。

今回やりたかったこと

  • 静的なページを量産
  • 共通パーツはテンプレート化したい

導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

$ npm install gulp gulp-merge-json gulp-ejs gulp-rename fs

ディレクトリ構成

gulpfile.js

// gulpプラグインの読み込み
var gulp = require('gulp');
var merge = require('gulp-merge-json');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var fs = require('fs');

//jsonファイルの結合 ※複数のjsonファイルがなければ不要
gulp.task('json', function () {
  gulp.src('./app/data/origin/**/*.json')
    .pipe(merge({
        fileName: 'pages.json'
    }))
    .pipe(gulp.dest('./app/data'));
});

//設定ファイルの読み込み
const jsonData = './app/data/pages.json';
const json = JSON.parse(fs.readFileSync(jsonData));

// ejsをhtmlへ変換
gulp.task("ejs", function() {
    for (var key in json.pages) {
        var data = json.pages[key];
        data.path = key;
        var layout = data.layout;
        gulp.src("./app/ejs/" + layout + ".ejs")
            .pipe(ejs(data))
            .pipe(rename(key + '.html'))
            .pipe(gulp.dest('./public'));
    }
});

pages.json

{
    "pages": {
        "index": { //出力するhtmlファイル名
            "layout": "index", //使用するejsファイル名
            "title": "タイトル1"
        },
        "hoge/index": {
            "layout": "index",
            "title": "タイトル2"
        }
    }
}

index.json

<% include common/_head %> //includeするejs ファイルを指定
<%= title %> //jsonファイル内でしている要素が入る

実行方法

$ gulp json //jsonファイルの結合が必要な場合
$ gulp ejs

まとめ

ejsではjavascriptが使用できるためループ処理なども可能です。

あまり利用する場面は多くないですが、エンジニアさんに 依頼するほどでもないけど、ぱぱっと複数ページを作る必要があるときに便利です!