async function でfetchをラップする関数を作る
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>> になっている、と言われてなるほどと思いました。
.NET 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 Studio のMac版
現在は PREVIEW版です。
www.visualstudio.com
slnファイルの記述
Microsoft Visual Studio Solution File, Format Version 12.00 # Visual Studio 2012
※ この2つのIDE両方とも開発することはできそうですが、slnファイルを見るとコメント部分の Visual Studio のバージョンが違うようでした。
vscodeでコード整形
jsonなどのコード整形をしたいときのショートカットキーを忘れてしまうのでメモ
コマンド
shift + alt + f
注意点
起動時のデフォルトで開かれてるファイル（Unitled-1）ではコマンドを入力してもコード整形されないので注意。
jsonなら拡張子 .json である必要があるようです。
ショートカット一覧確認方法
ショートカット一覧を見る方法
基本設定 > キーボード ショートカット
コード整形は下記の様に定義されています。
{ "key": "shift+alt+f", "command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly" }
ReactでのHTML描画について
Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。
方法
dangerouslySetInnerHTML を使う。
<span dangerouslySetInnerHTML={{__html: htmlString}}>
の様な形で、htmlString にはHTMLが文字列で代入されています。
こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示することができます。
例
MarkdownをHTMLの文字列に変換し、文字列ではなくHTMLとして描画する。
markedなどは、Markdownを変換して文字列を出力するので、今回の様な処理が必要になります。
参考
vscodeでMarkdownプレビュー
visual studio code (vscode) では、簡単に下図のようにMarkdownのプレビューができます。
コマンド
Macの場合
command + shift + V
補足
上記コマンドでプレビューを表示することができます。
ですが、リアルタイムプレビューが可能なのは拡張子が.mdの場合である点に注意が必要なようです。
拡張子が.mdではない場合
# hoge
と入力した後にMarkdownプレビューを開始した結果
追加で
## fuga
と入力していますが、プレビューには反映されていません。
拡張子が.mdの場合
# hoge
と入力した後にMarkdownプレビューを開始した結果
追加で
## fuga
と入力しています。
拡張子が.mdの場合、プレビューがリアルタイムで更新されていることがわかります。
