Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@cocoakamen

Bingチャットに聞きながらdenoで簡単なアプリを作ってみようとした

Posted at

はじめに

このエントリは「Bingチャット使ってみたいな。はやってるし」というのと「ロゴがかわいいからdeno使ってみたいな」というのがたまたま同時に発生したので、ちょうどいいから「Bingチャットに聞きながらdeno使ってなんか作ろう」というものです。

トライする人のスペック

Bing先生に聞きながらつくるにあたって、聞く方のスペックはこんな感じです

  • Deno未経験
  • TypeScript未経験
  • Reactでシンプルなフロントエンドアプリは作ったことがある
  • Create React APPはチュートリアルのみ（Hello Worldレベル）
  • Next.js未経験
  • node.js上でnpmでいろいろ持ってくる開発スタイルには慣れている

denoでやってみたいこと

denoは、JavaScriptの実行環境です。

なんとなく以下はやってみたいような気がしていますが、どこまで、どの順番でやれるかはわかりません。Bing先生に相談しながら進めたいと思います。

  • ビルド（ファイルバンドル）が必要なフロントエンドアプリケーションをつくる
  • ローカルのHTTPサーバを使う
  • テストコードを書く
  • タスクランナーを使う

Bingチャットの回数制限

本エントリ執筆時点、Bingチャットは1セッション6ターンまで。1日60ターンまでという制限があります。さっき、うっかりどうでもいいことに使ってしまった気がしますが、残りのターン数でどこまでいけるかドキドキしながら行きたいと思います。

何を作るのか

「使ってみたい」がモチベーションではあるものの、Hello Worldだといくら何でも味気ないので、日付ピッカーとかデートピッカーとかカレンダーピッカーとか呼ばれるUI部品でで指定した日付を、いろいろなフォーマットで表示するやつ作っていたいと思います。

メジャーな部品なのに一度も使ったことがないから、チャットで教えてもらうのにちょうどよさそうというのが理由です。

最初の一歩を聞いてみる

denoを使ってフロントエンドアプリケーションを作りたいです。denoを使うのは初めてなのですがどうしたらよいでしょうか

screenshot.1.jpg

とりあえずAleph.jsについてもっと聞いてみました。

screenshot.2.jpg

難しいことを言っているので、とりあえず最初のチャットの回答のリンク先に行ってみることにしました。
screenshot.4.jpg

ふむふむ。実はNext.jsに触ったことがないので、よくわからないのですが、まあ、やってみます。

Bing先生の指示に従ってみる

この手順でできるようなのでトライしてみます。

  1. denoのインストール
  2. alephコマンドのインストール
  3. プロジェクトの作成
  4. 開発サーバーの起動

denoのインストール

少し前に瞬間的にモチベーションが上がった時に、インストールまでは実施済みです。 それも、なぜか久しぶりのWindows PCに。久しぶりすぎてVSCodeが数年前のバージョンになっていました。

バージョン確認結果。

C:\work\deno-work>deno --version
deno 1.30.3 (release, x86_64-pc-windows-msvc)
v8 10.9.194.5
typescript 4.9.4

VSCodeの拡張機能もインストール済です。

Aleph.jsのインストール

ご覧くださいと言われたので見てみます。
screenshot.5.jpg

Aleph.jsのドキュメントページに飛ばされました。
よくわからないので「Get Started」に行ってみます。

Create a new app:の最初に書いてあるコマンドをコピペしてみました。
?のところは、聞かれたので勘で答えてみました。

C:\work\deno-work>deno run -A -r https://alephjs.org/init.ts
? Project Name: date-format   
? Select a framework:
  1. React
  2. React with MDX
  3. Vue
  4. Yew
  5. Leptos
  6. Solid
  7. REST API
[1-7] 1
? Generate `_export.ts` file for runtime that doesn't support dynamic import (deploy to Deno Deploy)? [y/N] y
? Using Unocss(TailwindCSS)? [y/N] N
? Initialize VS Code workspace configuration? [y/N] y
↓ Downloading template(react), this might take a moment...

$ cd date-format
$ deno task dev    # Start the server in `development` mode
$ deno task start  # Start the server in `production` mode
$ deno task build  # Build & Optimize the app (bundling, SSG, etc.)

Docs: https://alephjs.org/docs
Bugs: https://github.com/alephjs/aleph.js/issues

GetStartのページに書いてある通りに、プロジェクトフォルダに移動してdeno task devと打ってみました。

C:\work\deno-work\date-format>deno task dev
Task dev deno run -A dev.ts
A new release of Deno is available: 1.30.3 → 1.31.1 Run `deno upgrade` to install it.       
Release notes: https://github.com/denoland/deno/releases/tag/v1.31.1
Blog post: https://deno.com/blog/v1.31
INFO [dev] Watching for file changes...
INFO Server ready on http://localhost:8000

Denoのバージョンアップしろと言われているような気がしますが、とりあえず無視します。ローカルサーバはちゃんと起動した模様です。

screenshot.6.jpg

Bing先生の指示を思い出す

  1. denoのインストール　<-- Done
  2. alephコマンドのインストール <-- たぶんDone。よくみると「alephコマンド」になっているな・・・。
  3. プロジェクトの作成 <-- いつのまにかDone
  4. 開発サーバーの起動 <-- いつのまにかDone

ここからどうすれば？

Bing先生に聞いてみます

Aleph.jsで、Reactフレームワークを使ったプロジェクトを作り、開発サーバを起動しました。日付をカレンダーから選択すると、さまざまなフォーマットで表示するアプリケーションを作りたいです。どうすればよいでしょうか？

Bing先生の回答です。
screenshot.7.jpg

まさかの具体的コードが出てきて驚きました。

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function App() {
  // 選択された日付をstateに保存
  const [selectedDate, setSelectedDate] = useState(null);

  // 日付のフォーマット関数
  const formatDate = (date) => {
    // JSON形式
    const jsonFormat = date.toJSON();
    // 年月日形式
    const ymdFormat = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    // 時分秒形式
    const hmsFormat = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    return { jsonFormat, ymdFormat, hmsFormat };
  };

  return (
    <div className="App">
      <h1>React Datepicker Demo</h1>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="yyyy/MM/dd"
      />
      {selectedDate && (
        <div>
          <p>JSON形式: {formatDate(selectedDate).jsonFormat}</p>
          <p>年月日形式: {formatDate(selectedDate).ymdFormat}</p>
          <p>時分秒形式: {formatDate(selectedDate).hmsFormat}</p>
        </div>
      )}
    </div>
  );
}

export default App;

しかし、このソース、どこに貼り付ければいいのでしょうか？Bing先生、初心者がつまづくポイントをわかっていません。と文句を言っても仕方ないので聞いてみます。

ありがとうございます。このコードはalephで作ったプロジェクトの、どのファイルに貼り付ければよいですか？

screenshot.8.jpg

ふむふむ。全くみていなかったディレクトリ構造を見てみます。ないですね。:anguished:

screenshot.9.jpg

とりあえず聞いてみました。よくわかりませんが、ツールで提供されているコマンドでプロジェクトを作成したので、いまいちな回答な気はします。
screenshot.10.jpg

自力で少し頑張ってみる

作成されたプロジェクトとAleph.jsのドキュメントをチラチラ眺めてみます。

server.js
import { serve } from "aleph/react-server";
import routes from "./routes/_export.ts";

serve({
  router: { routes },
  ssr: true,
});
./routes/_export.ts
import * as $0 from "./_404.tsx";
import * as $1 from "./_app.tsx";
import * as $2 from "./index.tsx";
import * as $3 from "./todos.tsx";

export default {
  "/_404": $0,
  "/_app": $1,
  "/": $2,
  "/todos": $3,
};

サンプルアプリのtodos.tsxの横並びに作ればいいのかな？という勘を信じて、todos.tsxをコピーして、date.tsxというファイル名にしてみました。その結果・・・./route/_export.tsは勝手に書き換わり、http://localhost:8000/date/ で、TODOアプリが表示されるようになりました。

date.tsxに上のコードを貼り付ければよいのかな？とBing先生が作ってくれたコードをあらためて眺めてみると、TypeScriptじゃないのですが大丈夫なんでしょうか。あとreact-datepickerをしれっとimportしてますが大丈夫なんでしょうか。

だめもとで、そのままdate.tsxに貼り付けてみました。いかにもだめそうなにょろにょろがついています。
screenshot.12.jpg

ブラウザからみるとこんな感じのエラーに。
image.png

そりゃそうですよね。「コピー」ボタンついているの何気にありがたい気がします。Aleph.jsの機能なんでしょうか。

Bing先生に聞いてみる

screenshot.14.jpg

具体的な方法を聞いてみました。
image.png

おや。day.jsのインストールも必要なんでしょうか。聞いてみました。
image.png

denoでreact-datepickerとday.jsをnpmインストールするにはどうしたらいいですか？

image.png

おや。何か勘違いしてたかな。。Bing先生が教えてくれた1番のリンク先によるとnpmは使えるようですが・・・:thinking:

あ、npm installはしないんですね！なるほど！

Aleph でreact-datepickerとday.jsを使うにはどうしたらよいですか？

image.png

ふむ。ツールで生成された中にdependencies.tsはないですね。代わりにimport_map.jsonがあるので、そっちに足してみたいと思います。とりあえずreact-datepickerだけ。

import_map.json
{
  "imports": {
    <中略>
    "react-datepicker": "https://esm.sh/react-datepicker",
  },
  "scopes": {}
}

先ほどブラウザに表示されていたエラーメッセージはcssファイルが読み込めない系だったので、聞いてみます。

react-datepickerのCSSファイルはどこからダウンロードすればよいですか？

image.png

これだと別のどこかでnpm installしてファイルDLしてみないといけない？と思いつつ、とりあえずCSS部分はコメントアウトして、開発サーバ再起動してみます。

date.tsx(Bing先生のコード）
import React, { useState } from "react";
import DatePicker from "react-datepicker";
// import "react-datepicker/dist/react-datepicker.css";

エラーが変わりました

TypeError: Import 'https://esm.sh/v108/date-fns@2.29.3/deno/setMinutes.js' failed: 500 Internal Server Error
    at https://esm.sh/v108/react-datepicker@4.10.0/deno/react-datepicker.js:2:1717
    at async importRouteModule (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:28:10)
    at async fetchRouteData (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:67:19)
    at async handler (https://deno.land/x/aleph@1.0.0-beta.23/server/handler.ts:212:22)
    at async Server.#respond (https://deno.land/std@0.175.0/http/server.ts:299:18)

雑に聞いてみたら回数制限にひっかかりました。残念！
image.png

あらためて新しいチャットで聞いてみた結果。
image.png

なるほど。わからない。上の方のQiitaの記事で紹介されているnpm:XXXの書き方に変えてみます。

import_map.json
{
  "imports": {
    <中略>
    "react-datepicker": "npm:react-datepicker",
  },
  "scopes": {}
}

エラーが変わりました

TypeError: importing npm specifiers in remote modules requires the --unstable flag (referrer: http://localhost:8000/routes/date.tsx?ssr&v=lekvxygj)
    at async importRouteModule (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:28:10)
    at async fetchRouteData (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:67:19)
    at async handler (https://deno.land/x/aleph@1.0.0-beta.23/server/handler.ts:212:22)
    at async Server.#respond (https://deno.land/std@0.175.0/http/server.ts:299:18)

エラーをそのまま投げてみます。

image.png

なるほど、とりあえず--unstableをつけてみればいいんだな？
image.png

ということでつけてみたけどエラーは大して変わらない。

TypeError: importing npm specifiers in remote modules requires the --unstable flag (referrer: http://localhost:8000/routes/date.tsx?ssr&v=lekw56gf)
    at async importRouteModule (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:28:10)
    at async fetchRouteData (https://deno.land/x/aleph@1.0.0-beta.23/server/routing.ts:67:19)
    at async handler (https://deno.land/x/aleph@1.0.0-beta.23/server/handler.ts:212:22)
    at async Server.#respond (https://deno.land/std@0.175.0/http/server.ts:299:18)

そろそろ疲れてきました。
image.png

公式ドキュメントみたりしたほうがいいか・・という気持ちになってきました。

やめようかなと思った後にチャットを投げつける

Bing先生やさしい・・・

image.png

image.png

image.png

最後がちょっと残念・・・

Bing先生に聞いてみて

  • 慣れていないこと、初めてのことをチャットだけで教えてもらうのは、無理がありそう。検索結果として使おう。
  • チャット回答の中に複数のページへのリンクを埋め込んでくれているのはわかりやすい。検索結果として使おう。
  • 普通にキーワード検索して自分でURL探すより適切に広げた範囲の情報をもらえている気はする。
  • ちょっと楽しい
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?