Open7
Deno について調べたこと
Node.js の代わりになりそうな JavaScript ランタイム。
メリット
- TypeScript が直接動く
-
npm install
が不要 -
node_modules
ディレクトリがない - セキュア(コマンド実行時に権限指定が必要)
デメリット
- サブディレクトリを認識できないのでモノリポで使えない
-
.vscode/settings.json
にdeno.config
,deno.enablePaths
を書くと認識される
-
-
deno.lock
の整理 (deno cache --lock-write
) 時にファイル指定が必要 - 初回にパッケージに赤線が引かれる(何か実行すれば解決する)
Tips
Visual Studio Code
deno.json
を置くと Deno プロジェクトとして認識される。
フォーマッタ
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "denoland.vscode-deno"
}
モジュールの管理
deno.json
に imports
を書く。
標準ライブラリは deno add @std/example
すると良さそう。
フレームワーク
ドキュメントに記載がないが deno.json
に imports して使う。
deno.json
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.6.7/",
"$fresh_charts/": "https://deno.land/x/fresh_charts@0.3.1/",
...
}
画像生成
npm パッケージの使用
@types
// @deno-types="npm:@types/express@^4.17"
import express from "npm:express@^4.17";
ヘッドレスブラウザ
Selenium も Puppeteer も動くが Deno Deploy ではドライバーのインストール手段がない…?
Selenium
// @deno-types="npm:@types/selenium-webdriver"
import { Browser, Builder, By } from "npm:selenium-webdriver";
import { Options } from "npm:selenium-webdriver/chrome.js";
export async function fetchTitle(url: string): Promise<string | undefined> {
const options = new Options();
options.addArguments("--headless");
const driver = await new Builder().forBrowser(Browser.CHROME)
.setChromeOptions(options).build();
await driver.navigate().to(url);
const element = await driver.findElement(By.css("h1"));
const title = await element.getText();
await driver.quit();
return title;
}
Deno Deploy
エラーが発生する。
Exception in cron handler example Error: Unable to obtain browser driver.
For more information on how to install drivers see
https://www.selenium.dev/documentation/webdriver/troubleshooting/errors/driver_location/.
Puppeteer
インストール
PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/puppeteer@16.2.0/install.ts
import puppeteer from "https://deno.land/x/puppeteer@16.2.0/mod.ts";
export async function fetchTitle(url: string): Promise<any> {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const element = await page.waitForSelector("h1");
const title = await element?.evaluate((e) => e.textContent);
await browser.close();
return title;
}
Deno Deploy
他のサービスと組み合わせるしかなさそうだが Cloudflare Browser Rendering も Browserless も課金が必要。