"プロパティの初期値にnullをよく使うという話 TypeScriptでインスタンスを生成するときに、プロパティの初期値をどうするべきなのか……。最近ずっと気になっていた事柄だったので、考えをまとめてQiitaに投稿しました。\n プロパティの初期値をnullにしたりしなかったりの使い分け 投稿の中で、自分がよく使う初期値の方針をまとめました。\n string型: 空文字列かnull numbe型: nullか0 Date型: null 配列型: 空の配列かnull カスタムクラス: インスタンスをnewするかnull 自分の傾向をまとめると、「型の種類を増やしたくないからできるだけnullは使いたくないけど、どうしようもないときはnullを初期値にする。undefinedは本当の未定義と見分けがつかないので初期値としては避ける」ということになります。\nnullとundefinedにまつわる指摘と議論 この投稿の公開後に早速コメントがあり、nullはよく考えてから使ったほうが良いという指摘と参考記事を紹介されました。\n コメント 提示されたGitHub Issueで話題になっていた問い掛けは「JavaScriptのユーザーランドではnullを廃止してundefinedに統一するべき」というものでした。\nスレッドの中で明確な結論は出ていませんでしたが、nullの利用について肯定・否定の両派から意見が寄せられていました。\n nullを肯定する意見 標準APIやブラウザDOMがnullを利用している nullとundefinedは意味が違うので、使い分ければよい。nullにはundefinedより明示的に値が存在しないという意味があるので、その意味で使うべき JSONではnullは表現できるが、undefiendは表現できない nullに否定的な意見 APIのnullを使う仕様は変えられないが、ユーザーランドは別 そもそもnullとundefinedが両方存在している現状が間違っているし、誰もちゃんと使い分けを知らない(だからundefinedに寄せるべき) JSONでundefinedを扱う代替手段はどうとでもできる 折衷案の意見 結局は両方使うしかないが、nullを使う場合には意図を明確にするべき 他言語の経験がなくWebデザインの延長で開発をやるようになった自分にとって、この議論は興味深かったです。\n僕にとってJavaScriptにnullとundefinedが存在するという仕様は当然なことで、そこに疑問を持ったことはありませんでした。\nその仕様には何か特別な理由があり、自分が知らないだけで上級者はちゃんと使い分けているものだと思っていたのですが……。\n結局どうするべきなのか 似たような概念が2種類もあることでJavaScriptとTypeScriptの世界に無駄な混乱を招いているということは事実なようです。\n確かに、使い分ける理由がないのであれば、寄せられる方に統一するべきでしょう。寄せるのであれば、nullよりもundefinedの方がより一般的なので適当です。\n一方で、既存のAPIの仕様がある以上絶対にnullを無くすこともできません。\n結局寄せ切ることはできませんが「nullの利用は明確な意図がない限りは最小限にするべき」という程度のことは言えるかもしれません。\n 特に明確な意図がないのであればundefinedだけを使う nullを使うのであれば利用意図を明確にする 既存APIに渡す／帰ってくるnullは甘受する プロパティ初期値としてnullを使うことの妥当性 さて、冒頭のプロパティ初期値の話題に戻ったとき、\n 型の種類を増やしたくないからできるだけnullは使いたくないけど、どうしようもないときはnullを初期値にする。undefinedは本当の未定義と見分けがつかないので初期値としては避ける。\n という理由付けが妥当なのかをもう一度考えてみます。\nプロパティが本当に未定義であるかの調べ方 仮に初期値としてundefinedを代入したときに、本当に存在しないプロパティなのかどうかはhasOwnPropertyで調べることができます。\nしかしTypeScriptでundefinedを許容する型定義をすると、コンストラクタ内でプロパティへの代入をせずにクラスを実装できてしまいます。\n クラスでの実装時には、どちらの型定義でもプロパティへの代入を省略できてしまう\nオプショナル型とundefinedとのユニオン型は、オブジェクトとクラスで挙動が違った - Qiita\n つまり、undefinedを許容する型定義ではプロパティの存在を保証できません。\nそれを保証したければ、コンストラクタ内でプロパティにundefinedを代入する運用が必要です。コンパイラが見てくれないのでちょっと面倒そうです。\nclass MyClass { public hoge: string | undefined; constructor() { // 書かなくてもコンパイルは通るが、省略するとhasOwnPropertyで区別できなくなる this.hoge = undefined; } } そもそも、プロパティ未定義と値がないことを区別したい場合があるのか しかし、当初のnullを使う理由であった「本当にプロパティ未定義な状態と、値がない状態を区別できる」という機能が実際に必要な状況がどれだけあるでしょうか？\n経験上、それが本当に必要だったシーンはこれまでありませんでした。また、その機能が必要な状況を思いつくことも自分には難しいです。\nオブジェクトのプロパティを走査するような機能には関係しそうですが、たとえばディープコピーするときにundefinedなプロパティが律儀に複製されても、そんなに嬉しい状況がなさそうです。\n理由が思いつかないのであれば、やはりnullにこだわる意義はないかもしれません……。\nあなたはnullを使いたいですか？ 最後に、例のIssueを立てた人がTwitterで行っているnullとundefinedにまつわるアンケートを転載しました。あなたはどちら派でしょうか？\nIf you don\u0026#39;t want to comment in that thread. Vote instead. But read the arguments for dropping `null` first.\n\u0026mdash; Sindre Sorhus (@sindresorhus) April 7, 2019 補足情報 TypeScript公式リポジトリのWikiにnullを使ってはいけないという記述を見つけましたが、これはコンパイラの開発者向けガイドであり、TypeScriptそれ自体のためのガイドではありません。\n STOP READING IMMEDIATELY THIS PAGE PROBABLY DOES NOT PERTAIN TO YOU These are Coding Guidelines for Contributors to TypeScript This is NOT a prescriptive guideline for the TypeScript community\nCoding guidelines · microsoft/TypeScript Wiki\n "
"プロジェクトページへリダイクレトします。\n"
"ブラウザで強制されてしまう約物アキの挙動を、よりDTPソフトに近い挙動へ改善するjQueryプラグイン。\n約物アキ量とは、日本語の括弧や句読点のあとに入る余白を指す。ブラウザではこの約物アキ量が常に半角で固定されてしまうが、そうすると約物が連続したときに余白が空きすぎてしまう問題がある。\nDTPの世界では、こういった広すぎるアキは詰めるのが普通だ。そのため、Webと書籍の組版を見比べると、たとえフォントが同じでもWebの方がスカスカしたダサい組版になってしまう。\n現状は最新のブラウザにしか対応していないものの、font-feature-settingsという新しいCSSプロパティで、この約物のアキをとることができるようになった。しかし、全部の約物へ一律にこれを適用すると、本来必要な箇所のアキまでなくなってしまう。\nこういった訳で、約物の前後関係を計算し、必要なところにだけfont-feature-settingsを適用できるスクリプトを作ることにした。\n 仕組み [Blast.js](blast.js tutorial)で文字を1文字づつspan要素に分解する 1文字づつ文字列を調べ、辞書にある文字クラスと一致していたら特別な約物クラスを付与する 前後にほかの約物クラスがある約物クラスには、その前後関係を約物の前後関係クラスとして付与する 1文字づつY座標を調べ、行頭文字と行末文字を検出し、特別な行頭・行末クラスを付与する 約物クラス、約物の前後関係クラス、行頭・行末クラスへ、CSS側でfont-feature-settings: \u0026quot;halt\u0026quot; 1;が特定のコンテキストのときにだけ適用されるようにする。これにより、「閉じ括弧の直後にある開き括弧」や、「読点の直後の閉じ括弧」といった条件をでアキ量を減らせる CSSの影響により、行頭だった文字が前の行に追い込まれてしまう場合がある。このときはさらに追い出しクラスを付与し、強制的に次の行へ追いこまれた文字を押し返す そうすると1文字分近いアキが行末に残ってしまうので、そのアキをその行に含まれる文字の字間で均等に吸収する DOMを大量に生成したり、インラインCSSの記述をゴリゴリやっているため、パフォーマンスはあまりよくなさそう……。\n実装の詳細はライブデモも参照。\n参考サイト 今回はじめてjQueryプラグインを自作してnpmに公開してみた。やってみるとどちらも意外と簡単だった。なお、最近のjQueryプラグインはcommonJS対応していないとwebpackなどからrequireできない。せっかくなのでrequireできる仕様にした方が良いだろう。(ただし、依存しているblast.jsはcommonJS未対応……。)\n jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | maesblog 初めてのnpm パッケージ公開 - Qiita また、npmのバージョン番号ルールとして採用されているセマンティック・バージョニングというものも始めて知った。一度公開すると二度とバージョン番号を下げてはいけない、ブレーキングチェンジがある場合はバグフィックス扱いでバージョンを上げてはいけないなど、ちゃんとしたルールがあるので読んでおきたい。\n セマンティック バージョニング 2.0.0 - Semantic Versioning ダウンロード \n NPM: jquery.yakumono GitHub: hokkey/jquery.yakumono: 日本語組版で役物のアキ量を調整するためのjQueryプラグイン ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2017年2月12日\n"
"づや会 vol4 ~Node.jsの話~の登壇資料です。 以前コマンドラインで作成したPDFの差分比較ツールを、Electronを使ってGUIアプリにしてみました。\n づや会Vol.4のレポート記事(LIGブログ): 今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！ | のびすけのイベントレポート コマンドライン版Qiita記事: GulpとGraphicsMagickでPDFを差分比較する。マルチページ・マルチファイル対応 - Qiita コマンドライン版ソースコード: hokkey/image-compare: image-comparing task with gulp and graphicsmagick スライド スライド(一部) "
"社内勉強会資料。制作系のフロントエンド技術者向けに、ソフトウェアテストについて概要をまとめたスライドです。\n本資料に関連し、『Pairwiser』について更に掘り下げた記事『Webアプリのテスト工数を削減できるかもしれないペアワイズ法とPairwiser』もQiitaに公開しています。\nスライド 参考資料 知識ゼロから学ぶソフトウェアテスト 【改訂版】 第1回 組み合わせテストの技法：組み合わせテストをオールペア法でスピーディに！｜gihyo.jp …… 技術評論社 現場で使うためのオールペア法、直交表の基本（2）：組み合わせテストを科学的に効率化する――手法とツール、品質保証のための道具 (1/3) - ＠IT Pairwiseテスト導入の効果と課題 Pairwiseは大規模パッケージソフトウェアで効果的に運用できるか 直行表とオールペア法の並行運用によるソフトウェアテスト 手法と強さ、印紙、水準の選択ガイドライン Pairwiser - Pairwise Testing and Test Generation Tool PictMaster プロジェクト日本語トップページ - OSDN スライド(一部) "
"普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。Wiki・チャット・チケット・資料の作成が捗ります!\nちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。\n参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］\n Markdown形式 Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。\nコード javascript:prompt(\u0026#39;Markdown\u0026#39;,\u0026#39;%5B\u0026#39;+document.title+\u0026#39;%5D%28\u0026#39;+location.href+\u0026#39;%29\u0026#39;)() 出力サンプル: [タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/) ブックマークレット: Title+URL: Markdown\nChatWork形式 国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。\nコード javascript:prompt(\u0026#39;ChatWork\u0026#39;,\u0026#39;[info][title]\u0026#39;+document.title.replace(/([\\[\\]])/g,\u0026#39;\\\\$1\u0026#39;)+\u0026#39;[/title]\u0026#39;+location.href+\u0026#39;\\n\u0026#39;+window.getSelection()+\u0026#39;[/info]\u0026#39;)(); 出力サンプル: [info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/ [/info] ブックマークレット Title+URL: ChatWork\nTextile形式 Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーですが、筆者はTextileの方が好きです。\nコード javascript:prompt(\u0026#39;Textile\u0026#39;,\u0026#39;%22\u0026#39;+document.title.replace(/\u0026amp;#34;/g, \u0026#39;\u0026#39;)+\u0026#39;%22%3A\u0026#39;+location.href)() 出力サンプル: \u0026quot;タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE\u0026quot;:http://media-massage.net/blog/linkbookmarklet/ ブックマークレット: Title+URL: Textile\nHTMLリンク形式(タイトル) \u0026lt;a\u0026gt;タグでマークアップ済のテキストデータを出力します。\nコード javascript:prompt(\u0026#39;HTML link\u0026#39;,\u0026#39;%3Ca%20href%3D%22\u0026#39;+location.href+\u0026#39;%22%3E\u0026#39;+document.title+\u0026#39;%3C%2Fa%3E\u0026#39;)(); 出力サンプル: \u0026lt;a href=\u0026quot;http://media-massage.net/blog/linkbookmarklet/\u0026quot;\u0026gt;タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE\u0026lt;/a\u0026gt; ブックマークレット Title+URL: HTML\nHTMLリンク形式(URL) \u0026lt;a\u0026gt;タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。\nコード javascript:prompt(\u0026#39;HTML link\u0026#39;,\u0026#39;%3Ca%20href%3D%22\u0026#39;+location.href+\u0026#39;%22%20title%3D%22\u0026#39;+document.title+\u0026#39;%22%20%3E\u0026#39;+location.href+\u0026#39;%3C%2Fa%3E\u0026#39;)(); 出力サンプル: \u0026lt;a href=\u0026quot;http://media-massage.net/blog/linkbookmarklet/\u0026quot; title=\u0026quot;タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE\u0026quot;\u0026gt;http://media-massage.net/blog/linkbookmarklet/\u0026lt;/a\u0026gt; ブックマークレット Title+URL: HTML(URL)\nプレーンテキスト形式 FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。\nコード javascript:prompt(\u0026#39;Plain text\u0026#39;,document.title+\u0026#39;%5Cn\u0026#39;+location.href+\u0026#39;%5Cn\u0026#39;)(); 出力サンプル: タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE http://media-massage.net/blog/linkbookmarklet/ ブックマークレット Title+URL: Plain\n"
