Angular2にて、依存性の注入（dependency Injection）をする

Angular2にて、依存性の注入（dependency Injection）を行う

AngularJSでは、引数の情報を用いてDIを行っていましたが、 Angular2ではやり方が大きく変わりました。

今回はAngular2でDIを実践しようと思います。 具体的には、app.componentに、 ボタンをクリックした回数を保持するClickButtonManagerというサービスを注入してみたいと思います。

0. 準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new angular-di
ng serve

1. ClickSaveServiceの生成

ng g service click-save

以下のようなファイルが出来上がります。 ※画像

2. ClickSaveServiceの編集

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

@Injectable()
export class ClickSaveService {

  constructor() { } 
  
  /** ここから */
  public clickCount :number = 0;

  clickCountUp() :void{
    console.log('DIされたサービスがボタンをクリックされた回数に1を足すよ');
    this.clickCount ++; 
  }
  /** ここまで追加 */
}

3. app.componentのコンストラクタにサービスを注入

import { Component } from '@angular/core';
import { ClickSaveService } from './click-save.service'; // 追加

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ ClickSaveService ] // 追加
})
export class AppComponent {
  private title = 'app';
  private clickSaveService :ClickSaveService; // 追加

  /** ここから */
  constructor(clickSaveService :ClickSaveService) {
    this.clickSaveService = clickSaveService;
  }

  onClickButton() {
    this.clickSaveService.clickCountUp();
    console.log(this.clickSaveService.clickCount);
  }
  /** ここまで追加 */
}

重要なのは、 * prividersにサービスを定義したクラスを記述すること * constructorにDIするサービスを記述すること の２点です。

結果

angular2の@angular/routerを用いて、ページ遷移をするためのrouting設定をする

angular2のrouterを用いて、ページ遷移ができるようにする

今日は、こんな感じの簡単なroutingを実現してみたいと思います。

0. 準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new angular-router
ng serve

1. app.component.htmlの編集

以下のように編集します。

<h1>{{title}}</h1>                 
<nav>
  <a routerLink="/first">１ページ目へ</a>
  <a routerLink="/second">２ページ目へ</a> 
</nav>
<router-outlet></router-outlet>

<router-outlet>にそれぞれのページの内容が出力されます。

2. それぞれのページ用コンポーネントを生成

ng g component first-page
ng g component second-page

3. app.moduleにRouterModuleとRoutesをimport。各々のcomponentもimport。

// src/app/app.module.ts

// routing用のmodule
import { RouterModule, Routes } from '@angular/router';
// 各ページを表示させるためのコンポーネント
import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';

4. app.moduleのimportsにRouterModuleを追加し、routingの設定をjson配列で書き込む

// src/app/app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],  
  imports: [
    BrowserModule,
    // -- ここから --
    RouterModule.forRoot([
      {path: "first", component: firstPageComponent },
      {path: "second", component: secondPageComponent }
    ])
    // -- ここまで追加 --
  ],                                  
  providers: [],                      
  bootstrap: [AppComponent]           
})

routingの設定は、

{ path: "routingのパス", component: "使用component"}

の配列で指定することが出来ます。

結果

angular2で親componentから子componentへ値を受け渡す方法

angular2で親componentから子componentへ値を受け渡す

0. 準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new deliver-property
ng serve

1. 親コンポーネントとテンプレートに以下を記述

// app.component.ts
export class AppComponent {
  private deliverProperty: string = '子供に送るよ。';
  private notDeliverProperty: string = '子供に送らないよ。';
}

<!-- app.component.html -->
<h1>親コンポーネント</h1>
<ul>
  <li>{{deliverProperty}}</li>
  <li>{{notDeliverProperty}}</li>
</ul>

定義した2つのプロパティのうち、 deliverPropertyを子コンポーネントに渡すことにします。

2. 親コンポーネントのテンプレートに、コンポーネントへ渡したい変数を書く

今回、

• app component の deliverProperty を
• child component に
• parentPropertyとして

渡したいとします。

<!-- app.component.html -->
<h1>親コンポーネント</h1>
<ul>
  <li>{{notDeliverProperty}}</li>
  <li>{{deliverProperty}}</li>
</ul>

<app-child [parentProperty]="deliverProperty"></app-child>

3. 子コンポーネントを生成

ng g component child

4. 子コンポーネントにてInputを記述

以下の２箇所を記述します。

// child.component.ts
import {
  Component,
  OnInit,
  Input // ←その１
} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() parentProperty; // ←その２
  constructor() { } 

  ngOnInit() {
  }

}

その２には、 親から渡される変数名ではなく、子で使う変数名を記述します。

5. 子コンポーネントのテンプレートに変数を記述

<!-- child.component.html -->
<h1>子コンポーネント</h1>
<p>{{parentProperty}}</p>

結果

angular2で要素をclickした時に、処理を行う

angular2で簡単にクリックイベントを実装

angularJSではng-clickというディレクティブを使ってクリックイベントを実装していました。

angular2ではどのように実装するか、実際に実装しつつ試してみたいとおもいます。

手順

1. 準備
2. app.component.htmlにクリックさせたい要素を配置
3. app.component.tsにクリックしたときの処理を記述

準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new click-event
ng serve

app.component.htmlにクリックさせたい要素を配置

// app.component.html
<h1 (click)="countUp()">クリックしてね</h1>

app.component.tsにクリックしたときの処理を記述

// app.component.ts
export class AppComponent {
  count :number = 0;
  countUp() :void {
    this.count ++;
    console.log(this.count + '回クリックされたよ');
  }
}

結果

angular2でngFormを用いて双方向データバインディングを実現

angular2で双方向データバインディング

angularJSとangular2では、双方向データバインディングの方法が異なります。 今日はangular2を使って双方向データバインディングを実現していきましょう。

手順

1. 準備
2. FormsModuleを読み込む
3. componentのテンプレートに[(ngModel)]を記述

準備

angular tutorialからgit cloneしてきます。

もろもろのmoduleのinstallを行い、ローカルサーバをスタートさせます。

git clone https://github.com/angular/quickstart.git
cd quickstart
npm install
npm start

FormsModuleを読み込む

app.module.tsにて、以下矢印部分２つを追記します。

// app.module.ts
import { FormsModule } from '@angular/forms’; // ←

@NgModule ({
  imports: [FormsModule] // ←
})

componentのテンプレートに[(ngModel)]を記述

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input [(ngModel)]="name">
  <h1>{{name}}</h1>
  `,
})

export class AppComponent  {
  name = 'Angular';
}

結果

フロントエンドエンジニアとは何か、バックエンドエンジニアとは何か

なんとなく使っていたフロントエンドとバックエンドと言う言葉を今一度整理してみました。

超ざっくりなので初心者向けです。

フロントエンドエンジニアについて

作るもの

フロントエンドエンジニアは、主に「ユーザの目に見える部分」を作ることが多いです。

例えばアマゾンのページにアクセスした時のことを考えてみましょう。

アマゾンのトップページには様々なリンクやボタンがあります。

そしてそれらのリンクやボタンを押すことができます。

このような、ユーザの目にみえて、

そして直接操作ができるような部品を作るのがフロントエンドエンジニアの仕事です。

必要なスキル

ただ部品を作るのが仕事ではありません。

部品を作る（コーディングする）スキルはもちろん、

ユーザにとって使いやすいデザインを考えるスキルも必要です。

扱う言語

扱う言語としては、主にHTML, CSS, JavaScriptなどです。

JavaScriptはその昔、

ページの部品（DOM）を動かしてちょっとだけ装飾を加えたりするくらいの小さな開発にて

で使われることが多かったようです。

しかし近年、開発工数を大幅に減らすことができ、

しかもよりユーザにとって使いやすい画面を提供することができる

JavaScriptのフレームワークがどんどん出てきています。

よく使われるものとしては、

Googleが開発提供しているAngularJS、

Facebookが開発提供しているReact.js、

他にもBackbone.js、Vue.jsなどがあります。

これらのフレームワークの登場により、

ユーザにとても使いやすいページが簡単に実装できるようになりました。

そのため、以前に比べフロントエンドエンジニアの案件は増えているといえるでしょう。

バックエンドエンジニアについて

作るもの

バックエンドで開発する部分は、基本的にユーザからは見えない部分です。

先程の例で言えば、

アマゾンのトップページから商品を検索する際商品名を入力してエンターキーを押すと、

エンターキーを押すと商品名がサーバーに送られます。

すると、サーバー上にある大量のデータベースの中から、

商品名を含む商品が検索されブラウザへ帰ってきます。

こうしてブラウザに検索結果が表示されます。

このように、ユーザが送ってきた情報をもとに、

データベースを操作（追加・削除・検索・加工）するような、

目に見えない部分を開発しているのがバックエンドです。

扱う言語

よく使われているのが、Java、PHPなどです。

また少し前からかなり増えてきているのがRubyです。

特にRubyは、開発工数を大幅に減らし、

楽しく開発できるRuby on Railsというフレームワークが登場してからよく使われるようになりました。

ちなみにRubyを開発したのは日本人（Matz）です。

必要なスキル 

大量のデータを取り扱うことになるので、

データを加工したり、検索したり、追加したりするのをいかに早く扱うか、

というパフォーマンス部分はとても重要になってきます。

パフォーマンスを改善するにはアルゴリズムについての知識は必須です。

また、予約システムや購入システムなど、

いろいろな要素が絡み合う複雑なロジックを扱うこともあります。

それらの複雑な物事を整理する力などが必要となってきます。

フロントエンドエンジニアとバックエンドエンジニアは手を取り合おう

フロントエンジニア・バックエンドエンジニアはともになくてはならない存在です。

フロントエンドエンジニアがいなければ、

ユーザが触ることができる画面を作ることができません。

バックエンドエンジニアがいなかったら、

アプリケーションの機能そのものを作ることはできません。

フロントエンドエンジニアとバックエンドエンジニアが協力的に開発を進めることにより、

ユーザにとって使い勝手も良い高機能なアプリケーションを作ることが可能になるのです。

僕はバックエンドエンジニア（PHPer）だったのですが、

最近AngualrJSを使ってから、

画面をグリグリ動かせるJavaScriptがかなり好きになってきました。

ただなかなか癖がある（PHPもくせあるだろ！と言われそうですが）ので、

なかなか慣れるまで時間がかかりそうです。

頑張って勉強しよう。

とかろてんは思ったよ。

フリーランスエンジニアを雇う、企業側のメリット

最近フリーランスエンジニアと言う言葉をあちこちで目にするようになった。

一時期私もフリーランスエンジニアとして働いていた。

自由だった。出勤時間も自由だったし、作業場所も自由だった。

そんなメリットがあったのでフリーランスエンジニアになった。

しかし縛られないがゆえのデメリットもあった。

このように、多くの記事では、

フリーランスエンジニアとして働く「雇用側（正式には雇用ではない）」のメリット・デメリットについて触れている。

しかし、フリーランスエンジニアを雇う「企業側」のメリット・デメリットについて述べている記事は少ない。

そこで、企業側のメリットについてまとめてみたいと思う。

（デメリットはまた別の記事で）

・安く雇える

これは、「フリーランスエンジニアの単価は一般的なサラリーマンの収入に比べると高い」という事実に矛盾すると思う人もいるだろう。

ここで、サラリーマンの収入について「貰う側」「払う側」で考えてみたい。

貰う側からしたら

　サラリーマンの手取り = 給与 - 税金

払う側からしたら

　給与 = サラリーマンの手取り+ 税金 * 2

※サラリーマンは会社に税金の半分を負担してもらっている。

逆からみると、会社はサラリーマンの給与から天引きされる税金の２倍を払っている。

その他諸々含め、企業が25万の給与を支払う場合、会社が実際に負担している金額は40万程度だと言われている。

それに対し、フリーランスエンジニアは外注なので、税金を負担しなくてもよい。

それだけサラリーマンよりも高い「報酬」を払うことが可能だ。

ただし、必ず安く雇えるとも限らない。

単価の高いフリーランスエンジニアを雇った場合などは、やはり会社員にかけるお金よりも高い金額を払う必要が出てくる。

しかしそれでもなお、フリーランスエンジニアを雇うメリットがある。

それが以下の点だ。

・固定費を抑えられる

会社にとって、毎月出ていくお金（固定費）が少ないことはとても良いことだ。

社員を雇うと、毎月給与を払わなくてはならない。

その時会社が儲かっていなくても、かならず給与は発生する。

しかし、フリーランスエンジニアはプロジェクト単位での契約であることがほとんどだ。

つまり、プロジェクトが終わったら任期が切れる。すると、繁忙期以外は固定費を抑えることができる。

これは会社にとって大きなメリットだ。

このように企業側には、

・安く雇える

・固定費を抑えられる

というメリットがある。これは雇われる側の人には意外と知られていない。

昨今フリーランスエンジニアの需要がそれなりに高まっているのは、

あたりまえだが「個人のメリット」と「企業のメリット」の双方が存在するからだ。

美味しい話はその逆側の視点から見つめることも大事である。

そう思ったよ。