Vue.js【クラスとスタイルのバインディング】
Vue.js【クラスとスタイルのバインディング】
クラスのバインディング
v-bind:classにオブジェクトを渡すと、クラスを動的に切り替えることが可能になります。
See the Pen dyyvpJm by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記の例で行くと、初期値では文字色を適用するクラス、背景色を適用するクラスがそれぞれ割り当たっており、
それはhasPutColorとhasPutBgColorの真偽値がtrueのときのみ適用されるクラスになります。
ボタンをクリックすることでそれぞれの真偽値がfalseになるので、クラスの適用が外れ、文字色、背景色それぞれが初期値に戻ることが確認できるとかと思います。
See the Pen rNNyjjR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
カンマ区切りで複数のクラスの指定が可能になります。
See the Pen qBBrRva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
このように記述することもできます。Changeオブジェクトのred.boldの真偽値がtrueなので、赤い太文字で表示されています。
See the Pen eYYvgVa by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
Changeオブジェクト内の真偽値をクリックイベントで切り替えることもできます！Change.Red,Change.boldのように記述します
配列でクラスを指定する
See the Pen PoopWgR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
配列構文でクラスを指定することができます。
配列の要素はVueインスタンスのプロパティを指定するようにしてください。
コンポーネントでの使用
See the Pen jOOBBOR by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
コンポーネントでも同じように指定することができます。
スタイルのバインディング
See the Pen mddWWxz by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
v-bind:styleを使用することでスタイルを指定することができます。
上記では、スタイルオブジェクトを指定しています。
background-colorといった、途中にハイフンを含むようなプロパティの場合はクォートで括る必要があるようです。
これは、JavaScriptがそもそも変数や関数名にハイフンを含めることができない仕様であるためだと思われます。
JavaScript:【注意】変数や関数の名前には-ハイフンは使えない
スタイルの配列指定
See the Pen yLLMMQJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
そしてこちらにも配列を使用することで複数指定が可能です！
おまけ ハマった…
See the Pen MWWppRb by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
var MyComponent = Vue.extend({
template: '<div :class="[redClass, {bold:isBold}]">Hello!</div>'
})
と書こうと思ったのですが、どうやらこの書き方はできないようです…
おまけ２
途中から書き方が変わっていますが、
v-bind:xxxは:xxx、
v-on:clickは@click
と書くことができます！頻出する処理を短く記述できるのは素敵ですね！
Vue.js【コンポーネントについて】
Vue.js【コンポーネントについて】
処理をコンポーネント化する＝部品化する、という考えで良いのかな？
他の場所でも使いまわしできるように処理をコンポーネント化するために、今日は勉強していきます。
コンポーネントのグローバル化
See the Pen BaapBdp by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
Vue.component('コンポーネント名', {
～～～処理～～～
})
と書くことでグローバルなコンポーネントが出来ます。あちこちで使いまわししたいとき。
ローカルなコンポーネント
See the Pen OJJWLag by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
const Scoped = {
～～～処理～～～
}
というふうに書き、使用する側で
components: {
'component': Scoped,
}
と指定してあげれば使うことが可能になります。
この記述のない"#app"は処理を呼んでいるにも関わらず、反映されていないことがわかると思います。
コンポーネントにデータをもたせる
See the Pen OJJWLqj by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
データを持たせることも可能。その場合は関数として定義し、return必須のようです。
W3C ルール
カスタムタグの名前について W3C ルール (全て小文字で、ハイフンが含まれている必要がある)にしたがうことは良い取り組みと考えられますが、Vue.js はそれを強制しないことを覚えておいてください。
と公式ドキュメントにありました。強制的ではないですが積極的に取り入れていったほうが良いかもしれません。
コンポーネントの定義と登録
See the Pen YzzNzKG by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
このように、Vue.extendとVue.componentはそれぞれ、定義、登録の役割を果たします。
Props
See the Pen ZEELEGZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
前回さらっと流したpropsですが、「親から子へとデータを伝達する場合」に使用します。
appはHTMLから、app2はVue内の親コンポーネントから値を渡されています。
軽い気持ちでTwitterBotを作ろうとして苦戦してた話【Ruby】
思いっきり今の勉強内容から脱線してるのですが。
数日前、急にTwitterBotってどうやって作られてるんだろう？と疑問に感じたので調べてました。
…っていうのは半分建前で。私のオタクアカウントで推しに毎朝挨拶してるのですが、その返事が欲しかったんです。自作自演でも構わない！！！！！！！！！！！！！！！！！
っていう深夜テンションの勢いでTwitterにデベロッパー申請を送り、１度「もうちょっと詳しく！」ってお返事が来たけれど、
「勉強用です！」「個人で使用します！」「利益を求めません！」「DMは使いません！」「フォローは手動でします！」「RubyかJS使います！」「趣味です！！！！」「スパムなんてしないよ！！！！だって趣味だからね！！！」
的なことを箇条書きでそれっぽく書いてGoogle翻訳に突っ込んだものをそのまま返信しましたが、なんとか審査を通過しました。
（好奇心の赴くまま）とりあえずやってみよ～！っと思ったわけです。
参考にしたサイト RubyでTwitterBotを作ろう！【導入編】 | 東京工業大学デジタル創作同好会traP
Twitterライブラリ、DevKitのインストールをして…
TLへ呟くプログラムはOK。呟けた！
問題はこの次でした。
リプライを送るプログラムを書こうとすると動かない！！！！！！！！
なんで～～～！？(´；ω；`)？？？
ってなりながら、質問を投げる私。
teratail.com ※実際に私が投稿した質問。
結論…
Twitter::Streaming::Clienはもう使えない！！！！！！！t
もう使用できないTwitter::Streaming::Clientを使用したサンプルがごろごろ落ちているので気を付けましょう！！！！じゃないと私みたいにハマります！！！！！！
その後に参考にした記事
結果ざっくりこんな感じのプログラムになりました。
require 'twitter'
@client = Twitter::REST::Client.new do |config|
config.consumer_key = "consumer_key"
config.consumer_secret = "consumer_secret"
config.access_token = "access_token"
config.access_token_secret = "access_token_secret"
end
@client.mentions_timeline.each do |tweet|
puts "\e[33m" + tweet.user.name + "\e[32m" + "[ID:" + tweet.user.screen_name + "]"
puts "\e[0m" + tweet.text
if tweet.text.include?("おはよ")
@client.update("@#{tweet.user.screen_name} おはよ！#{tweet.user.name}さん！", in_reply_to_status_id: tweet.id)
else
@client.update("@#{tweet.user.screen_name} #{tweet.user.name}さん、どうしたの？", in_reply_to_status_id: tweet.id)
end
@client.favorite(tweet.id)
end
自分へのリプを確認し、「おはよ」が含まれてたら「おはよ！〇〇さん！」それ以外は「〇〇さん、どうしたの？」と返し、いいねする！
本当は文章中のキーワードによってもっと返事を変えたりしてるけどそこは省略…
１つ思ったのは
「elseはelseなのにelseifじゃなくてelsif」なんだ！？！？！？
でした………(Ruby全く触ったことないからせっかくだしチャレンジしよう精神)
まだ定期実行の手法探ししなきゃなんですが、ここまででちょっと息抜きのつもりが思った以上に時間がかかってしまったので、ちゃんとVue,jsに戻りたいと思います～～～～～
JavaScript基本【コールバック関数】
JavaScript基本【コールバック関数】
コールバック関数とは？
関数の引数に関数を渡すことができます。
これを、コールバック関数と呼びます。
See the Pen NWWRKKw by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
これは、call関数の引数にhello関数を渡し、call関数の中で呼び出しています。
引数として関数を呼び出す際には、()は必要ありません。
コールバック関数を引数の中で直接処理を定義する
引数の中に直接処理を書くこともできます！
See the Pen pooEzJZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
コールバック関数に引数を渡す
コールバック関数に引数を渡すことも可能です
See the Pen VwwKZaa by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
コールバック関数は頻出！
コールバック関数はよく使う機能の１つのようです。
色んなサンプルをみて、使いどころをしっかり身に着けていきたいです！
JavaScript基本【配列の操作】
JavaScript基本【配列の操作】
pushメソッド
pushメソッドを使用することで、配列に値を追加することができます。
See the Pen zYYBVdZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
forEachメソッド
See the Pen abbZgVw by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
forEachメソッドを使用することで、その配列の中身それぞれに処理をすることができます。
上記の例では、配列numbersの中身の値に対しnumberと命名し、それぞれに２を掛けたものを出力しています。
アロー関数を使用しています。
findメソッド
See the Pen xxxOoYX by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
findメソッドでは指定された条件を満たす最初の要素を見つけることができます。
配列の先頭から検証していき、見つけた時点で処理を終了するため、上記の例では６のみが出力されています。
配列の要素がオブジェクトでも使用することが可能です。
See the Pen GRRqbzL by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
年齢が23歳という条件で先頭の要素を取り出すことができました！
filterメソッド
上記では先頭の１つしか取り出せませんでしたが、条件を満たす要素を全て取り出したい場合はfilterメソッドを使用します。
下記は先ほどと同じ配列内容、条件ですが、条件を満たす全ての要素を取り出すことができていることがわかると思います。
See the Pen BaazgEB by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
See the Pen ExxyBzo by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
mapメソッド
mapメソッドは配列の中身に対し処理を行ったうえで新しい配列を生成します。
See the Pen YzzWmXg by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
priceリストの中身を崩さないまま、税込み価格を格納した新しい配列ができていることを確認できると思います。
※Math.floor()は「切り捨て」処理を行っています。
もちろん、オブジェクトでも使用可能。
See the Pen qBBNemL by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
動物の種類によって自己紹介文を変えることができました！！
他にもできること色々
JavaScript基本【複数のファイル操作＆npmパッケージの使い方】
JavaScript基本【複数のファイル操作＆npmパッケージの使い方】
複数のファイル操作
１つのjsファイルに全ての処理を詰め込んでしまうと、膨大で保守性の悪いものになってしまう可能性があります。
そこで、複数ファイルに分けてjsファイルを管理する必要が出てきます。
書き出し(export)
export default クラス名;
これで他のファイルでこのクラスが使用できるようになります。
これは定数や関数などでも同じで、
export default 定数名; export default 関数名;
とすることで、他ファイルから読み込み(import)できるようになります。
※実際にこのように２行書くとエラーになるので注意！！詳しくは名前付きエクスポート参照
呼び出し(import)
import 名称 from "./ファイル名称";
同じ階層にあるファイル内のクラスの呼び出しはこれでOKです。
基本的に、相対パスを使用していきます。
１つ上の階層にある場合は、
import 名称 from "../ファイル名称";
１つ上の階層の中のフォルダ内にある場合は、
import 名称 from "../フォルダ名/ファイル名称";
という形で記述していきます。
名前付きエクスポート/インポート
上記のdefaultを使用したエクスポートは１つまでしかできません。
複数エクスポートしたい対象がある場合は、名前付きエクスポートを使用する必要があります。
■エクスポート
export { 名称１,名称2};
■インポート
import {名称1,名称2} from "パス";
このように { } で囲むことで名前付きエクスポートが可能になります。
複数ある場合はコンマで区切ります。
npmパッケージの使用方法
import 名称 from "パッケージ名";
とすることで、外部の便利なパッケージを使用することができます。
ただし、npmパッケージを使用する際は、「node.js」のインストールされている環境が用意されていることが前提になりますので注意が必要です！！
JavaScript基本【オブジェクト】
JavaScript基本【オブジェクト】
See the Pen LYYZbdx by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
オブジェクトは、複数の値をまとめて管理するために使用します。
配列は値を並べて管理するのに比べ、オブジェクトは値にプロパティと呼ばれる名前をつけて管理するのが特徴です。
オブジェクトに関数を格納する
See the Pen abbZrde by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
オブジェクトには関数を格納することもできます。
アロー関数を使用することも可能です。
クラスとインスタンス
See the Pen ExxyzWY by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
クラスを作成することで、雛形を作ることができます。
そのクラスのコンストラクタに引数を指定することで、それぞれのインスタンスに固有の振る舞いをさせることが可能になります。
クラスの中でメソッドを使用することも可能になります。
コンストラクタ内で処理を記述した場合、インスタンスを生成するたびに呼び出されます。
クラス内のメソッドは明示的に記述したときのみ呼び出されます。
この動きの違いを覚えておかないと、適切な処理がされないので注意が必要です！！
継承・オーバーライド
See the Pen MWWedEx by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
クラスは継承することで、子クラスが親クラスの機能をしようすることが出来るようになります。
しかし、逆（親クラスが子クラスの機能を使用する）ことはできないので注意が必要です。
また、親クラスと子クラスで同じ名称のメソッドがあった場合は、子クラスのメソッドが優先されます。
これは、子クラスが親クラスの機能を上書きしているということで、「オーバーライド」と呼ばれます。
コンストラクタのオーバーライド
See the Pen MWWedBM by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
コンストラクタをオーバーライドする際は、super()で親のコンストラクタを呼び出してあげる必要があります。
引数が必要な場合は、（）内で引数を記述する必要があるので、注意が必要です。
上記の例では、nameはそのまま、greetは上書き、trainerは子クラスからの新規プロパティを追加しています。
