2016-10-14

悩めるangular2使い【CSSスタイリング】

angular2

angular2を使っていて、
とても悩ましく思うことが多々あります。

そのうちの１つは
実現可能な実装方法が複数ある中で
どの方法を選択するのかという悩みです。

これはプログラミングする上では当たり前の悩みですし、
どの方法を選択するかは腕の見せ所ではあるのですが、
angular2に関してはまだ判断基準が曖昧でして。

ここでズバリこれがベストプラクティスだ！
と示すことができればかっこいいんですが
現状、結論のでないまま悶々とした気持ちで
悶々とさせる記事を投稿しやがります。

例えば、
コンポーネント内でh1タグの背景色を赤色にする
という初歩的な実装があったとします。

それを実現するにあたり、
私が思いつく限りでは6つの実装方法があるかと
思います。

ソースを見た方が早いかと思うので
こちらをご覧ください。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

  <!-- ①定石通りにやる場合 -->
  <h1 style="background-color:#ff6666;">
    {{title}}
  </h1>

  <!-- ②カプセルCSSの場合 -->
  <h1 class="sample">
    {{title}}
  </h1>

  <!-- ③プロパティバインドの場合 -->
  <h1 [style.backgroundColor]="'#ff6666'">
    {{title}}
  </h1>

  <!-- ④ngStyleを使う場合 -->
  <h1 [ngStyle]="{'background-color':'#ff6666'}">
    {{title}}
  </h1>

  <!-- ⑤ngClassを使う場合 -->
  <h1 [ngClass]="{sample:true}">
    {{title}}
  </h1>

  <!-- ⑥カスタムディレクティブを使う場合 -->
  <h1 sample>
    {{title}}
  </h1>
  `,
  styles: [`
  .sample{
    background-color:#ff6666;
  }
  `]
})
export class AppComponent {
  title = 'app works!';
}

import { Directive,ElementRef,Renderer } from '@angular/core';
@Directive({
  selector:'[sample]'
})
export class SampleDirective{
  constructor(private el:ElementRef,private renderer:Renderer){
    this.renderer.setElementStyle(this.el.nativeElement,'background-color','#ff6666');
  }
}

画面はこのように表示されます。

f:id:zetton110:20161014021126p:plain

すべて同様の結果となっています。
この①〜⑥の使いドコロとメリデメを自分の中で
明確にしたいのですが結論はでていません。

自分なりの答えが見つかり次第、
随時追記していく予定です。

もしこの記事を見たangular2使いの方で
思うところがある方はぜひコメントを残していただけると
泣いて喜びます。

2016-10-12

angular2入門【ディレクティブ編】

こんにちわ、
ゼットンです。

今日はangular2のディレクティブを
作ってみましょう。

ディレクティブについて簡単に説明すると、
HTML要素に対して修飾や振る舞いの変化を
与えるものです。

口で説明するより
実際にやってみた方が早いので
早速手を動かしてみましょう。

例によって
ng newをした後からスタートです。

お、マリさんが来たので、
今回はタイトルを少々変えましょう。

画面はこうなってます。

では、今回のテーマのディレクティブを作ります。
src>appフォルダ配下に
shiny.directive.tsというファイルを追加します。

内容はこのようにしてみました。

importするのは3つのモジュール。
それぞれの役割は以下になります。
・Directive　　　・・・ディレクティブの定義付け
・ElementRef　　・・・ HTML要素へのアクセス
・Renderer　　　・・・要素の修飾

@Directiveのselectorプロパティに
ディレクティブ名を定義します。
this.el.nativeElementによって
ディレクティブが付与されるHTML要素に
アクセスできます。
それをrendererのsetElementStyleメソッドに第1引数として
渡し、CSSの指定を第2、3引数で行っています。ではこのディレクティブを使ってみましょう。
app-rootに下記を追加実装します。

先ほど作成したディレクティブを読み込み、
h1タグにディレクティブ名を与えています。

次に、モジュールに作成したディレクティブを追加します。
app.module.tsを下記のようにします。

declarationsに作成したディレクティブを
登録することをお忘れなく。

ここまできたら
画面を確認してみましょう。

ありがとうございました。

2016-10-10

angular2入門【Bootstrap導入】

Bootstrap angular2

こんにちわ
ゼットンです。

ng-bootstrapの導入

今回は、angular2のプロジェクトにbootstrapを導入してみます。
手順としては

１．npmインストール
２．バンドルの中へ含まれるようにする
３．アプリ内でグローバルに使えるようにする
という感じ。

1. npmインストール

プロジェクトフォルダに移動し、
下記を実行します。

npm install --save ng2-bootstrap

2. バンドルの中へ含まれるようにする (src/app/shared/index.ts)

angular-cliはwebpackによって
自動的に一つのJavascriptファイルに連結されます。
その中にbootstrapが含まれるようにindex.tsに定義します。

import '../../../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js'

3. アプリ内でグローバルに使えるようにする (src/styles.css)

styles.cssに下記の定義を加えることで、アプリ全体にBootstrapを適応できます。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

2016-10-10

angular2入門【パイプ編②】

angular2

こんにちわ
ゼットンです。

前回はangular2の組み込みパイプについて
扱いました。
今回のテーマはカスタムパイプです。

カスタムパイプ

カスタムパイプとは
独自に定義したパイプです。
例えば前回UpperCaseパイプやDateパイプを
使ってサクッと表記の変更をしました。
あのような機能を勝手に作れちゃうんですね。
もちろん変換部分はそれぞれで実装が必要ですが。
ではやってみましょう。

まずは例によって、ng newをした直後の
Hello world状態からスタート。

app-rootタグの中身です。
デフォルト状態だとコンポーネント内が分割されて見通しが悪いので、
1ファイルにまとめてあります。ここは気になさらず。

ではapp-rootタグと同じ階層に
カスタムパイプ用のtsファイルを追加しましょう。
名前は「hina.pipe.ts」でいきましょうか。

中身はこんな感じで実装してみました。

カスタムパイプは@angular/coreからPipeとPipeTransformを
インポートして作成します。
@Pipeのnameプロパティにパイプの名前を指定しています。
中の実装については、簡単すぎるので説明しません。
後の動作確認で全てわかります。

ではこのパイプを使うために、
app-rootタグの中身をちょこっと変えちゃいます。

画面は以下のような感じ。
テキストボックスに入力すると・・・

即座に画面に描画されるようになっています。
inputタグに#inputという形で
Template Syntaxを付加し、
pタグ内でバリューを取り出しているという実装です。
ここについては追々詳しく話せたらと思います。
そんで、今回はパイプ！ですね。
ここに、先ほど作成したhinaパイプを実装してみます。
とは言っても簡単です。こんな感じ。

ファイルをimportして
組み込みパイプと同じようにパイプ名で呼び出しています。
パイプ名は先ほど@Pipeのnameプロパティに
設定してあげた名前です。

そんで画面を見てみると・・・

おやぁ？
Loadingから動きません。
これはエラってるやーつですね。
F12を押してコンソールを確認すると

大丈夫！
おいたんに任せろ！
このエラーは前に見たことあるぞ！！(前々回を参照)

このエラーの原因は、

カスタムパイプをモジュールに追加していないから

です。

というわけで、
hinaパイプをモジュールに追加してやりましょう。
app.module.tsに追記します。

コンポーネントと同様に、
パイプを追加した場合もモジュールのdeclationsに追加
してあげないといけません。
これでhinaパイプが使えるようになりました。

では、動作確認をしましょう。

まずは誤動作しないか、
適当な文字列を入力しましょう。

大丈夫ですね。
ひなパイプは反応してません。

こちらも大丈夫です。
ひなパイプは反応してません。

では、
最後に「ひな」と入力してみます。

ドクン・・・ッ

キターーーーーーーーーーーーーーーーーーーー！！！！

次回はディレクティブでも扱いますか。

2016-10-07

angular2入門【パイプ編】

angular2

前回はコンポーネントの追加について、
お話しました。

ひな〜〜おいたんはゼットンだよ〜本日はパイプを使ってみるよ〜

組み込みパイプ

パイプとは何かと言いますと
文字列や数字を整形する機能、とでも言いましょうか。
実際に使って見せた方が早いので
やってみます。

ng newしたところからスタート。
コンポーネントは1ファイルにまとめてますが
構造は変わってません。
app-rootの中身はこんな感じ。

そして画面は

超デフォルトです。
これにパイプをくわえて見ましょう。
そーい！

変数titleの右に変なものがつきましたねぇ。
これがパイプってやつです。
それで画面がどうなったかというとー

おわかりいただけただろうか。
app works!がAPP WORKS!になりました。
これがUpperCaseパイプの機能です。
angular2にデフォルトで組み込まれている機能なので、
特に何もインポートしなくても使えます。

組み込みのパイプは他にも色々あります。
例えば〜の話をするために、
app-rootを再び書き変えちゃいます。

変数todayに今日の日付のDate型オブジェクトを入れて
画面に出してみました。
これがどんな風に見えるのかというと

長い！
情報が多くてよくわからん。
まあDate型のオブジェクトをそのまま
出したらこうなりますよね。
普通は年月日をそれぞれ取り出して連結する手間を
加えてから画面に出すかと思います。
ですが、パイプを使うと簡単にいい感じに
整形できます。こんな感じ。

f:id:zetton110:20161007004759p:plain

やってることはこれだけ。

これがDateパイプです。
他にも組み込みのパイプは色々あります。

詳しくは公式ドキュメントをご覧あれ。

angular.io

パイプは単独でも使えますが、複数のパイプを組み合わせることもできます。例えばこんな感じ。

これで画面がどうなってるのかというと

おわかりいただけただろうか・・・地味にNovがNOVに変わりました。 Dateパイプで書式が変換されたものを更にuppercaseパイプで大文字に変換したんですね。これは便利、色々使えそうです。

組み合わせて使う以外にも、オプションをつけて使うということもできます。例えば先ほどのdateパイプにオプションをつけてみます。こんな感じ。

なんとなくどうなるか想像できますね〜
こうなります。

くうぅぅぅぅぅぅかわいいーー！！！！！
ってダメでしょ、ひな！！
画面はこっちです。

やっぱりね！
こうなるよね！！
今日はもう一つだけパイプにオプションをつけた例を
紹介して終わりにしましょう。

app-rootを書き換えて〜
ひなのことを考えてたら
次のような実装になっちゃいました。

画面はこんな感じ。

ここにSliceパイプをオプション付きで加えてみます。
ほいっ！！

そして画面は！

次回はカスタムパイプだお！！

2016-10-05

angular2入門【コンポーネント編②】

ゼットンです。
前回は自動生成されたソースを見ながら
Componentについて説明しました。
今回はここに新たなコンポーネントを追加してみます。

Componentの追加

src>appフォルダにchild.component.tsというファイルを
追加します。
中身は下記のようにします。

タグ名はapp-childとします。
名前はなんでもいいですが、
独自定義のタグはapp-xxにするとか
ルールを設けとくと標準のタグと
すぐに見分けがついていいと思います。
そんで、変数titleにchild component!という
文字列を格納します。

ではでは、このChildコンポーネントを
前回説明したapp-rootの中で使いたいと思います。

というわけで、
app-rootに下記の実装を追加。

import文で先ほどのchildコンポーネントを読み込みます。
ここはファイル名で指定します。
そんで、タグ名をHTML部分に書いてあげてます。
つまり、ファイルを読み込み、タグ名で呼び出しているというわけ。
なんとなく動きそうな気がします！
ng serveコマンドを打って、
http://localhost:4200にアクセスしてみましょう。