1月メモ・リンク集

1月に調べたことのメモです。

Angular関連

• AngularのCDK Tableのコードを読みながら、Viewの組み立て方について調べる - ryotah’s blog

Date系ライブラリとIANA

最近はLuxonを利用しています。Intlのブラウザ対応状況、他のライブラリのタイムゾーン関連のサポートについて気になったので、そのあたりを調べた時のメモです。

• ECMAScript Internationalisation compatibility table
  • IE11は accepts IANA timezone namesに対応していない
• TimeZone support · Issue #19 · andyearnshaw/Intl.js · GitHub
  • IANA data implementedしている他のライブラリ情報なども
• GitHub - date-fns/date-fns: ⏳ Modern JavaScript date utility library ⌛️
  • IANA support · Issue #180 · date-fns/date-fns · GitHub
    • IANA実装状況

複数のプロジェクタで共有したいロジックとコンポーネントをパッケージ化した

• TypeScripのUtilパッケージ
  • GitHub - alexjoverm/typescript-library-starter: Starter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!
    • これを使った
    • webpackで自分で環境作ろうしたけど、これが楽すぎたので
    • パッケージ自体に取り込みたくない外部ライブラリはpeerDependenciesに
      • rollup.config.jsでexternal指定も必要（書かなくても含まれなかったんだが？）
    • Write a library using TypeScript library starter
      • 紹介記事
• Angualr Component
  • GitHub - dherges/ng-packagr: Transpile your libraries to Angular Package Format
    • これを使った
    • webpackで自分で環境作ろうしたけど（以下略）
    • Angular Package Formatになる
    • Angular CLIと組み合わせ可能
      • パッケージに含めたいモジュールをpublic_api.tsで定義する
    • Git urls形式で取得することにしているのでルートのpackage.jsonにmain, module, es2015, typings, metadata, filesの設定を追加
      • 通常はdistフォルダ自体をパッケージとして登録する（dist内のpackage.jsonを利用する）
    • Building an Angular 4 Component Library with the Angular CLI and ng-packagr
      • 紹介記事

必要な前提知識

最終的に上記環境を利用し、簡単にパッケージ作成ができるようになったのだが、実際には色々とつまづいた。原因は、前提となる基礎知識がかけていたから。
（基本的な公式ドキュメントはしっかり読みましょうという話）

• npm Documentation
  • 11 - How to create Node.js modules | npm Documentation
  • 12 - How to publish a package | npm Documentation
    • npm adduser, npm publish,
    • npm version patch, npm version x.x.x など
      • version | npm Documentation
  • 14 - How to work with scoped packages | npm Documentation
    • プライベートなパッケージ作成について
    • @username/project-name
    • npm publish --access=public
  • 19 - Understanding packages and modules | npm Documentation
    • packageとは, moduleとは
  • package.json | npm Documentation
    • files, main, Git URLs as Dependencies など
• Tutorial for Writing a TypeScript Library

ReactのHOCs

• React Table - A lightweight, fast and extendable datagrid built for React
• Reactの Higher-order Components (HoCs) という概念に関するメモ - Qiita
• ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | プログラミング | POSTD
  • ReactのComponents, Elements, Instances - Qiita
  • React Components, Elements, and Instances - React Blog

その他

• cpx と rimraf を試す – アカベコマイリ
  • rimrafをよくみかけたので
    • rm -rfに該当する
• TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
  • ゆるふわだったので復習
  • declaration space
    • Value、Type、Namespace

  • そのファイルがいま module なのか？を意識すると定義ファイルでハマることも少なくなると思います。

  • namespace が導入されたのは結構最近なので、以前からある定義ファイルでは module となっている場合があるということを頭に入れておくといいでしょう。

  • declare global { }
• prittierを特定フォルダ以下のtsファイルで走らせる
  • npx prettier --single-quote --trailing-comma es5 --write src/**/*.ts
    • Run prettier on all JS files in a directory – Ajay – Medium
    • Options · Prettier