[TypeScript]Memo

Useful articles

- TypeScriptチートシート

- TypeScript超入門(2)：構文を理解する

- Interface vs Type alias in TypeScript 2.7 - Martin Hochel - Medium

Tips

Associative array

  • An associative array in an associative array
const array: { [key: string]: string | { [key: string]: string } } = {
  name: 'Thomas',
  fav: { music: 'metal', game: 'fps' },
};

[JavaScript]Memo

Stringオブジェクト

検索
split(str [, limit]) strで文字列を分割する。strは結果に含まれない。
sliceとsubstringの違い
  • start > endである場合
const str: string = 'HelloWorld';

// return: Wor
// 8文字目(str[8 - 1]) から -3文字(5 - 8)を返す。
console.log(str.slice(8, 5));
// return: 空文字(文字列を返さない。)
console.log(str.substring(8, 5));
  • start/endに負の数を指定した場合
const str: string = 'HelloWorld';

// return: Wor
// 5文字目(str[5 - 1]) から 8文字目まで(str[(10 - 1) - 2])を返す。
console.log(str.slice(5, -2));
// return: Hello
// 5文字目(str[5 - 1]) から 0文字目まで(負の文字はマイナスとする。)を返す。
console.log(str.substring(5, -2));

[Node.js/Express]Memo

Installation

File Structure
Coming soon

Modules

  1. npm init -y
  2. yarn add --dev typescript express @types/express
  3. yarn add --dev ts-node nodemon

Files

  • /src/server.ts
import * as express from 'express';
const app = express();
const port = 8080;

app.get('/', (req, res) => res.send('Hello World!!'));

app.listen(port, () => console.log(`Example app listening on port ${port}`));
  • .prettierrc
{
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "arrowParens": "always"
}

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["tests/**/*.ts"],
  "exec": "npm run ts-node ./src/server.ts"
}
  • package.json(Only scripts)
"scripts": {
    "start": "node dist/server.js",
    "tsc": "tsc",
    "dev": "nodemon -L",
    "ts-node": "ts-node",
    "lint": "tslint --exclude **/*.d.ts --project . --fix 'src/**/*.ts' 'test/**/*.ts'"
  },

{
  "compilerOptions": {
    "outDir": "./public",
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "removeComments": true
  },
  "include": ["./src/**/*"]
}

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "quotemark": [true, "single", "jsx-double"],
    "object-literal-sort-keys": false,
    "interface-over-type-literal": false,
    "ordered-imports": false,
    "no-console": false
  },
  "rulesDirectory": []
}

Errors

[Firebase]Firestoreに関するメモ

はじめに

React + TypeScript + Firebaseのデータを取得する方法のメモです。
※インデントに関しては、整えるのが大変なので省略させてください。。。すみません。
　(VSCodeに貼り付ける等でお願いします。)


データ

データは以下の通り

Collection Foo
Document (ランダムな文字列)
Field: Data text: Test
  • 取得
const getData = () => {
    firestore
      .collection('Foo')
      .get()
      .then((snapShot) => {
        // type Data = { id: string, text: string }
        const dataArray: Data[] = [];
        snapShot.forEach((doc) => {
          dataArray.push({
            id: doc.id,
            text: doc.data().text,
          });
        });
        // dataに格納する。
        setData(dataArray);
      });
  };

アプリケーション起動時にデータを取得する場合、以下の通りです。

useEffect(() => {
    getLocations();
  }, []);
  • 追加(Documentを追加する。)
const addData = (
    text: string,
  ) => {
    firestore
      .collection('Foo')
      .add({
        text,
      })
      .then(() => {
        getData();
      });
  };
  • 更新
const changeData = (
    id: string,
    text: string,
  ) => {
    firestore
      .collection('Foo')
      .doc(id)
      .update({
        text,
      })
      .then(() => {
        getData();
      });
  };
  • 削除
  const removeData = (id: string) => {
    firestore
      .collection('Foo')
      .doc(id)
      .delete()
      .then(() => {
        getData();
      });
  };

まとめ

結構直感でかけるのではないでしょうか。
hooksやContext APIを使うことによって、Reactのみで簡単にアプリケーションが作成できてしまいます。

[Redux]Reduxの必要性

※特にまとめとかはありません。ただ、思想を書いているだけです。

はじめに

React+Redux+TypeScript+Firebase(or Node.js)でアプリを作成しているときに思ったことがあります。
「このアプリにReduxは本当に必要なのか。。。？」

既にReactの先輩方が同じことを語っていたので、多くは語りません。

  • 先輩方のお言葉

qiita.com
mae.chab.in


そのReduxは必要ですか？

Reactでアプリケーションを作成していると、Reduxをいれたくなります。
それは、stateの管理がものすごく楽だからです。

Reduxが難しいという人は、以下のものを読むと楽に感じると思います。

  • Redux

redux.js.org

  • Presentational and Container Components

medium.com

  • React-Redux hooks

react-redux.js.org

  • Redux Starter Kit

redux-starter-kit.js.org

私が、タイトルのようなことを思ったのはFirebaseでアプリ開発をしているときです。
そのアプリのメインとなるstateに関しては、databaseからとってくることになるし、
他の細々したstateはhooksが解決してくれます。(細々したstate === そのコンポーネントのみが所有するstate)
そうなったときに、Reduxはファイル数を増やすだけのただのお荷物になります。
(ちなみにRedux Starter Kit + React-Redux hooksでファイル数は随分減ります。)

Redux co-autherのdanさんも「Reduxは、そのアプリケーションには必要ないかもしれないね」ということを語っています。
medium.com

いまとなってはhooksがたくさんの機能を提供してくれているので、よほどの大規模でない限りはReduxはいらないと思いました。
まだまだReactの経験が浅い故に、Reduxはどのアプリなら必要なのかっていうのがわかっていませんが、とりあえず安易にReduxを選択するのはやめようと思います。

以上です。