今回の記事ですが、
中々いいネタが思い出せないので
カレーの作り方（を見つけるアプリ）
を作りました。
釣りタイトルで申し訳ない、Qiita 様 BANしないでくれ...
技術スタック
フレームワークやライブラリーは、カレーに使われている材料の幅広さと同じようで、
近年が話題になっている技術をいくつ採用したいと思います。
- サーバーレス
- SPA
- CSS フレームワーク
せっかくなので、普段使わないライブラリーやサービスの組み合わせでアプリを作りました。
| 技術 | サービス・ライブラリー |
|---|---|
| サーバーレス | Netlify Functions |
| SPA | Svelte |
| CSS フレームワーク | Tailwind CSS |
操作流れ
クックパッドからレシピを取得しようと思ったんですが、残念ながら API というものがなかったそうです。そこで、axios で HTML ページを取得し、cheerio で HTML をパースしてデータをきれいにして JSON で返しました。
（mermaid.js でさくっと作りました、すごい！）
実装
環境構築
こういう組み合わせが結構珍しくて、一番苦労しました。
いろいろ試した結果、このやり方でうまく行きました。
Svelte プロジェクトを新規生成
$ npx degit sveltejs/template random-curry
$ cd random-curry
$ npm install
Netlify Functions を初期化
# まず、パッケージを導入
$ npm install --dev netlify-cli netlify-lambda
で、package.json に npm コマンドを追加：
// package.json
// "build:lambda" と "netlify" と "deploy" を追加
"scripts": {
"build": "rollup -c",
"build:lambda": "netlify-lambda build src/functions",
"dev": "rollup -c -w",
"netlify": "netlify dev",
"deploy": "netlify deploy",
"start": "sirv public"
},
そしてプロジェクトルートに netlify.toml というファイルを新規追加：
# netlify.toml
[build]
publish = "public/"
command = "npm run build && npm run build:lambda"
functions = "lambda"
Tailwind CSS を導入
Tailwind CSS を Svelte に導入するはかなり複雑で、こちら の記事を参考しながら導入しました。簡単に説明すると、
- Tailwind と PostCSS と関連するパッケージを導入
-
rollup.config.jsに PostCSS 処理を追加 -
postcss.config.jsを新規作成して処理を追加 -
npx tailwind initを実行し、tailwind.config.jsを追加 -
src/utils.cssを新規作成し、Tailwind CSS のルールを定義 -
main.jsにimport 'utils.css'行を追加
詳しくはソースコードをご参照ください。
開発環境を起動
$ npm run netlify
これで実行すれば、http://localhost:8888 からサイトが見れます。
ファイル構成
ファイル構成としては、Svelte のプロジェクトとほぼ同じですが、ただ src/functions にサーバーレス関数を定義することを追加しました。
random-curry/
├── lambda/ # lambda 関数のコンパイル先
├── public/ # svelte のコンパイル先
├── src/ # アプリソースコード
│ ├── functions/ # lambda 関数
│ │ └── curry.js # カレーレシピを取得 API はここに書く
│ ├── components/ # svelte コンポーネント
│ ├── App.svelte # svelte ルートコンポーネント
│ └── main.js
├── node_modules/
├── package.json
├── netlify.toml
├── postcss.config.js
├── rollup.config.js
└── tailwind.config.js
ソースコード
ソースコードはそんなに面白くないので、省略します。興味があれば Github リポをご参照ください。
感想（DX など）
Netlify Functions
正直、今回作ったサーバーレス関数は、ブラウザでも実現できますが、、、
AWS Lambda の簡略版を感じ、簡単にサーバーレス関数を作ることできました。尚、メモリが 1GB、実行時間が 10 秒という制限があり、巨大のアプリを作るとしたら少し気になりますね。でもサーバー側での処理が少しであればわざわざサーバーを立ち上げしなく、lambda 関数でいいんじゃないかと思っていました。
Svelte
前に少し触った経験があり、やっぱり他の SPA を比べると「SPA の軽量版」を感じました。簡単なアプリを実装するとき、jQuery か素 JS でやりたくない場合はこれでいいと思いますが、「コンパイルが必要」ことでそんなに気軽に導入できないですね。
Tailwind CSS
Bootstrap とコンセプトが違い、ボタンやカードコンポーネントを用意するこたが一切なく、全部 CSS のクラス（ユーティリティクラス）でコンポーネントを建築することが必要でした。少し面倒な一方、デザインが自分で決めるので「Bootstrap で作られたサイトに見える」ことが避けられますね。また、コンポーネントのデザインする際は class 属性が 2-3 行を使ったことが気になりました。しかし、これで本来コンポーネント化すべき重複している HTML 要素が簡単に見つけ出すのはいいですね。
まとめ
この組み合わせで開発するのはアリと思いますが、特に Svelte と Tailwind CSS の連携は少しでも簡略したいですね。
そして、いいレシピをいくつ見つけ出しましたので、今夜カレーにしようかな。。
最後に、Netlify にデプロイしたので、是非試してみてください！