Corredor

ウェブ、プログラミングの勉強メモ。

VSCode で Angular 開発する際に入れておくと良い拡張機能

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)

Angular4 系の開発をする時に VSCode に入れておくと良さげな拡張機能たちを紹介する。

Angular v4 TypeScript Snippets

SPA や Angular の界隈で有名な John Papa さんがメンテナンスしている。Angular のスニペットを一瞬で吐いてくれるのだが、a- 始まりで出てくるようになっているので、普段誤ってスニペットが吐かれたりしなくて良い。

Beautify

JSON なんかを良き感じに整形したりとかに使っている。.jsbeautifyrc は置いていない。

Code Spell Checker

英語がダメな人はコレを入れてスペルチェック。

EditorConfig for VS Code

プロジェクトディレクトリにある .editorconfig の設定に従って、保存時に自動整形してくれる。自分が指定している内容は Angulra CLI が自動生成してくれるヤツそのまんまでシンプル。

Git History (git log)

Git 管理しているソースの差分がエディタの行番号のところに出たりするので分かりやすい。

Path Intellisense

import とかで相対パスを打っているときに自動補完してくれる。../ まで打つとそのファイルを起点とした相対パスで周辺のファイルを候補に出してくれたりして良い。

Protractor Snippets

Angular アプリで E2E テストとなると Protractor 一択。ということで Protractor 向けのスニペットを吐いてくれるヤーツ。

TSLint

プロジェクトディレクトリにある tslint.json を見てエディタ上に警告やエラーを出してくれる。TSLintFixer が用意されているルールであれば、保存時に自動修正もしてくれる。import の並び順とかを自動で揃えてくれるのは嬉しい。

tslint.configFile というオプションを指定すれば、エディタ上で使う tslint.json を別のファイルに切り替えられるようなので、必要であればこちらも試したい。

TypeScript Importer

プロジェクトディレクトリ配下で定義ファイルを特定できる型であれば、それっぽいクラス名とかを途中まで打つとそのクラスを候補に表示してくれて、それを選択すると import 文を自動で挿入してくれる。


Java 上がりだとこのあたりの機能って Eclipse が全部標準装備していたけど、発展途上の言語だとなかなか完璧パーペキな IDE 環境ができない。import とかももっと楽になるといいんだけどな〜。

tsconfig.json を切り替えてビルドする方法

TypeScript を使っているとき、開発時は緩めのチェッカを指定して、本番ビルドや Angular の AoT コンパイルの際は別のオプションを指定したい、とかで、複数の tsconfig.json を切り替えて運用したい場合があるかと思う。

その際は、tsconfig.json の他に、tsconfig-aot.json とか tsconfig-prod.json のように、ハイフンで区切った別名のファイルを置いておき、

# Angular の AoT コンパイル
$ ngc -p tsconfig-aot.json

のようにすると良い。

なぜハイフンで区切るかというと、tsconfig.aot.json のようなファイル名にしてしまうと、VSCode などの IDE がこのファイルを参照してエディタ上のチェッカとして利用してしまうからだ。なぜかドット区切りだと認識されてしまうので、ハイフン区切りやアンダースコア区切りなどがオススメ、というワケ。

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

アップロードされた画像ファイルを Data URL 形式で表示する

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版 (Mynavi Examination Library)

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版 (Mynavi Examination Library)

HTML5 で追加された FileAPI に readAsDataURL() というメソッドがあるので、コレを使うと簡単に画像の DataURL が取得できる。input[type="file"] を使うので、画像以外のファイルでも DataURL 形式にできる。

<!-- ファイルアップロード欄 -->
<p><input type="file" id="input-file"></p>

<!-- 結果表示欄 -->
<p id="result"></p>
// input[type="file"] が変更した時のイベントとして設定する
document.getElementById('input-file').addEventListener('change', () => {
  // アロー関数を function() にすれば inputFile は this に書き換え可能
  const inputFile = document.getElementById('input-file');
  // 結果表示欄
  const result = document.getElementById('result');
  
  // ファイルがなければ終了
  if(!inputFile.files.length) {
    result.style.display = 'none';
    return;
  }
  
  // ファイルを読み込む FileReader オブジェクトを生成する
  const fileReader = new FileReader();
  // ファイル読み込み完了時の処理 : event.target.result が DataURL になっている
  fileReader.onload = (event) => {
    console.log(`DataURL : ${event.target.result}`);
    result.innerHTML = event.target.result;
  };
  
  // 選択されたファイルを取得する
  const file = inputFile.files[0];
  // DataURL 形式でファイルを読み込む
  fileReader.readAsDataURL(file);
});