開発覚書はてな版

個人的な開発関連の備忘録

【TypeScript】index.ts(バレル)の使い方

概要

TypeScript利用時に毎回ファイル単位でimportするのは面倒ですね。 そういう場合、index.tsに対象ディレクトリのファイルをまとめて export しておくと便利です。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載することで利用できます。

basarat.gitbooks.io

続きを読む

【Angular】ngIf と hidden の個人的な使い分け

概要

Angular で *ngIf[hidden] の個人的な使い分けを記載します。

基本的には表示・非表示の切り替え頻度が多いものは hidden にしています。
ブラウザの処理速度によっては ngIf だとDOM生成・破棄に時間がかかりレンダリングに影響するケースがあったため、切り替えが多い箇所はhiddenを個人的には推奨しています。
初回判定のみで切り替えがまったくないものについては ngIf を使用しています。

続きを読む

【Angular】ngFor trackBy の実装

概要

Angular の ngForにはtrackByという設定項目があります。

ngForはtrackByを使用しない場合、コレクションに変更があったら全てのDOMを再生成します。 trackByを使用することで変更箇所のDOMのみ再生成するように設定できます。

再描画が多いngForを使用している箇所ではパフォーマンスチューニングの一環としてtrackByの使用をおすすめします。

続きを読む

【Angular】IE11でArray.includesを使用する

概要

Angular や TypeScript で Array.includes を使用した場合、IE11ではundefinedでエラーになります。 IE11はES5を採用しているため、ES7の Array.includes は対応していない為です。

そのため、IE11でも使いたい場合はpolyfillsの設定が必要になります。 Angularの標準 polyfills.ts ではES7のものは記載されていないため、個別に追加する必要があります。

続きを読む

【VSCode】Visual Studio Code v1.30 の気になる新機能

目次

  • 目次
  • 概要
  • Languages
    • Improved display of JavaScript and TypeScript callbacks
    • Highlighting of Markdown elements in JSDoc comments
  • Workbench関連
    • Multiline search input
    • References view

概要

Visual Studio Code v1.30がリリースされましたね。
恒例の気になる新機能をピックアップして紹介します。

code.visualstudio.com

続きを読む

【イベント参加】HTML5 Conference 2018に参加してきました

概要

HTML5 Conference 2018に参加してきました。
今回はWEBのフロント技術の話を中心に聴いてきました。

events.html5j.org

全体的な感想

  • Angular系のセッションが意外とあった。開発実績からのノウハウ的な話が聴けて良かった。設計パターンまわりは参考に出来そう。
  • AMPは色々クセがある技術だが、今後の展開を追っていきたい。
  • Reactのチューニングででたが、差分レンダリングまわりについては他のフレームワークでもボトルネックになる可能性があるので、初期設計時にある程度考慮しておきたい。
  • NestJSはAngularやJavaを経験している人はすぐ対応出来そうなフレームワークでした。日本語情報が少ないのが難点ですが・・・

メモ書き

以下に参加しながら記載したメモ書きを貼っておきます。

github.com

【VSCode】Visual Studio Code v1.29 の気になる新機能

目次

  • 目次
  • 概要
  • Search関連
    • Multiline search
    • Show line numbers in search
  • Workbench関連
    • Symbol order in Breadcrumbs
  • Preview Features
    • IntelliSense locality bonus
  • おわりに

概要

Visual Studio Code v1.29がリリースされましたね。
気になる新機能をピックアップして紹介します。

code.visualstudio.com

続きを読む

【Angular】EOLスケジュール(4.x - 7.x)

概要

Angularの直近バージョンのEOL(End-of-Life, サポート期間終了)スケジュールを箇条書きにしておきます。
1バージョンはアクティブサポート6ヵ月、LTSが12ヵ月の合計18ヵ月サポートされます。
また、半年間隔でメジャーバージョンアップが計画されています。

公式情報

https://angular.io/guide/releases

EOLスケジュール

  • 4.x :2018年09月(EOL)
  • 5.x :2019年05月
  • 6.x :2019年11月
  • 7.x :2020年04月

バージョンアップについてのメモ

  • 4 -> 5 ではHttpClientへの変更があり、サービスクラスまわりの実装を移行する必要があります。 その他にもクラスが変わっているものもあります。
  • 5 -> 6 ではRxJSのバージョンアップがあり、だいぶ記述が変わります。
  • 6 -> 7 については特段破壊的変更がないので、上げれるところは上げとくと良いです。

【Node.js】EOLスケジュール(6.x - 11.x)

概要

Node.jsの直近バージョンのEOL(End-of-Life, サポート期間終了)スケジュールを箇条書きにしておきます。
基本的には奇数バージョンが新機能が含まれ寿命が短いバージョンで、偶数バージョンがLTSです。

公式情報

github.com

EOLスケジュール

  • 6.x :2019年04月
  • 7.x :2017年06月(EOL)
  • 8.x :2019年12月
  • 9.x :2018年06月(EOL)
  • 10.x :2021年04月
  • 11.x :2019年06月

【Angular】Virtual Scrollingの実装

概要

Angular CDK 7.0.0で Virtual Scrollingが追加されました。
これは表示されている部分のみDOM要素を生成するものになります。
表示以外の箇所のDOM生成は行わないため、パフォーマンスが向上します。

続きを読む