なになれ

IT系のことを記録していきます。

TypeScript

Chrome拡張機能を作る過程で学んだReactのこと

以前にChrome拡張機能を作りました。UI部分はReactで実装しました。 hi1280.hatenablog.com 今回はこのChrome拡張機能を作る際にどのようにReactを使ったのかを紹介します。 Option Page Chrome拡張機能の設定画面です。 Material-UI 今回は以下のReact用の…

React+TypeScriptでChrome拡張機能を作った

作ったもの Chrome拡張機能を開発するのに辛い点 コールバック前提 DOMの操作 開発環境整備 React+TypeScript React(Webフロントエンド向けライブラリ)の良い点 Webpack デモ まとめ 参考 作ったもの WebページをOCRしてコピペできるChrome拡張機能を作りま…

GraphQL(Backend)を試した

TypeScriptで作ってみるシリーズの作業ログです。 今回はGraphQLを試してみます。 前回まではこちらです。Backendの処理のWeb化まで行なっています。 hi1280.hatenablog.com とりあえずGraphQLを試す まずはGraphQLに慣れるため、簡易なGraphQL serverをNode…

Docker Composeによる開発環境の構築(TypeScript,Node.js,Redis,Elasticsearch)

TypeScriptで作ってみるシリーズの作業ログです。 今回はDockerおよびでDocker ComposeでTypeScriptの開発環境を作ります。 TypeScriptによるNode.jsアプリの他にRedis、Elasticsearchを使います。 前回はこちらです。 hi1280.hatenablog.com Node.jsアプリ…

Prettierを導入する際に調べたことまとめ

Prettierとは コードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。 Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。 GitHubのスター数は29,000を超えています。※2018年12月9日現在 github.com 今…

TypeScriptでユニットテストを書く

TypeScriptで作ってみるシリーズの作業ログです。 今回はユニットテストを書きます。 前回はこちらです。 hi1280.hatenablog.com 使用モジュール sinon @types/sinon https://sinonjs.org/ テストダブルを用意するためのツールと型定義です。 インストール方…

TypeScriptでWebAPIを実行する

TypeScriptの開発環境ができたので、とりあえずWebAPIを実行するプログラムを作ってみました。 hi1280.hatenablog.com 今回はQiitaのAPIを使いました。 https://qiita.com/api/v2/docs 使用モジュール axios https://www.npmjs.com/package/axios コード mai…

VSCodeでTypeScriptのCLIツール作成環境を作る

VSCodeでTypeScriptのCLIツール作成環境を作りました。 npmモジュールを作るのにも応用できると思います。 github.com 以下のような考えで作りました。 ローカル環境での実行・デバッグ・単体テスト実行はts-nodeで行う VSCodeのタスク機能は使わない想定 コ…

Visual Studio CodeでTypeScriptを書くときのオススメ設定

2018/12/10 コードフォーマットに関してPrettierの情報を追記 TypeScriptにある便利機能をVisual Studio Code(以下、VSCode)がいい感じに可視化してくれるので、この二つの組み合わせは非常に良いです。 その中でも個人的に良いと思った機能と設定方法を紹介…