What's New Qiita

20190714のNode.jsに関する記事は2件です。

  • 投稿日：2019-07-14T20:39:34+09:00

Nuxt.js + Typescriptの環境をフルスクラッチで作ってみた

どうも、副業フリーランサーの刀根です。今回は個人的にNuxtをいじろうと思ったので、環境構築の内容を記事にしてみました。
意外とフルスクラッチで環境構築している記事が見つからなかったので、参考になれば幸いです。

TL;DR

Nuxt.js + TypeScriptの開発環境を、create-nuxt-appなどのテンプレート生成を利用せずにフルスクラッチで作ってみました。
今回のゴールは、npm run lint でlintをかけられるようになるところまでやっていきます。

先ずは公式のガイドを参考にして作っていく

公式のインストール方法(英語)の下の方に、Starting from scratchという章があるのでその内容に従う。

まずはフォルダを作成し、その中に移動。

mkdir my-project
cd my-project

そして、 npm initでpackage.jsonを生成する。（途中の質問はEnter連打ですっ飛ばしてOK）

その後、scripts内に、nuxtを起動するscriptを設定("dev": "nuxt")

package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}

そしてnuxtをインストール

npm i --save nuxt

公式ドキュメント通り、pages/index.vueを作成

mkdir pages
touch pages/index.vue
index.vue
<template>
  <h1>Hello world!</h1>
</template>

ここまでできたら、一度起動してみる。

npm run dev

localhost:3000にアクセスすれば
スクリーンショット 2019-07-14 19.12.03.png

成功。

Typescript対応

公式のtypescript化方法の通りに進めていく。

まずはパッケージをインストール

npm i -D @nuxt/typescript
npm i ts-node

さらにtsconfig.jsonを作成する。ちなみに中身は空でよく、nuxtを実行した際に勝手に値が入ります。

touch tsconfig.json

さらに、nuxt.config.tsを作成。こちらは中身が空ではダメです。

nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // Type or Press `Ctrl + Space` for autocompletion
}

export default config

ESLintのインストール・設定

引き続きこちらを参考にして進めていく。

まずは、必要なパッケージをインストール

npm install --save-dev eslint @nuxtjs/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser

次に、eslintrc.jsを作成。

eslintrc.js
module.exports = {
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}

その後、scripts内に、lintを走らせるscriptを設定("lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .")

package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", 
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}

Gitの設定

最後に、.gitignoreがないとlintでエラー吐かれてしまうので最低限のgitの設定だけしてしまいましょう。

git init
touch .gitignore
.gitignore
node_modules
.nuxt

以上で設定は終了です。npm run lintでちゃんとlintが動作するかどうか、npm run devでHello worldができるかどうか確かめてみましょう。

もし「書かれている通りにやったのに動かない！」とかその他諸々ありましたら遠慮なくコメントください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T10:27:15+09:00

nodejsプログラムの作成(puppetter)

nodejsプログラムの作成

今回はとあるサイトの情報を定期的にメール送信し、同時にDBに値を保存するプログラムを作成する。nodejsのpuppetterというライブラリを利用して、スクレイピングを行います。

前準備

puppetterをはじめ、このプログラムで利用するモジュールをnpm installでダウンロード

スクレイピングコードを書く

真面目にタグを追っていってもよかったのですが、Puppeteer Recorderというchrome拡張を利用して補助を受けました。

Chrome拡張機能 Puppeteer Recorderの自動操作の使い方と注意点 | iwb.jp

これだけだとコードが冗長になるので、後で手直しは必要でした。

パスワードの扱い

dotenvというnodejsパッケージを利用しました。同ディレクトリの.envフォルダに記載した値を環境変数としてプログラム中で読み込むことが出来ます。もちろん.envはgitで管理せず、リモートリポジトリへのコミットを防ぎます。

require('dotenv').config();

const puppeteer = require('puppeteer');
const USER_ID = process.env.MY_USER_ID;
const PASSWORD = process.env.MY_PASSWORD;

自分でsecret.jsonみたいなファイル作って読み込んでも良かったですが、
こういうのは独自実装せずデファクトスタンダードに倣っておくのがよいです。

メールの送信

SaaSサービスであるSendGridを利用します。SendGridのページより無料版アカウントを取得。アクセスキーが表示されるので利用。SendGridにクイックスタートガイドがあるので、それも参照可。

nodejs用のライブラリがあるので導入する。コードは以下。

const sgMail = require('@sendgrid/mail');

const msg = {
  to: EMAIL,
  from: EMAIL,
  subject: 'Sending with SendGrid is Fun(APIKEY)',
  text: 'and easy to do anywhere, even with Node.js',
  html: '<strong>and easy to do anywhere, even with Node.js</strong>',
};
sgMail.send(msg);

ストレージへの保存

CosmosDBを利用します。以下のリファレンスの通りに進めると分かりやすかったです。

Node.js tutorial for the SQL API for Azure Cosmos DB | Microsoft Docs
ゼロからはじめるAzure(15) AzureのNoSQLデータベース「Cosmos DB」を使ってみよう | マイナビニュース

1点ハマりどころ。リファレンスの通りに進めると、既に手動で作成されているDBに対してアイテム追加をしようとするとエラーとなる。これは、GUIからCosmosDBを作成すると、partition keyを指定する必要があり、partition keyを指定しているDBの場合、アイテム追加時にpartition keyをセットで指定しなければ受け付けられない仕様だから。もしpartition keyを使わないのであれば、チュートリアルの通り、コマンドラインからcosmosdbを作成する必要がある。

今回、partition keyをセットで登録する方法が分からなかったので、partition keyなしのDBで処理を進めた。

Azure Cosmos DB入門（目次） - ryuichi111stdの技術日記

動作確認

ちゃんと動いたようで良かったです。

余談

CosmosDB

勉強のために利用しただけで必須ではないです。今回の私の用途なら、テキストログに吐き出して必要に応じてみるレベルでもよかった。

seleniumを使わない理由

Webスクレイピングや自動テストで有名なphtyonのseleniumがあります。なぜこれではなくpuppetterを使ったかと言うと、今回のスクリプトをServerlessで動かしたく、調査した限りではphtyon + selenium + Headless Chromeよりも、nodejs + puppetterの方が対応されてそうだったからです。簡単に言うと、前者はHeadless Chromeを別でServerlessにアップロードして呼び出す必要があるので、ハマりどころが多そう。後者はpuppetterを導入すれば内部にHeadlessが含まれているし、Serverless自体の対応もphtyonよりjavascriptの方が早そうだったからです。

Serverlessで動作させる

現時点ではできていません。記事だけは読んでます。

ハードルは以下。

  • Serverless毎に多少特徴があり、特徴が分かっていないとハマりどころが多い事
  • Javascript自体の知識が必要な所もあり、その知識がないと余計な所でハマってしまうこと
  • バージョン管理(npm)の知識が必要な所もあり、その知識がないと検証するにあたって時間がかかってしまうこと

さて、私の志向として、始める前になるべくハマりどころを排除してから取り組みたい、というのがあります(誰でもそうか)。そういう意味では普段使っているVSCodeと多少経験のあるAzure Functionの組み合わせでやりたいと思っていましたが、どうやらAzure Functionでは、現時点でHeadless Chromeの実行が制限されている様子です…。てことで、次に試したのがAWS Lambdaなのですが、ファイルのアップロード制限があったりなんやりで、上手く作る事が出来ませんでいた。

てことで、次はGoogle Cloud Functionsを試してみようかな…と思っています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧