ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

typescript

ParcelでVue.js + TypeScriptの環境構築をしてみた

フロントエンドに手を出し始めてからずっとwebpackを使ってましたが、webpack.config.jsを書くのが面倒だったり、主観ですがビルドが遅かったりしたので、もう少し速くて手軽なビルドツールを探したところParcelというものが見つかったので使ってみました。 …

連結リストの速度をTypeScriptで検証してみた

連結リストと配列における処理速度の違いについて検証してみたのでまとめます。 連結リストとは? 一言で言うと「配列の亜種」です。できることは大体同じです。(すごくまさかりが飛んできそうなので話半分に聞いて下さい。) 違いを人で例えるならば、配列…

Pts.jsをtypescript環境で動かしてみた

Pts.jsというものがGithubで話題になってるらしいです、点を線でつないでいい感じの図形を描画できるとか何とか。 github.com Like seeing the Big Dipper in a sky full of stars, Pts helps you connect the dots in the vastness of conceptual spaces. …

typescriptのuniontypesについて

typescriptの共用体型についてまとめてみます。 共用体型とは union typeとか、ユニオン型とか言われてるっぽいです。 変数等に型を指定する時に複数指定できます。 複数の型を|区切りで指定し、どれかの型で有ることを示します。 こんな感じ。 let hoge: st…

typescriptでテストを書く環境を作ってみた(mocha, chai)

typescriptでテストコードを書くための環境作りをしたので、ご紹介兼備忘録です。 使うライブラリ mocha Mocha - the fun, simple, flexible JavaScript test framework Javascriptのテストフレームワークです。上記HP曰く「シンプルで柔軟で楽しい」らしい…

TypescriptでPromiseについてまとめてみる

わかった気がせんでもないのでまとめます。 async/awaitを勉強しようとしたら「そもそもPromiseが分からんと話にならん」ということで勉強しました。 今更感&検索したらいっぱい出てきますが自分の理解が進むから良いんです(自分本位) Promiseとは ECMASc…

typescriptでデザインパターンを書く -Factory Method-

久しぶりのデザパタです、今回はFactory Methodです。 Factory Methodとは Template Methodパターンをインスタンス生成に適応したものです。 Factory(工場)はインスタンスを作る役割を果たし、作り方の枠組みを示す親クラス(抽象クラス)と実際に特定のク…

typescriptでデザインパターンを書く -Prototype-

今回はprototypeパターンを書いてみました。 prototypeパターンとは 既に作っているインスタンスから別のインスタンスを作るパターンです。 メリット 扱うオブジェクトの種類が多すぎる時に管理しやすい オブジェクトを30個作って扱う必要がある際にそれぞれ…

vuexっぽい仕組みをvuex使わずにRxjsで実装してみた

github.com 久しぶりの更新です。 今回はvuexを使わずに下の図を参考にして、それっぽい仕組みでマークダウンエディタを作ってみました。 コンポーネントに対する通知等はrxjsを使って実装しています。 サンプル テキストを入力すると、HTMLでプレビューを表…

typescriptでnodeのfsを動かそうとしてハマったこと

覚え書きとして。 typescript上でfsを動かしてファイル操作をしようとしましたが、「そんなもの無い」と言われて四苦八苦したので解決法を残しておきます。 @types/nodeをインストールして、nodeの型定義ファイルを入れます。 npm install @types/node node…

typescriptでデザインパターンを書く -Singleton-

github.com 今回はSingletonパターンを書いてみます。 Singletonパターンとは アプリケーション内でインスタンスを一つだけ生成することを保証するデザインパターンです。 new Hoge()で作る度に別のインスタンスが作られるというのを制限します。 サンプル …

typescriptでデザインパターンを書く -Template Method-

今回はtypescriptでTemplate Methodパターンを書いてみようと思います。(3種類目) github.com Template Methodパターンとは 親クラスで処理の概要を決めて、具体的な処理は小クラスで書いていくデザインパターンのことを言います。 例えば親クラスが「楽器…

ts-nodeでCLI上でのtypescriptの検証がめっちゃ楽になった話

typescriptでデザインパターンの勉強をしているのですが、コンパイルがとても面倒くさい。 webpackにts-loader入れてコンパイルして検証をしていたのですが、ts-nodeという便利なモジュールがあったので紹介します。 CLI上で検証・勉強したりするにはとても…

typescriptでデザインパターンを書く -Adapter(委譲)-

www.te-nu.com の続きです、まだお読みで無い方はぜひ読んでみて下さい(ダイレクトマーケティング) 前回はAdapterパターンを継承で書いてみましたが、委譲による実装方法もあるので作ってみたいと思います。 継承との主な違い 継承では既存のクラス、今回…

typescriptでデザインパターンを書く -Adapter(継承)-

typescriptでデザパタを書いてみます、今回は二回目(一回目で失踪しなくてよかった) リポジトリはこちら github.com 参考にしている本はこちら 増補改訂版Java言語で学ぶデザインパターン入門作者: 結城浩出版社/メーカー: ソフトバンククリエイティブ発売…

typescriptでデザインパターンを書く -Iteratorパターン-

増補改訂版Java言語で学ぶデザインパターン入門作者: 結城浩出版社/メーカー: ソフトバンククリエイティブ発売日: 2004/06/19メディア: 大型本購入: 51人 クリック: 762回この商品を含むブログ (397件) を見る 以前この本を読んでデザインパターンを勉強して…