Deno Hello World フロントエンド定例 2022/7/8

こんにちは、フロントエンドチームの谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

Deno Hello World

最近、Denoの動向をzennやtwitterで目にする機会が増えてきた実感があって、
azukiazusaさんの Deno の Web フレームワーク Fresh チュートリアル の記事や
日野澤歓也さん（@kt3k）の Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう の記事の影響で、Denoに入門してみました。

Denoとは？

Node.jsの作者のライアン・ダールが、2018年に開発を開始したサーバサイドJSのランタイムで、2020年にv1.0がリリースされています。
現状、サーバサイドJSのランタイムとして、Node.jsがデファクトスタンダードとなっていますが、
Denoが生み出された理由は、ライアン・ダールが、いくつかNode.jsの設計に後悔している点があり、その後悔を克服する為に新しく立ち上げたプロジェクトになります。
現在は、Deno Land Inc.が設立され、以前よりも活発に開発されている状態になっています。

Node.jsとの違いは？

Node.jsと大きく異なる点は、以下です。

• package.jsonやnode_modulesディレクトリがない
• npm, yarn等のパッケージ管理ツールがない
• API全体が、可能な限りWebブラウザと互換となる様に設計されている
• モジュールシステムが、CommonJSではなく、ES Modules仕様になっている
• TypeScriptがデフォルトでビルトインされている
• Eslint, Prettier, Jest相当のツールもデフォルトでビルトインされている
• ついでに、Tailwind CSSもデフォルトビルトインされている

package.json, node_modules, npm(yarn等) がない？ どういうこと？

Node.jsだと、npmやyarn等でモジュールをinstallして、package.jsonでバージョン管理をしたり、npm scriptsでタスクランナー的な利用をしたりといった事を行うのですが、
Denoだと、モジュールの扱いに関して、そういった思想ではなく、importの記述で、直接urlとバージョンを記述するといった形になっています。

↓こんな感じです。バージョンも直書きになっています。

import { serve } from 'https://deno.land/std@0.139.0/http/server.ts'
import { h, ssr } from 'https://crux.land/api/get/7GrKMy.ts'

そんなことしたら各ファイルにimport書くのめっちゃ面倒じゃん！と思ったのですが、一応公式には、
import mapsやdeps.tsというimportの記述をまとめ、インスタンスをexportする方法も紹介されており、この方式を利用すると、Node.jsをランタイムに利用している場合の開発体験とそこまで差分はなくなるのかなと思いました。

import maps
https://deno.land/manual/linking_to_external_code/import_maps

また、npm scriptsの様なタスクランナー的利用に関してですが、deno taskというデフォルトでビルトインされているタスクランナーがあり、deno.jsonというファイルを作成（結局作るんかい）して以下の様に記述し、deno task [タスク名] といったコマンドで運用することが可能です。

{
  "tasks": {
    "test": "RUST_BACKTRACE=1 deno test --allow-env --allow-read",
    "typecheck": "deno cache mod.ts"
  }
}

参考：https://zenn.dev/uki00a/books/effective-deno/viewer/task-runner

個人的な所感ですが、importのURLを記述するのが面倒に感じており、
そこは、URLを意識せずとも npm install モジュール名 でモジュールインストールが可能なのが、Node.jsの良さなのでは？と思ってしまいます。
内部構造諸々を考慮した結果、import { ◯◯ } from ‘https://◯◯’ に落ち着いたんでしょうね。

TypeScript, ESLint, Prettier, Jestがデフォルトビルトインされている！

Node.jsで開発を行う場合、昨今のフロントエンド開発に必要なTypeScript, Eslint, Prettierがデフォルトではサポートされていないので、それぞれのツールをインストールし、設定ファイルを記述して初めて利用することが出来ますが、
Deno場合は、デフォルトで諸々のツールがビルトインされている為、上記の様なことが必要ありません。
Tailwind CSSもデフォルトでビルトインされている為、簡単にjsx書いてスタイルを適用したいみたいなこともすぐに実現可能です。

↓SSRして、Hello Worldを表示する記述

/** @jsx h */
import { serve } from 'https://deno.land/std@0.139.0/http/server.ts'
import { h, ssr } from 'https://crux.land/api/get/7GrKMy.ts'

const App = () => {
  return (
    <div class="px-8 py-4">
      <h1 class="font-semibold text-2xl">Hello Deno</h1>
      <p class="mt-2 text-gray-500">Welcome to example page!</p>
    </div>
  )
}

serve(() => ssr(() => ))

確かにここまでくると、Deno環境とこのファイルさえあれば、npm installせずとも実行可能なので良いと感じました。

参考記事

https://eh-career.com/engineerhub/entry/2022/06/17/093000
https://zenn.dev/uki00a/books/effective-deno/viewer/task-runner