コース: Vue.js 入門
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
算出プロパティとメソッドの違い
このレッスンでは算出プロパティとメソッドの 処理の違いについてご説明をします。 現在開いている HTML ドキュメントなんですが Vue の算出プロパティを 使っています。 computed というのがそうなんですが ここにプロパティを設定します。 その実質は function なんですけれど 参照する時にプロパティと同じように ここでは二重波括弧を使っていますけれど 参照することができます。 実際やってることは function でデータを todos のこの配列、 そのデータを for 文ですべて取り出して そのプロパティ done これですね。 こちらが false のものだけを 取り出して カウントして、それを返している。 この値がプロパティのように こちらで参照できるということで データの中でチェックの ついていないものの数を 残り何件の中に 表示することができています。 動きを確認しましょう。 ［ファイル］＞ ［リアルタイムプレビュー］です。 「全２件」 これはすべての数ですね。 その中で残りが１件、 これはチェックのついていないものです。 チェック全部つけると 残り０件、 はずせば２件になりますね。 それから項目を追加しましょう。 そうすると件数がちゃんと増えると、 バインディングできてるわけですね。 この参照する時に 算出プロパティを使ったわけです。 ではメソッドではいけないのかというと メソッドでも同じことは できてしまいます。 では実際にこの部分、コメントアウトして 繋げてしまいます。 そしてカンマ区切りにすれば これで remaining は メソッドとして 定義されたことになります。 違ってくるのは メソッドですからプロパティとは違って ここで呼び出しをしなければいけない ということになります。 確認してみましょう。 ［ファイル］＞［保存］をして ［リアルタイムプレビュー］を見てみます。 「全２件中残り１件」 チェックをつけると０件 外せば２件と 全く同じ動きですね。 ですから処理の結果というのは 変わっていません。 何が違うのか Vue.js のサイトで ドキュメントを調べてみたいと思います。 日本語の jp.vuejs.org ですね。 そこで［ガイド］ 「はじめに」とありますけど もうちょっと下の方、 「算出プロパティとウォッチャ」…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。