Catalystを使ってみよう

概要

CatalystというGitHub製のOSSを使ってみる。興味がある方がいればこれをきっかけにあれこれ触ってみて欲しい。

この記事の要点
  • Catalystは何をするものなの?

  • こんな人に向いてそう

  • 使ってみるには?

What is Catalyst ??

github.github.io

Catalyst*1はWeb Components*2での開発を容易にするための機能を提供する小ぶりなライブラリになります。

こんな人に向いていそう

まだ、私も触り始めたばかりなのであくまでも第一印象ですが、下記の人には合いそう。

  • Web Componentsで動的なサイトを作りたい人

  • サーバーサイドのテンプレートの代わりを模索している人(とは言え現状はBKのViewに組み込むのは自前で色々しないと無理そう)

  • jQueryを死んでも書きたくないけど、SPAフレームワークを触るのもイヤな人

公式のIntroduction*3を読めば伝わると思うのですが、jQueryを代替するために開発されたライブラリなので、jQuery使うのはイヤ!でもSPAのフレームワークはちょっとねー、荷が重いと感じる人には合いそう。私が関心を持ったのはStimulusに興味を持った流れで*4

使ってみるには?

Nx CLIで生成できるWeb Components用のひな型を流用する方法を試してみます。

筆者注:まだ書き途中、分かってる人向けに書くと、公式のドキュメントにはビルドに必要なwebpackの設定とかが丁寧にないので、現状はフロントがある程度わかってる人じゃないとそもそもhello worldすらできないというw状態になる。初心者とか慣れてない人にWebpack周りを調べてどうこうしろと言うのはハードルが高すぎるので、一番楽なのはNx CLIのWeb Components向けのひな型を作成し、そこに@github/catalystをインストールして使う方法になりそう(他になんかいい方法があれば教えてください)。ただ、Nx CLIのデフォルトのままだとエラーが出て動かないのでpolyfills.tsにreflect-metadataを追加する必要があった。以下には、Web制作とかバックエンドとかあんまりNode界隈に慣れてない人向けの丁寧な説明を追記する(予定)。

必要なのは?
  • Node.js

  • Nx CLI

Node.jsがインストールできてない人はインストールしましょう。そのうえで、パッケージマネージャであるnpmを使用してNx CLIをインストールしときましょう。

Web Components用のworkspaceを作成