# GROWIのAPIを使用したアプリケーション

:penguin: こんにちは [GROWI](https://tips.weseek.co.jp/5e393927e848c600487d6a01) 開発チームの itizawa です。  

Typescript の勉強のために GROWI の api を使用したアプリケーションを作成しました。

![ページリスト.mov.gif](/attachment/5e5bd0e3e7f8db0048df3a0a)

## [主要コード(GitHub に飛びます)](https://github.com/itizawa/GROWI-Manager/pull/2/files?file-filters%5B%5D=.json&file-filters%5B%5D=.lock&file-filters%5B%5D=.tsx&hide-deleted-files=true)
```ts:index.tsx
import React from "react";
import urljoin from "url-join";
import axios from "axios";
import { NextPage } from "next";
import PageListItem from "~/components/PageListItem";

interface Props {
  pages: Array<any>;
}

const Page: NextPage<Props> = ({ pages }) => {
  return (
    <React.Fragment>
      <h1>GROWI Page List</h1>
      <ul>
        {pages.map((page: any) => {
          return <PageListItem key={page.id} page={page} />;
        })}
      </ul>
    </React.Fragment>
  );
};

Page.getInitialProps = async (): Promise<Props> => {
  const requestPath = urljoin(
    "https://",
    process.env.SITE_URL,
    "/_api/pages.list?access_token=",
    process.env.API_TOKEN
  );

  const res = await axios.get(requestPath, { params: { path: "/" } });
  const { pages } = res.data;
  return { pages };
};

export default Page;
```

```ts:PageListItem.tsx
import React from "react";
import urljoin from "url-join";

type PageListProps = {
  page: Page;
};

type Page = {
  id: string;
  path: string;
};

const PageListItem: React.FC<PageListProps> = ({ page }) => {
  const pagePath: string = decodeURI(page.path);
  const pageLink: string = urljoin("https://", process.env.SITE_URL, pagePath);

  return (
    <li key={page.id}>
      <a href={pageLink}>{pagePath}</a>
    </li>
  );
};

export default PageListItem;
```

## 困ったこと
GROWI の開発では [PropTypes](https://ja.reactjs.org/docs/typechecking-with-proptypes.html) を使用していたため、interface と type の使い方は把握できました。  
ただその使い分けはまだ分からず、コード内の位置もどこに書いたらいいのか...  

そして型チェックが強力でした。型を強く意識することでコードの品質が高まるような気がします。  
ただ、慣れないと時間がかかるので、練習が必要だと感じました。
js を書くときにも型を意識しようと思います。

## これから実装したいもの
- 階層構造をビジュアルで把握できるようにしたい
- タグ関係の機能
- ゆくゆくは本家GROWIへの逆輸入(?)

デザインに関しては本質的に勉強したいものではないので後回し

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/GROWIのAPIを使用したアプリケーション
- Permalink: https://tips.weseek.co.jp/5e5bd0e3e7f8db0048df3a08
- Parent: [開発日記](/5e3d294bcff797004b16abba.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 20 total
  - [GitとGitHubの違い](/5e417dcadecd0a0049953ad7.md)
  - [LDAP攻略への道](/5e48b2561ec5e4004811d4e9.md)
  - [Migrationsファイルを作成する](/5e9d1dc7b682620049e55a64.md)
  - [QiitaでGROWIが設計書システムとして紹介されました](/5e535a04eb17ce0048b9fb13.md)
  - [UserManagement](/65069da24603e7ff39a6b3d2.md)
  - [aタグ以外での画面遷移](/5e9cfd51b682620049e55a5d.md)
  - [jestを使ったテストを初実装しました](/5ef1ed225eea4b004a1912b2.md)
  - [npm とyarn の違いを簡単に説明](/5e3e6822591d7f0048b3cc5e.md)
  - [react-card-flipを使って回転するカードレイアウトを作る](/5ebaa05ad3055000488bd526.md)
  - [throttleでスクロールイベントを間引く](/5e8de43931511b0048ecf612.md)
  - [vuepressのテンプレート内で二重波括弧をエスケープ](/5f16ecf4c2f6150048b2955b.md)
  - [なぜsetStateをComponentDidMountで使用してはいけないのか](/5eb7728458c8ea00480d0825.md)
  - [アジャイルとウォーターフォール](/5e4137d343c1c400499b6bac.md)
  - [セルフレビューはどこまで確認しようか](/5e3d2adfcff797004b16abbe.md)
  - [ソート機能の実装](/5e8aadc15245e70048c22c7c.md)
  - [タスクを円滑にこなすために必要な垂れ流しとは](/5e47a18a927c020048448a18.md)
  - [ページ内リンクの実装](/5e93c9d511007300489677ff.md)
  - [レビュー依頼する際に確認すること](/5e3ae41225751e00499297f6.md)
  - [動作確認用にページをたくさん作りたい](/5f80326633588b0048eaf865.md)
  - [間違えてマージしてさらにプッシュしちゃった](/5e9d176db682620049e55a60.md)
- Last updated: 2020-03-02T01:33:24.131Z by deleted_at_1672138397219
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e5bd0e3e7f8db0048df3a08