MBP(はてな)

MacBook Pro,iPhone Xs,React

SolidJSでQiitaAPIから記事情報を取得して表示 Vercel

SolidJSは、JavaScript の UI フレームワーク

$ npx degit solidjs/templates/ts solidjs-qiita-api
$ cd solidjs-qiita-api
$ yarn
$ yarn dev
ソースを変更して保存すると、画面も更新される

GitHub
GitHub - hiroyuki12/vercel-solid-pages

https://vercel-solid-pages.vercel.app/qiita


$ npm run dev したら自動でブラウザを開くように設定ファイルを変更
Vite で最速 React & TypeScript

$ vi src/App.tsx して、
https://raw.githubusercontent.com/hiroyuki12/vercel-solid-pages/main/src/routes/qiita/index.tsx
の内容で置き換え。
//import "./QiitaApp.css";にして、コメントアウト
vercel-solid-pages/index.tsx at main · hiroyuki12/vercel-solid-pages · GitHub

$ npm install lodash
$ npm install moment

$ npm run dev

QiitaApp.cssを追加して、import './QiitaApp.css';にして、コメントアウトを解除。パスを合わせる
vercel-solid-pages/QiitaApp.css at main · hiroyuki12/vercel-solid-pages · GitHub



$ vi src/App.tsx して、
https://raw.githubusercontent.com/dnrsm/solidjs-sample/main/src/pages/Cats.tsx
の内容で置き換え。
solidjs-sample/src/pages at main · dnrsm/solidjs-sample · GitHub

$ npm run dev


$ mkdir components
$ vi components/Counter.tsxして追加
https://raw.githubusercontent.com/dnrsm/solidjs-sample/main/src/pages/Counter.tsx
solidjs-sample/Counter.tsx at main · dnrsm/solidjs-sample · GitHub

$ vi App.tsxして、
import Counter from "./components/Counter";　を追加
＜CounterPage /＞　を追加。＜＞は半角に変更




https://vercel-solid-pages.vercel.app

GitHub - hiroyuki12/vercel-solid-pages


New Project – Vercel

https://vercel-solid-pages.vercel.app


Overview – Vercel

GitHub - hiroyuki12/vercel-solid-pages

$ cd github
$ git clone https://github.com/hiroyuki12/vercel-solid-pages
$ cd vercel-solid-pages
$ yarn
$ yarn dev

$ git pushすると、VercelのSolid Appが更新される。

$ vi src/routes/index.tsx

カウンターを追加

components/CounterPage.tsxを追加。
SolidJSに入門してみる | dnrsm.dev
routes/index.tsxに、CounterPage / を追加。

ページ index2を追加するには、
routesフォルダのindex.tsxをコピーして、index2.tsxを作成して、
Hello World2!に変更する
$ yarn dev -- --open して、
http://localhost:3000/index2 を開くと、
index2のページが表示される
（routesフォルダにファイルを追加すると、そのファイル名でアクセスできるようになる）

入力エリアとボタンを追加

routes/input.tsxを作成して、
SolidJSに入門してみる | dnrsm.dev
input.tsxの内容を作成
$ yarn dev -- --open して、
http://localhost:3000/input を開くと、入力エリアとボタンが表示される。

vercel/examples/solidstart at main · vercel/vercel · GitHub

TODO PAGEを追加 (ulidを追加すると、Vercelでエラー)

src/routes/todo.tsx solidjs-sample/Index.tsx at main · dnrsm/solidjs-sample · GitHub
src/componentsに5ファイル追加 solidjs-sample/src/components at main · dnrsm/solidjs-sample · GitHub
src/store/todo.ts を追加 solidjs-sample/src/store at main · dnrsm/solidjs-sample · GitHub
エラーが出るので、$ yarn add ulid。　削除する時は、$ yarn remove ulid
$ yarn dev -- --open して、
http://localhost:3000/todo を開くと、TODO PAGEが表示される。
SolidJSに入門してみる | dnrsm.dev


CATS PAGEを追加

src/routes/cats.tsx solidjs-sample/src/pages at main · dnrsm/solidjs-sample · GitHub
src/types.ts solidjs-sample/types.ts at main · dnrsm/solidjs-sample · GitHub
SolidJSに入門してみる | dnrsm.dev
Macのvimでsyntax onでcats.tsxを開くと、3秒くらいかかり、文字の色も変わらない。カーソルを動かしているとconst fetchDataのあたりで動かなくなり、contorl + cで復帰。nvimだと問題ない
原因は、const fetchData = async (skip: number) =>
(await fetch(`https://cataas.com/api/cats?skip=${skip}&limit=10`)).json();

Qiita APIで記事のタイトルを取得して表示

src/routes/cats.tsxをコピーして、qiita.tsxを作成して、適宜変更。
src/types.tsをコピーして、qiita-types.tsを作成
export type Qiita = {
title: string;
};
$ yarn dev -- --open して、
http://localhost:3000/qiita を開くと、Qiita PAGEが表示される。

hours agoを追加

$ vi src/routes/qiita.tsx して、追加
import moment from "moment";
{moment(qiita.created_at).fromNow()}
$ vi src/qiita-types.ts して追加

export type Qiita = {
  title: string;
  url:   string;
  created_at: string;
};

react-pages/QiitaClass.js at main · hiroyuki12/react-pages · GitHub
$ yarn add moment
$ yarn dev -- --open して、
http://localhost:3000/qiita を開くと、hours agoが表示される。
JavaScriptで「○分前」「○時間前」「○日前」など現在時刻からのざっくりした時間経過を表示したい場合は、Moment.jsのfromNowを使う - Javaエンジニア、React+Firebaseでアプリを作る

profile_imageを追加

$ vi src/routes/qiita.tsx して、追加
img src={qiita.user.profile_image_url} width="50" height="50" loading="lazy" /
ReactでQiitaAPIから記事情報を取得して表示 - MBP(はてな)
react-pages/QiitaClass.js at main · hiroyuki12/react-pages · GitHub
リストのaタグを親要素いっぱいにして上下中央揃えにする方法 - たぶろぐ

背景色とリンクの色を変更

$ vi src/routes/QiitaApp.css して追加
src/routes/qiita.tsx　にimportとheaderを追加。
ReactでQiitaAPIから記事情報を取得して表示 - MBP(はてな)

余白を削除

$ vi src/routes/QiitaApp.css して追加

* {
  margin: 0;
  padding: 0;
}

react-pages/QiitaApp.css at main · hiroyuki12/react-pages · GitHub

ボタンを押した時に次ページのデータを表示

   const onSetSkip = () => {
　    setPage((prevCount) => prevCount + 1);
   };

react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub

ページの一番下までスクロールしたら次ページ表示

  // 一番下に到達したら 次ページに更新
  const handleScroll = lodash.throttle(() => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    ) {
      return;
    }

    // 一番下に到達した時の処理
    //if(message !== "loading...") {
      setPage((prevCount) => prevCount + 1);
    //}

  }, 500);
  
  createEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
https://www.solidjs.com/tutorial/introduction_effects


createResource
https://www.solidjs.com/docs/latest/api#createresource
page の値が変更されるたびにfetchDataが再度呼び出される
const [data, { refetch }] = createResource(page, fetchData);
fetchDataは関数で例えば
const fetchData = async(page: number) =>
(await fetch(`https://qiita.com/api/v2/tags/react/items?page=${page}`)).json();
pageは例えば
const [page, setPage] = createSignal(1);
createResourceのpageはfetchDataで使う引数

リンクの下線を消すには、

src/routes/QiitaApp.cssに追加

a {
  text-decoration: none;
}

読み込み中に、Loading... 表示を追加
SolidJSに入門してみる | dnrsm.dev

pageが変わったらタイトルを更新

  createEffect(() => {
    document.title = `The current count is: ${page()}`;
    //document.title = `The current count is: ${page}`;  // page()の()が無いとNG
  });

An Intro to Solid.js for React Developers
https://www.solidjs.com/tutorial/introduction_effects

mainで囲むと中央寄せになる

<main>
    <h1>Hello world!</h1>
</main>

routes/qiita/index.tsxとすると、
localhost/qiitaでアクセスできる

components/counter/Counter.tsxとして、
importする側でパスを合わせれば読み込み可能
import Counter from "~/components/counter/Counter";

Qiita APIのRate limitについて
未認証の場合、1時間に60回まで
Qiita API v2 documentation - Qiita:Developer

Rate limitでデータが取得できない時は、
errorにデータをセットする

  const fetchData = async(page: number) =>
    (await fetch(`https://qiita.com/api/v2/tags/react/items?page=${page}`)).json();

  const [data, { refetch }] = createResource<Qiita[], number>(page, fetchData);
  const [error, setError] = createSignal("");

  createEffect(() => {
    if(data() == null)    
    {                                                   
      setError("Probably Rate limit exceeded");
    } 
  });

  <font color="red"><b>{error}</b></font>





How to Deploy a Solid App with Vercel – Vercel Docs

SolidJS の日本語ドキュメントが公開されました

MacでSolidJS - MBP(はてな)


SolidJSに入門してみた | DevelopersIO

次世代のReact？ Solid.jsについて