ライブラリがこんな構成になっていませんか？ TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか？フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...

僕は現在、TypeScript入門書『サバイバルTypeScript』を書いています。この本を書く過程で、わかりやすくて効果的な学習体験を提供するため、サンプルコードの制作には特別な注意を払っています。 サンプルコードは教育的な文書で重要な役割を果たします。しかし、よく考えられていないサンプルコードは学習者を混乱させ、思考の妨げになることさえあります。そのため、以下の6つのポイントに基づいてサンプルコードを制作するように心がけています。 シンプルにする クリアにする コメントで解説する 未導入の機能を避ける 完全な動作を示す コードの長さに注意する 1. シンプルにする コードは学習者が取り組んでいる特定の問題を解決する最短・最も簡単な方法を示すようにします。無関係な要素は省いて、特定のコンセプトや機能に焦点を当てます。 例: TypeScriptのforループを解説したいとき ✅Do:

TypeScript 4.9で追加されたsatisfiesオペレーターですが、「これ何に便利なの？」「使いみちある？」という声を聞くところですが、使いどころのひとつとして、あるかなと思ったのがあったので紹介したいと思います。 僕もsatisfiesオペレーター自体、使い所を模索しているところなので、いちアイディアとして読んでいただければと思います。そのうえで、感想やツッコミなど頂けると嬉しいです。 JavaScriptで書いてた頃 一旦、TypeScriptは忘れて、JavaScriptを書いてた頃のマインドセットでコードを考えてみます。 たとえば、次のようなオブジェクトリテラルをJSONにしたいと考えたとします。

Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。 異体字セレクターとは 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの 異体字セレクターは16種類のコードポイントがある(FE00~FE0F) 仕組みの概要 隠したい文字列(hidden)を文字単位にバラす (例: js → j, s) 文字ごとに16進数に変換する (例: j → 6A) その16進数をひと桁ずつ異体字セレクターのコードポイントにマッピングする (例: 6→FE06, A → FE0A) 異体字セレクターの配列をひとつの文字列にまとめなおす 最後にそれを埋め込み先の文字列(body)に混ぜ込んで隠す。 よくあるユニコードステガノグラフィーとの違い ゼロ幅文字を使ったステガノグラフィー 次のようなゼロ幅空白文字を用いたス

この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ

今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。 思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります🙇🏻‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。 JavaScriptは10日で作られました JavaScriptは最も利用される言語のひとつで、JetBrainsの統計によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。 ここまで普及したとなると、JavaScriptはどれほど練りに練って、じっくり作り込まれた言語だったのでしょうか

この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。 <T>の書く位置まとめ 関数宣言 関数式 アロー関数 メソッド宣言 関数型 コンストラクタ型 関数シグネチャ コンストラクタシグネチャ: 引数リスト()の直前 クラス宣言 インターフェース宣言 型エイリアス: 識別子の直後 <T>の書く位置チートシート 関数宣言

この投稿では、JavaScript(Node.js)でディープコピーするにあたって使えるコードスニペットやライブラリの処理速度を比較した結果をお見せします。 比較対象 JSON.stringify/JSON.parse Nodeビルトインモジュールv8のserialize/deserialize lodashのcloneDeep deepcopy - deep copy data clone - offers foolproof deep cloning of objects, arrays, numbers, strings, maps, sets, promises, etc. in JavaScript. clone-deep - Recursively (deep) clone JavaScript native types, like Object, Array, RegExp,

この投稿では、値としては「文字列」なんだけど、単なる文字列ではなく「電話番号型」という意味を持たせた文字列型を定義し、それ使用する方法を紹介します。 TypeScriptで「電話番号型」みたいな、正規表現でバリデーションされるような型は作れるんかな？ ElmだとOpaque Typeなんてやり方があったけど。。。 用は型をexportしないで、その型の値を作る方法だけをexportすればええんかな。 — 無職やめ太郎（本名） (@Yametaro1983) April 23, 2020 ↑上のような疑問に対する答えです。 実現方針 方針としては、以下のテクニックの組み合わせです。 公称型で、「電話番号型」を定義する ユーザ定義タイプガードで、文字列型を電話番号型としてコンパイラに認識してもらう 公称型とその実装方法についての基本は下記投稿をご覧ください。 TypeScript: 異なる2つ

YYTypeScript#1「JavaScriptを知らない人がTypeScriptを学ぶ方法を知りたい」「TypeScript初心者がどうやって勉強すると効率がいいか？」「なぜTSが選ばれるのか？」「PHPと比べて、サーバサイドをTSで書くメリットは？」「TypeScriptのバックエンドのオススメフレームワークって？」「定義をinterfaceとtypeどっちで書いてる？」「JSで書かれたプロダクトのTS化ってどうしてる？ 」PHPJavaScriptTypeScriptYYTypeScriptイベントレポート これは2019年9月20日に開催したTypeScriptイベントYYTypeScript#1のイベントレポートです。 YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆる

downコマンドの特性としては、upコマンドと真逆のことをするコマンドということになる。つまり、upコマンドで作られうるもの(イメージ、コンテナ、ボリューム、ネットワーク)をすべて削除する。 --rmiオプションは、削除するイメージの種類を指定する。allはすべてのイメージ。localはフィールドにカスタムタグのないイメージのみを削除する。--rmiオプションを省略すると、イメージは消されない。 --volumesオプションは、docker-compose.ymlのvolumesセクションに書かれた名前付きボリュームとコンテナにアタッチされたanonymous volumeが削除される。 --remove-orphansオプションは、docker-compose.ymlで定義から削除されたサービス用の未定義コンテナも削除される。 これら3つのオプションをつけないと、削除されるのはコンテナと

個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。 追加された内容は更新履歴をご覧ください。 書籍 『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』 - JavaScriptからTypeScriptに来た人が読むと、JSとTSの差分を学ぶことができる本。 『JavaScript Primer: ECMAScript 2019時代のJavaScript入門書』 - すでにプログラミング経験がある人が読むとJavaScriptの文法や機能を中心に学ぶことができる本。TypeScriptを書くにもJavaScriptの知識が必要不可欠なので、雰囲気でJSを書いてきた人やちゃんとおさらいしたい

新しめの言語では例外を投げることを推奨しない言語が出てきているように思えるが、そうした言語が例外をどう考え、例外の代わりにどのようなアプローチを奨励しているかを調べてみた。 本稿での「例外」とは、Javaのthrow構文のようにスコープを脱出してcatchされるまでエスカレートされる「投げる例外」のことを指し、エラーを表現したオブジェクト(エラーオブジェクト)については「例外オブジェクト」と呼び区別するものとする。(この2つを同一に扱うと、例外を使わないということは、エラーオブジェクトは使わないの？という話になるため) Go言語 - 例外はコードを複雑にする Go言語では、通常、エラーは戻り値として扱われる。(本当の本当に例外的なエラーのためにpanic, recoverがあるが、ほとんど使われることがないように見受けられる。) 例外がないGoでは、どう呼び出し元にエラーを伝えているかとい

テストコードなどにダミーのユーザ名を書くことがある。ダミーの単語としてはfooやbar、日本語圏だとhogeやfugaが業界的に有名だが、人物名にも業界的によく使われるものがある。アリスとボブだ。 アリスとボブは、暗号通信などの説明に登場人物名としてよく使われる。一般的に、アリスが送信者でボブが受信者、そしてキャロルがそれを傍受するといったシナリオが扱われる。 アリスとボブが暗号通信の説明で使われる例: 楽しく学ぼう公開鍵暗号方式 暗号通信とは関係なくても、単体テストのテストケースでユーザ名にaliceやbobを使うと、fooやhogeよりもテストコードより現実っぽく表現できるし、イニシャルがABCで覚えやすいし、業界でよく使われる架空の人物名なので、僕は好んで使っている。たとえば、PHPUnitでテストを書くときはこんな感じにする: final class EmailBuilderTes

JavaScriptのasync/awaitはPromiseを使った非同期感たっぷりのコードを同期処理っぽくしてくれるが、async/awaitを理解するには、Promiseも知る必要がある。そこで、Promiseからおさらいしておこうと思う。 構文 まず基本的な構文。どうやってPromiseを作成するのか？ function 非同期的な関数(成功時コールバック, 失敗時コールバック) { if (...) { 成功時コールバック(成果) } else { 失敗時コールバック(問題) } } // ↓executor new Promise(function (resolve, reject) { 非同期的な関数( (成果) => resolve(成果), // 成功時コールバック関数 (問題) => reject(問題), // 失敗時コールバック関数 ) }) Promiseクラスをn

VuexのmapStateは書き方にバリエーションがある。ここではできるだけ多くのパターンを紹介する。 まず、話を具体的にするために次のようなストアを前提にする。 const profile = { namespaced: true, state: { twitter: "@suin", facebook: null, text: "よろしく〜" } }; const user = { namespaced: true, state: { name: "suin" }, modules: { profile } }; const post = { namespaced: true, state: { title: "VuexのmapStateの書き方", tags: ["JavaScript", "Vue", "Vuex"] } }; const store = new Store({ s

CRUDの操作をRESTで表現すると一対一で対応していないことに気づきます。RはGET、DはDELETEと考えておいて良さそうですが、CとUはPUT、POST、PATCHの3つの選択肢があり、APIを設計していると迷います。整理するためにまとめておきたいと思います。 下記の資料を参考にしました。 http - PUT vs POST in REST - Stack Overflow When to use PUT or POST | - The RESTful cookbook GitHub API v3 基本的な考え方 PUT: リソースの作成、リソースの置換 POST: リソースの作成 PATCH: リソースの部分置換 PUTはPOSTと違い、リソース名を指定して作成または更新をかけるメソッドです。PUT /articles/3421は新規作成かもしれませんし、更新かもしれません。PU

2017-01-05 追記 2016年3月にエラーの標準形式RFC7807「Problem Details for HTTP APIs」が提案され、今日現在proposed standard(標準化への提唱)となっています。こちらも是非ご覧ください。 RFC 7807 - Problem Details for HTTP APIs HTTP APIの詳細なエラー情報をレスポンスに持たせるための仕様 最近はREST APIを提供しているサービスが増えてきていますね！また公開されるAPIだけでなく、Microservicesなアーキテクチャを採用して、バックエンドがWeb APIで通信するケースも増えてきているように思います。 APIを使うときはあまり気にしたこともなかったですが、いざAPIを設計してみるとどんなインターフェイスがいいのか、どんな形式がいいのかといった疑問が次々と出てきます。

皆さん、tigコマンドを活用していますか？ tigは、コンソール上で使えるgitブラウザです。実はずっと、ただのきれいなgit logだと思っていたのですが、本当はそんなことはありません。かなり使えるやつなのです。 インストール ソースコード: https://github.com/jonas/tig インストール方法: https://github.com/jonas/tig/blob/master/INSTALL.adoc この辺りを参考にしてみてください。詳細は割愛します。 基本の使い方 この状態の差分を扱っていきます。いつものこれだとこんな感じ。 git logが素敵にビジュアライズされてます。この画面をmain viewといいます。 ここでエンターを押すと、下半分に差分の詳細（diff view）が表示されます。 下矢印で、Unstaged changesの差分を見てみるとこんな

Go言語を始めて38日たったので、これからGo言語を始めるプログラマにちょっとでもヒントになるように、どのようにGo言語を始めて、どのような手順で学んできたかまとめておきます。 筆者のバックグランド PHP歴、JavaScript歴10年~ Python 3ヶ月くらい Ruby 1日 静的言語経験ほぼ皆無(Java 3日くらい、Scala 3日くらい、Objective-C 1週間くらい、Cそもそも挫折、C# 1日) 静的言語というと、「コンパイルの一手間が面倒」だとか「環境を作るのが面倒」だとか先入観があり、ほぼ食わず嫌い状態でした。 Go言語とは? Go言語は2009年にGoogleによって作られたオープンソースの静的言語で、Linux・Mac・WindowsやAndroidで動作します。最近ではGoogle App Engineで使うこともできます。 golang.jpの解説によると