《Angular.js》@Inputと@Outputの使い方をわかりやすく解説

フレームワーク

@Inputと@Outputの役割

親から渡すか、子から渡すか

親コンポーネントと子コンポーネントがあるとします。親はディレクティブを呼び出す側、子はディレクティブを定義する側として定めます。このように定めた場合、@Inputと@Outputは以下のような役割で使用されます。

@Input

 親コンポーネントから子コンポーネントに値を引き渡す

@Output

子コンポーネントから親コンポーネントに値を引き渡す

では実際のコードでどのようにして使われているか確認することにしましょう。

@Inputを使う場合

親から子に値を渡すサンプルコード

まずボタンディレクティブを生成する、子コンポーネントを定義します。

@InputでbuttonTextbuttonColorというstring型を定義しました。ではこの定義したchild-compoent-buttonを以下の親コンポーネント側で呼んでみます。

この親側からbuttonTextbuttonColorにそれぞれ「かつお」「accent」というstring型の値を代入しています。なのでボタンの文言・色も変化します。これは親コンポーネント側から子コンポーネントに値を渡しているということになりますので、@Inputは親から子に値を渡す方法ということになります。

@Outputを使う場合

子から親に値を渡すサンプルコード

では先程同様、子コンポーネントを定義しましょう。

@Outputをつかって、addHellowというEventEmitter型の変数を定義します。

click属性をbutton要素に組み込んでおり、ボタン押下時にsendTextメソッドが呼び出されます。次は親コンポーネントを定義します。

子コンポーネントで定義したaddHellowというEventEmitter型の変数を属性として定義しています。$eventをつけると、子コンポーネントでemitした値を引数として渡すことができます。このボタンを押下した場合、「hellow」がlogMessageの引数として渡されます。

ボタンを押下した時の出力は「hellow, Hello Angular!」となります。結果としては@Outputを使った実装は、子コンポーネントから親コンポーネントに値を渡していることが確認できたと思います。

参考サイト

今回は以下のサイトを参考にさせていただきました。わかりやすい解説本当にありがとうございます。

Angularの@Input(), @Output()を理解する。 - Qiita
# はじめに 業務でボタンの複数回クリックされたときの対策を実装するときがありました。そこで「このコンポーネントを使ってボタンを実装すればそういった対策は内部で勝手にやってくれる」魔法のようなボタンコンポーネントを作ろうと思ったのです...

エンジニアのスキルを底上げする本を紹介

コードの可読性を高める

自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。

ネットワークの基礎を押さえる本

ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑

基本情報技術者試験の参考書

これからエンジニアを目指す方は受けておきたい国家試験です。IPA、独立行政法人情報処理推進機構が出題している為、大学入試のような試験ですが、それ故に資格合格の為に勉強することでITの基本をしっかり抑えることができます。

(全文PDF・単語帳アプリ付)かんたん合格 基本情報技術者教科書 2019年度

自分が合格した時の勉強方法も記事にまとめているので興味があったら読んでください。

【おすすめ参考書】当時大学2年生だった僕が、3ヵ月で基本情報受かった時の勉強方法
こんにちは。KATUOです。 今回の記事では「基本情報に合格するための勉強法」について書いていこうと思います。 基本情報技術者試験について どんな資格なの 「情...

 [番外編] 低反発座布団

会社エンジニアは座って作業することがほとんどです。1日12時間くらい座席に座っている方も多いのではないでしょう。椅子の座り心地が良けばよりプログラミングに集中できると思った僕は以下のアイテムを購入して、オフィスに設置。

IKSTAR クッション 低反発 座布団 椅子 腰楽クッション オフィス 車用 自宅用 体圧分散 座り心地抜群 プレゼント 持ち運ぶ便利 ブラック

会社の座椅子なのにまるで自分が選んで買った椅子みたいに大変身。「座り心地最高」+「姿勢が安定」腰痛にも成ることもほとんどなくなりました。なのでエンジニアのみなさんにはおすすめしています。お金に余裕のある方は買って、座ってみてください。

タイトルとURLをコピーしました