読者です 読者をやめる 読者になる 読者になる

async function でfetchをラップする関数を作る

TypeScript

javascriptで async function の使い方を勘違いしていたようなのでメモ。

先に正しく動く例

export class ApiWrapper {

  public async getResult = (searchText: string) => {

    let myHeaders = new Headers({
      'Token': ''
    });

    const response = fetch(this.apiUrl + searchText, {
      method: 'GET',
      headers: myHeaders,
      mode: 'cors',
      credentials: 'include'
    });

    if (response.status >= 200 && response.status < 300) {
      let data = await response.json();
      return data;
    } else {
      var error = new Error(response.statusText);
      throw error
    }
  }
}

呼び出し側

let hoge = async () => {
  const apiWrapper = new ApiWrapper();
  const fuga = await apiWrapper.getResult('検索したいワード');
  console.log(fuga);
}

何を勘違いしていたのか

functionの前に async を付けて、戻り値は Promiseにすればいいと思っていた。

export class ApiWrapper {

  // タグ一覧取得
  public async getResult = (searchText: string) => {

    let myHeaders = new Headers({
      'Token': ''
    });

    return fetch(this.apiUrl + searchText, {
      method: 'GET',
      headers: myHeaders,
      mode: 'cors',
      credentials: 'include'
    }).then( (response) => {
      if (response.status >= 200 && response.status < 300) {
        return response.json();
      } else {
        var error = new Error(response.statusText);
        throw error
      }
    }).then( (data: any) => {
      console.log('success');
      return data;
    }).catch( (error) => {
      console.log('request failed', error);
      throw error;
    });
  }
}

と書いて、Promiseを返してあげればいいのではと思ってましたが、この場合、呼び出し側では下の様に書かなければいけなくて冗長だなと思ってました。

let hoge = async () => {
  const apiWrapper = new ApiWrapper();
  apiWrapper.getTagList('tag name')
  .then( (response) => {
    console.log(response);
  })
  .catch( (error) => {
    console.log(error);
  });
}

でもこれは勘違いで、 ApiWrapper は Promise を返す Promise になっていただけでした。

これは、 c# だと Task<Task<T>> になっている、と言われてなるほどと思いました。

IntelliJ IDEA で PHP のソースフォルダが見えなくなったとき

PHPのプロジェクトを開いたらディレクトリが見えなくなってしまっていた。
開いているディレクトリの .gitignore などのファイルだけが見えている状態でした。

参考にさせて頂いた、ページを見ると .idea配下のファイルを修正すれば良いと書いてあったのですが自分の環境(Mac)では同様のファイルが見つからなかったので思い切って .idea ディレクトリを削除して、IntelliJ IDEA を再起動したら治りました。

環境

参考

unok.hatenablog.jp

TypeScriptでasync/awaitを使いes5にコンパイルする方法

TypeScript

TypeScriptではasync/awaitを使いつつも、コンパイルした成果物をes5にするための tsconfig.json

libes2015 を追加する

tsconfig.jsonの例

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "jsx": "react",
    "lib": [ "es2015" ]
  },
  "exclude": [
    "node_modules"
  ]
}

.NET Core の開発環境

dotnet core

気づけば、 .NET Core の開発環境を作る方法やIDEなどが充実してました。

開発環境構築

こちらの手順に従って簡単にインストールできるようになっています。
.NET - Powerful Open Source Development

でのインストール方法について書かれています。

IDE

Windowsの場合は、VIsual Studio を使えば良いと思います。
今まで Mac だと、 Visual Studio Code や Vim, Emacs といったエディタを使っての開発でした。
ですが、最近ではMacでも利用可能なIDEがでてきたようです。

Rider

JETBRAIN社製の .NET IDE
A cross-platform .NET IDE based on the IntelliJ platform and ReSharper

slnファイルの記述

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 2013

Visual Studio for Mac

Visual StudioMac
現在は PREVIEW版です。 www.visualstudio.com

slnファイルの記述

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 2012

※ この2つのIDE両方とも開発することはできそうですが、slnファイルを見るとコメント部分の Visual Studio のバージョンが違うようでした。

vscodeでコード整形

Mac vscode

jsonなどのコード整形をしたいときのショートカットキーを忘れてしまうのでメモ

コマンド

shift + alt + f

注意点

起動時のデフォルトで開かれてるファイル(Unitled-1)ではコマンドを入力してもコード整形されないので注意。
jsonなら拡張子 .json である必要があるようです。

ショートカット一覧確認方法

ショートカット一覧を見る方法

基本設定 > キーボード ショートカット

コード整形は下記の様に定義されています。

{ "key": "shift+alt+f",           "command": "editor.action.formatDocument",
                                     "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly" }

ReactでのHTML描画について

React

Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。

方法

dangerouslySetInnerHTML を使う。

<span dangerouslySetInnerHTML={{__html: htmlString}}>

の様な形で、htmlString にはHTMLが文字列で代入されています。
こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示することができます。

MarkdownをHTMLの文字列に変換し、文字列ではなくHTMLとして描画する。
markedなどは、Markdownを変換して文字列を出力するので、今回の様な処理が必要になります。

github.com

参考

mikazuki.hatenablog.jp

vscodeでMarkdownプレビュー

vscode Mac

visual studio code (vscode) では、簡単に下図のようにMarkdownのプレビューができます。

f:id:naught00:20170106222431p:plain

コマンド

Macの場合

command + shift + V

補足

上記コマンドでプレビューを表示することができます。
ですが、リアルタイムプレビューが可能なのは拡張子が.mdの場合である点に注意が必要なようです。

拡張子が.mdではない場合

# hoge

と入力した後にMarkdownプレビューを開始した結果 f:id:naught00:20170106222907p:plain

追加で

## fuga

と入力していますが、プレビューには反映されていません。 f:id:naught00:20170106223057p:plain

拡張子が.mdの場合

# hoge

と入力した後にMarkdownプレビューを開始した結果 f:id:naught00:20170106223348p:plain

追加で

## fuga

と入力しています。 拡張子が.mdの場合、プレビューがリアルタイムで更新されていることがわかります。 f:id:naught00:20170106223411p:plain