## 概要

Denoで簡単なRestAPIを実装して <a href="https://deno.com/deploy" target="_blank">Deno Deploy</a> でデプロイするところまでやってみました。

リポジトリ: <a href="https://github.com/t-shiratori/hello-deno-rest-api" target="_blank">`https://github.com/t-shiratori/hello-deno-rest-api`</a>

![hello deno rest api](//images.ctfassets.net/8dbw0kedp55x/AliQgARS69GjIrFc4jydw/0881557dcf0315e45f67a3edff26a6ac/____________________________2022-08-14_12.28.05.png)

## 使用したライブラリやツール

- HTTPミドルウェアフレームワーク → <a href="https://github.com/oakserver/oak" target="_blank">oak</a>
- DB → <a href="https://app.supabase.com/" target="_blank">supabase</a>
- タスクランナー → <a href="https://velociraptor.run/" target="_blank">velociraptor</a>
- サーバー自動リスタート → <a href="https://github.com/denosaurs/denon" target="_blank">denon</a>

## VSCodeでDenoを使う際に入れると便利なプラグイン  
<a href="https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno" target="_blank">Deno - Visual Studio Marketplace</a>

- クイックフィックス、ホバーカード、インテリセンスなどを含む、JavaScriptとTypeScriptのタイプチェック。
- インストールしたDenoCLIのバージョンと統合し、エディターとDenoCLIの間に整合性があることを確認します。
- Deno CLIのモジュール解決戦略に沿ったモジュールの解決により、DenoCLIのキャッシュにリモートモジュールをキャッシュできます。
- インライン診断やホバーカードなど、DenoCLIのリンティング機能への統合。
- DenoCLIのフォーマット機能への統合。
- DenoCLIで使用されるインポートマップとTypeScript構成ファイルの指定を許可します。
- インポートの自動完了。
- ワークスペースフォルダの構成。
- コードレンズのテスト。
- DenoCLIのタスクを提供します。

インポートモジュールが解決され型定義もちゃんと表示されるようになります。

Denoで簡単なRestAPIの実装をやってみました

Reactで下までスクロールしたら次の分を取得して表示するのを <a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank">IntersectionObserver</a> を使ってやってみました。

IntersectionObserverに関する説明はこちらの記事がわかりやすかったです。  
<a href="https://ics.media/entry/190902/" target="_blank">JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA</a>

<iframe src="https://codesandbox.io/embed/infinite-scroll-react-intersectionobserver-lazy-load-n61ts0?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="infinite-scroll-react-IntersectionObserver(lazy load)"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

ReactとIntersectionObserverで無限スクロール（遅延読み込み）をやってみました

## はじめに
[Generics（ジェネリクス）](https://www.typescriptlang.org/docs/handbook/2/generics.html)は宣言する場所によって型がバインドされるタイミングとスコープが変わります。毎回どっちがどっちか忘れてしまうので備忘録です。

## シグネチャの先頭にジェネリクスの宣言を書く

- 関数呼び出し時にジェネリクスに型がバインドされる
- 型推論が働く
- ジェネリクスのスコープは個々のシグネチャに限られる

```ts
type InferenceConverter = <T>(list: T[], operator: (item: T) => T) => T[];
```
```ts
const inferenceConverter: InferenceConverter = (list, operator) =>
  list.map((item) => operator(item));

const result1 = inferenceConverter([1, 2, 3], (item) => item * 2);
const result2 = inferenceConverter(
  ["a", "b", "c"],
  (item) => `prefix-${item}`
);
```

## Type名の後ろにジェネリクスの宣言を書く

- 関数の定義時にジェネリクスに型がバインドされる
- 関数の定義時にジェネリクスに渡す型を指定する必要がある
- ジェネリクスのスコープは型全体に及ぶ

```ts
type DeclarationConverter<T> = (list: T[], operator: (item: T) => T) => T[];
```
```ts
const numberConverter: DeclarationConverter<number> = (list, operator) =>
  list.map((item) => operator(item));
const stringConverter: DeclarationConverter<string> = (list, operator) =>
  list.map((item) => operator(item));

const result1 = numberConverter([1, 2, 3], (item) => item * 2);
const result2 = stringConverter(
  ["a", "b", "c"],
  (item) => `prefix-${item}`
);
```

## 参考文献
[プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049/ref=sr_1_4?crid=1FKCUMJ9EPR9A&keywords=typescript&qid=1657548681&s=books&sprefix=typesc%2Cstripbooks%2C1161&sr=1-4)


Typescriptのジェネリクスがバインドするタイミングとスコープ

## PCのスペック

MacBook Pro 14 2021
| OS     | チップ     |
| ---------- | ---------- |
| macOS Monterey 12.0.1       | Apple M1 Pro       |

## Flutter SDK　をダウンロード

以下のページの「Get the Flutter SDK」にある「flutter_macos_2.8.1-stable.zip」をクリックしてダウンロードします。

[macOS install | Flutter](https://docs.flutter.dev/get-started/install/macos#get-sdk)

![Flutter Mac Download Page](//images.ctfassets.net/8dbw0kedp55x/1TbB3yFizXWCMmXqigsEN1/98da3c1cea1f8ce5b3681ebc3d053e77/____________________________2022-01-03_12.11.22.png)

## ディレクトリの準備
今回は以下のディレクトリを作りました。  
> `/Users/[ユーザー名]/Development/sdk` 

解凍したファイルを上記のディレクトリに格納します。 
> `/Users/[ユーザー名]/Development/sdk/flutter`

## パスを通す
「`~/.zshrc`」 を開きます。  
以下のコマンドを追記して保存します。
```bash
export PATH="$PATH:/Users/[ユーザー名]/Development/sdk/flutter/bin”
```

変更を反映します。
```bash
source ~/.zshrc
```

シェルを再起動します。
```bash
exec $SHELL -l
```

パスが通っているか確認します。
```bash
which flutter
```

以下のように出力されたらパスが通ってます。    
```bash
/Users/[ユーザー名]/Development/sdk/flutter/bin/flutter
```

Flutter のコマンドが使えるかどうか試してみます。  
```bash
flutter --version
```

しばらく待つと以下の内容が出力されました。よくわからないですが、実行結果が出るまでかなり時間がかかりました。初回実行は何か読み込んだりして時間がかかるのかもしれないです。

```bash
~ % flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (13 days ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝
```

## 試しにプロジェクトを作ってみる
以下を実行します。
```bash
flutter create helloworld
```

```bash
~ % flutter create helloworld
Running "flutter pub get" in flutter_tools...                      10.0s
Creating project helloworld...
  helloworld/test/widget_test.dart (created)
  helloworld/pubspec.yaml (created)
  helloworld/README.md (created)
  helloworld/lib/main.dart (created)
  helloworld/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  helloworld/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  helloworld/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  helloworld/ios/Runner/Info.plist (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  helloworld/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png (created)
  helloworld/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png (created)
  helloworld/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  helloworld/ios/Runner/Base.lproj/Main.storyboard (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  helloworld/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  helloworld/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  helloworld/ios/Flutter/Debug.xcconfig (created)
  helloworld/ios/Flutter/Release.xcconfig (created)
  helloworld/ios/Flutter/AppFrameworkInfo.plist (created)
  helloworld/ios/.gitignore (created)
  helloworld/helloworld.iml (created)
  helloworld/.gitignore (created)
  helloworld/web/favicon.png (created)
  helloworld/web/index.html (created)
  helloworld/web/manifest.json (created)
  helloworld/web/icons/Icon-maskable-512.png (created)
  helloworld/web/icons/Icon-192.png (created)
  helloworld/web/icons/Icon-maskable-192.png (created)
  helloworld/web/icons/Icon-512.png (created)
  helloworld/.metadata (created)
  helloworld/android/app/src/profile/AndroidManifest.xml (created)
  helloworld/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/drawable/launch_background.xml (created)
  helloworld/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/res/values-night/styles.xml (created)
  helloworld/android/app/src/main/res/values/styles.xml (created)
  helloworld/android/app/src/main/res/drawable-v21/launch_background.xml (created)
  helloworld/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  helloworld/android/app/src/main/AndroidManifest.xml (created)
  helloworld/android/app/src/debug/AndroidManifest.xml (created)
  helloworld/android/gradle/wrapper/gradle-wrapper.properties (created)
  helloworld/android/gradle.properties (created)
  helloworld/android/.gitignore (created)
  helloworld/android/settings.gradle (created)
  helloworld/android/app/build.gradle (created)
  helloworld/android/app/src/main/kotlin/com/example/helloworld/MainActivity.kt (created)
  helloworld/android/build.gradle (created)
  helloworld/android/helloworld_android.iml (created)
  helloworld/ios/Runner/Runner-Bridging-Header.h (created)
  helloworld/ios/Runner/AppDelegate.swift (created)
  helloworld/ios/Runner.xcodeproj/project.pbxproj (created)
  helloworld/analysis_options.yaml (created)
  helloworld/.idea/runConfigurations/main_dart.xml (created)
  helloworld/.idea/libraries/Dart_SDK.xml (created)
  helloworld/.idea/libraries/KotlinJavaRuntime.xml (created)
  helloworld/.idea/modules.xml (created)
  helloworld/.idea/workspace.xml (created)
Running "flutter pub get" in helloworld...                       1,871ms
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd helloworld
  $ flutter run

Your application code is in helloworld/lib/main.dart.
```

プロジェクトのディレクトリ移動します。
```bash
cd helloworld
```

起動します。
```bash
flutter run
```

ブラウザで以下の画面が開けば成功です。

![Flutter Hello World](//images.ctfassets.net/8dbw0kedp55x/NMsK87C8Eql9AfsSnBXsS/0f203621b7292a42ad95db9a1eb900b1/____________________________2021-12-29_14.42.12.png)


M1 Mac で Flutter のハローワールドをやってみました

このブログでContentfulからマークダウンで書いた記事をHtmlに変換してシンタックスハイライトもつけて表示させていますが、unifiedを使ってやってみたのでその備忘録です。

## unifiedとは
[unifiedjs/unified: ☔️ interface for parsing, inspecting, transforming, and serializing content through syntax trees](https://github.com/unifiedjs/unified)

githubの最初の紹介文には以下のように書かれています。

> unified is an interface for processing text using syntax trees. It’s what powers remark (Markdown), retext (natural language), and rehype (HTML), and allows for processing between formats.
> 
> unifiedは、構文木を使用してテキストを処理するためのインターフェースです。これは、remark（Markdown）、retext（自然言語）、およびrehype（HTML）を強化し、フォーマット間の処理を可能にするものです。

unified自体は、テキストデータを異なるフォーマットへ変換するための一連の処理（パース、変換、コンパイル）におけるインターフェースを提供していて、そのインターフェースに対応したライブラリを組み合わせて自由に操作ができるようになっているようです。各フェーズの処理にはそれ用のライブラリがいろいろと用意されています。例えばマークダウンをパースする場合は<a target="blank" href="https://github.com/remarkjs/remark">remark</a>がありますし、HTMLをパースしたい場合は<a target="blank" href="https://github.com/rehypejs/rehype">rehype</a>があります。
一応学習用のサイト（<a target="blank" href="https://unifiedjs.com/learn/">Learn - unified</a>）も用意されていました。

## サンプル

実際にマークダウンを変換する部分だけのサンプルをcodesandboxで作ってみました。

<iframe src="https://codesandbox.io/embed/convert-from-markdown-to-html-t4knc?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="Convert-from-markdown-to-html"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

変換する部分のコードは以下になります。各工程で何をやってるかがわかるようにコメントを付けてます。

```js showLineNumbers
// mdToHtml.js

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeFormat from "rehype-format";
import rehypePrismPlus from "rehype-prism-plus";
import remarkGfm from "remark-gfm";
import rehypeStringify from "rehype-stringify";

const mdToHtml = async (markdown) => {
  const result = await unified()
    .use(remarkParse) // マークダウンのパーサー
    .use(remarkGfm) // Autolink literals、Strikethrough、Table、Tasklist、に対応するためのremarkのプラグイン。
    .use(remarkRehype, { allowDangerousHtml: true }) // マークダウンをhtmlに変換するremarkのプラグイン
    .use(rehypePrismPlus) // PrismでHTMLのコードブロックを強調表示するrehypeプラグイン（rehypeRawの前にやらないと、.line-number、.highlight-line、line属性が削られてしまう）
    .use(rehypeRaw) // HTMLで記述されている部分(iframeなど)をパースするためのプラグイン
    .use(rehypeFormat) // htmlをきれいに整形するrehypeプラグイン
    .use(rehypeStringify) // htmlをシリアライズするunified用のコンパイラ
    .process(markdown);
  return String(result);
};

export default mdToHtml;
```

unifiedを使ってMarkdownの記事データをHTMLに変換してNext.jsで表示させる

Next.jsでSPAはどうやるのかなと思って調べたのでメモっておきます。  
こちらの記事が参考になりました。  
<a href="https://colinhacks.com/essays/building-a-spa-with-nextjs" target="_blank">Building a single-page application with Next.js and React Router</a>

ポイントは以下になります。
- SSRを回避してReactRouterを使う
- RewritesでNext.jsのルーティングを制御する

## 1.ReactRouterをダイナミックインポートで読み込んでSSRを回避する
<a href="https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr" target="_blank">With no SSR</a>に書いてあるようにダイナミックインポートでssrをfalseにして読み込むとCSRにできます。なので下記のようにReactRouterをダイナミックインポートで読みこむようにすればCSRでSPAができるようになります。

```js showLineNumbers
// ReactRouterのコンポーネント

const SpaRoot = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path={"/"} component={Top} />
				<Route path={"/about"} component={About} />
			</Switch>
		</BrowserRouter>
	)
}

export default SpaRoot
```

```js showLineNumbers
// pages/index.tsx

export default function Home() {
	const DynamicComponentWithNoSSR = dynamic(() => import('./spaRoot'), { ssr: false })
	return (<DynamicComponentWithNoSSR />)
}
```

## 2.RewritesでNext.jsルーターを制御
ただしそれだけだとNext.jsのルーターの機能とReactRouterの機能が干渉しあって予期しない動作になってしまいます。例えば、物理的に「/」にしかページがない状態で、「/about」を開こうとするとNext.jsは物理的に異なるファイルのページ遷移を行うため404エラーになってしまいます。そこでRewritesを使ってNext.jsのルーターが常にルートページを読み込むように制御してやります。これでNext.jsのルーターとReactRouterの整合性が取れて期待通りの挙動になります。

```js showLineNumbers
// next.config.js

module.exports = {
	async rewrites() {
		return [
			{
				source: '/:any*',
				destination: '/',
			},
		]
	},
}
```

以上でNext.jsでSPAができるようになります。


Next.jsでSPAをやる方法

Next.jsとヘッドレスAPIを使って何か作ってみたかったので簡単なブログを作ってみました。技術スタックはこんな感じです。
- Next.js
- TypeScript
- tailwindcss
- Contentful

Vercelでデプロイしてホスティングしてます。cssには試しにtailwindcssを使ってみましたが、utility-firstなのでclassNameをいちいち考えて決める必要がないのが楽です。JITモードだと任意の値が設定できるようになったりとさらに柔軟に使えるようになって便利です。

Contentfulはマークダウンも対応してるので、マークダウンで書いた記事のデータをContentfulから取得してNext.js側でHTMLに変換して出力するようにしました。コードブロックには下記のような感じでシンタックスハイライトがつくようにしてます。このへんが結構大変でした。

```js {2,5-6} showLineNumbers
export function getAllPostIds() {
	const fileNames = fs.readdirSync(postsDirectory)
	return fileNames.map((fileName) => {
		return {
			params: {
				id: fileName.replace(/\.md$/, ''),
			},
		}
	})
}
```

ちなみにこちらのチュートリアル動画がわかりやすくて参考になりました。  
[Next.js & Contentful Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1 "Next.js & Contentful Tutorial")

とりあえず最低限の機能だけで作ったので、必要に感じた機能は随時追加していこうと思います。
