vue-cliをインストールしようとしたら「gyp: No Xcode or CLT version detected!」というエラーが出て困った件
要約 ・vue-cliでローカルにvue環境を作ろうとした・npm install -g @vue/cliで「gyp: No Xcode or CLT version detected!」というエラーが出た・xcodeの再インストールで解決した Vue-cliでローカルにvue環境を作ろうとする 以前のqiitaにも書きましたが、チームとしてコーディング規約が無い！という事で現状もあって、コーディング規約を作る事になりました。 手元で試せる環境が必要になり下記の記事を見てvue-cliをインストールしていきます。 しかし、npm install -g @vue/cliを叩いた時点でエラーの嵐が、、、 …
Vue.jsのフィルターでデータを加工する
はじめに こんにちは、てりー(@teriteriteriri) Vue .jsでプログラムを書いていくと、「小文字は全て大文字に変換したい！！」や「金額を税込み表示にしたい！」などの様にテキスト系の変換処理を一律で行いたい場面に遭遇すると思います。 そんな時に活躍するのがフィルタ機能です。今回はVue.jsのフィルタ機能について解説していきます。 フィルターとは フィルタとは「小文字は全て大文字に変換したい！！」や「金額を税込み表示にしたい！」などの様なテキスト系の変換処理に特化した機能です フィルターの使い方 基本的な流れ グローバル・ローカルのどちらかで定義する 適応させたい場面で呼び出す 登録方法 グローバル登録 グローバル登録とはプロジェクト全体に対して定義するやり方です。フィルターの役割を考えるとグローバル登録する場面も多くあると思います。 グローバル登録では全体に効かせたいので、main.jsに記載します。 ローカル登録 ローカル登録では、定義したコンポーネント内のみにて呼び出し可能な登録になります。各コンポーネントのスクリプト部分にて定義します。 呼び出し方 …
v-modelで様々な入力フォームを作る
はじめに 前回はv-modelの修飾子を見ていきました。今回は複数行やチェックボックス、ラジオボタンなどのパターンを見ていきます。 複数行の入力フォーム inputでは実現できなかった複数行のフォームはtextareaを使う事で実現可能です。 また、textareaで入力した値の改行まで反映させたい場合は、クリックイベントなどを使って処理を書いてあげる必要があります。参考：https://segateway.com/archives/360#toc3 サンプルコード チェックボックス チェックボックス1つ型はboolean型！ チェックボックス1つのパターンだとv-modelで出力される値boolean型(trueかfalse)になります。 複数のチェックボックスは配列として！ 複数のチェックボックスを作った場合は、配列の値として入力値が表示されます。下の動画ではチェックボックスでチェックした値が下の配列の中で表示されています。 ソースコード ラジオボタンで入力する v-modelを使う事でラジオボタンを使った双方向バインディングも可能です。ラジオボタンで入力された値を出してくれます。 ソースコード プルダウン型で入力する プルダウン型でもv-modelにて双方向バインディングが可能です。プルダウンで選んだ値が出力されます。 ソースコード …
v-modelの修飾子を使って実践的なフォームを作る
はじめに 以前の記事でv-modelの基本的な使い方を解説していきました。 v-modelは双方向のデータバインディングであり、前回の記事内でinputタグでよく使われると話しましたが、そのほかにも様々なパターンが用意されています。 今回は入力フォームなどを作る際によく使われている様々なパターンを見ていきましょう。 v-model.lazyで反映を遅らせる フォーカスを外した際に反映されるフォーム v-modalを使った場合、入力中は逐一、内容が反映されます。v-modal.lazyを使うと入力フォームの外に触れた際に一気に内容が反映される形になります。 実際の入力フォームではよくみる形ですね！入力内容が違ったときにalert系を出すパターンとの相性も良いです。(むしろlazy使わないと逐一alertが出て鬱陶しい！笑) サンプルコード v-modal.numberで型をnumber形にする 背景 通常、<input>で受け渡ししているデータはstring型になっています。<input type=’number’>を使っている時でさえ初期値以外はstring型で渡しています。 そうなると<input>内のテキストで100と入力しても1,0,0の文字列として扱われてしまいv-forなどで回す際やidと紐付けたいときなどに適応できなかったりと思わぬ所で問題が起きやすくなってしまいます。 そこでv-modal.numberを使います！ v-modal.numberでできる事 とする事で、<input>内に入力された値を自動でnumber型に変更してくれます。入力フォームで数字を入れてほしい部分には積極的にnumber修飾子を使っていきましょう。 v-modal.trimでいらない空白を除去する …
動的コンポーネントを使い表示内容を切り替える
こんにちは！てりーです(@teriteriteriri)。今回はVue.jsで動的にコンポーネントを切り替える方法を見ていきます。 動的コンポーネントの使い方 :is=”変数”で切り替える 分かりやすい例です。コンポーネントを呼び出す際に以下の様に書きます。 cardColorという変数を切り替えることによって、表示されるコンポーネントが変わってきます。例えば今回cardRed、cordGreen、cardBlueというコンポーネントを作っていたら、クリック毎にcardColorがその3つのコンポーネントが表zされる様にすれば良いのです。 :isの特徴 切り替わるたびにインスタンスがdestroyedされる。詳しくはライフサイクルを参照してほしい。毎回新しいインスタンスを生成しなくてはいけないので、前のインスタンスでの状態が保存されていないことに注意。 keep-aliveでwrapする :isで最後に出てきた問題を書き結する方法としてkeep-aliveがあります。keep-aliveではインスタンスはdestroyedされずに、キャッシュされるのみである。なので、インスタンスの状態をそのまま受け継ぎながらコンポーネントの切り替えが可能。 使い方は以下の様にkeep-aliveでwrapするのみです。 動的コンポーネントを使ってカードを切り替える 完成品 ・赤、青、緑の色のカードが出力される子コンポーネントを作る・親コンポーネントにて、色のボタンを押すとその色が出力される 解説 子コンポーネントを作る まず子コンポーネントとなるカードを作ります 親コンポーネントを作る buttonを押すと、methodsに書いてある様に、押したボタンの色と同じ色のカードのコンポーネントが呼び出されます。 …
v-slotで親子間で様々なやりとりを行う
v-slot propsはあくまでStringやNumberなどのデータしか送れません。htmlタグを送る時は別のやり方があります。 子コンポーネントに受け皿としてslotを使う 以下の様に、子コンポーネントでは受け皿として<slot>を定義。 親コンポーネントでは、渡したいhtmlを子コンポーネントタグの中に入れ込む事で、子コンポーネントの<slot>部分に送れます。 今回だと「こんにちは」と「今日の天気は晴れです。」が<slot>に渡され、子コンポーネントとして出力されます。 propsとslotの違い propsはデータを送る。slotはhtmlタグを送る。(コンポーネントのtemplateタグと一緒で中にいろいろ入れていてもOK) slotのスコープ slotのデータは定義しているコンポーネント内でしか使えない！ 例えば、親コンポーネントにてslotを置き、title-nameのデータを渡したとすると、title-nameのデータは子コンポーネントのpropsにて定義されているので、親コンポーネントでは扱えません！！！ 逆に子コンポーネントではpropsのtitleNameに親コンポーネントの「挨拶」が入るので、pタグにて出力できます。 slotのcssは親でも子でも適応される！！！ propsで与えられているデータと違い、cssは歩どっちからでも適応させる事ができます！！先程のコードを使って説明すると。 ちなみに親も子もcssを指定した場合は親コンポーネントでの指定が勝ちます。今回の場合だと親で指定したcolor:redが反映される形ですね。 slotにデフォルトの値を入れる 親コンポーネントでは、子コンポーネントを呼び出した際にslotにいれる内容を書き込んでいましたが、特に内容を入れなかった場合に表示されるデフォルトの内容を設定する事ができます。 やり方は簡単で、子コンポーネントのslotの中にデフォルトの値を入れて上げるだけです。 …
Vue-cliについて学ぶ
プロジェクトとは プロジェクトとは、プログラムの作成に必要な色々なファイル(スクリプトファイル、イメージファイルなど)をまとめて管理するものです。 今までやってきた様な自分で1からファイルを全て作成する様なやり方はフルスクラッチと呼び、区分されています。 実際にプロダクトを作る際にはプロジェクトを導入する場合が多いので、扱い方や後世に慣れていく必要があります。 Vue CLIとは Vue CLIは(Command Line Interface)の略で、Vue.js開発の為に必要なプロジェクトを作成してくれるツールです。Vue CLIを使う事で簡単に、Vueでプロダクトを作る際に理想的な環境を作ってくれます。 現在、主に使われているVue用のプロジェクト作成ツールとしてVue CLIとNuxt(Vueのフレームワーク)があります。今回はNuxtではなく、Vue CLIについて学んでいきましょう！！ プロジェクトの作成方法 プロジェクトの作成するコマンドは以下です。プロジェクトを作成したいディレクトリに移動してコマンドを実効すると作成されます。 実際にプロジェクトを作成する際にプリセットの設定が必要です。ここでは割愛します。 Vue …
親コンポーネントから子コンポーネントへのデータの受け渡し
コンポーネント間でdataの受け渡しで出来ること 親コンポーネントの内容に合わせて子コンポーネントの内容も変える事が可能です。 例えばブログサービスをやってる時、親コンポーネントに書いた内容によって、子コンポーネントのタイトルやフォント、文字色なんかを自由に変更させていけます。 propsを使って親から子へデータを渡していくのですが、これが使える様になる表現の幅がめちゃくちゃ広がる超優秀な子です！！ 親から子へのデータの渡し方 静的なデータの受け渡し まず一番簡単な静的な受け渡しの例を見ていきましょう。以下のコードでは親から子にnumberを渡すことで、「6」が表示されます。 親コンポーネント この様にそのままpropsに値を代入して子コンポーネントに渡すことが可能です。今回だとnumberに6を渡しています。 子コンポーネント propsにて親からのnumberを受け取ります。propsの”number”には親から受け取った6が入るので、pタグでの出力にも6が反映されます。 動的なデータの受け渡し 静的な時と大きくは変わりませんが、親コンポーネントで扱うデータをv-bindで定義していきます。最初に例にあげたブログタイトルの例で見ていきましょう。 親コンポーネント 直接埋め込むのではなく、v-bind(省略系の:)を使ってtitle変数を設定しています。後にdataにてtitleに値を入れる事が可能です。 子コンポーネント 静的な場合と大きな変化はないです。propsに親コンポーネントで定義したtitleの値が渡されます。 おまけ キャメルケース、ケバブケースの使い分け …
methodsとcomputedを使ってイベント処理を行う
はじめに 「v-on」の記事にてイベントの作り方は説明しました。 その時の様に、処理が短い場合はそのままダブルクウォークテーションの中に書く事が多いです。しかし、長い処理をした場合にはそのまま書くのは煩雑で見にくくなってしまいます。 そのような場合に使用する構文が今回説明していく「method」と「computed」になります。 methods methodsとは コンポーネントオプションの1つです。Vueインスタンスに対してデータオブジェクトを渡してくれます。 同じデータオブジェクトとしてはpropsやdata、computedなどがあります。それぞれ違いはありますが、大まかな区分として初期状態やデータはpropsやdata。関数チックな処理はmethodsかcomputedを使うケースが多いです。 methodsの使い方 methodsはメソッドなので呼び出しには引数が必要です。以下の様に呼び出し可能です。 コンポーネント内に以下の様に書きます。 methodsの実用例 今回のコードはv-on:clickでhelloというメソッドを用意して、処理はmethods部分に書いています。ボタンをクリックすると、アラートとして「hello+現在のtext+！」が表示されます。 computed computedとは computedは算術プロパティと呼ばれています。基本的にmethodと同じように定義できるコンポーネントオプションです。methodsとの違いは後ほど説明します。 computedの使い方 computedの呼び出しはdataの様に行えます。(引数の必要なし) …
v-model ・v-onを理解する
今回はVueのテンプレート構文であるv-modelとv-onの使い方や実用例をみていきます。これまでにVueのテンプレート構文ではv-ifでの条件分岐、v-forでのループ処理、v-bindでの属性のバインドを見てきました。詳しくは以下の記事をご覧ください。 v-model v-modelとは v-modelは、<input>に入力された値をVueのdataプロパティの値やコンポーネントの変数にバインドする機能で、入力された値をリアルタイムに表示することができます。 使用方法は以下の通りです。 変数名はVueインスタンスで指定したdataプロパティの名前や、コンポーネント内で指定した変数名の名前です。 v-modelの実用例 v-modelの実用例です。<input>タグに入力した値が、{{sample}}二つぐに反映される事が確認できます。 html部分 <input>タグに対してv-modelで変数「sample」をバインドしています。こうする事で、<input>タグに入力された値を変数sampleに代入する事ができます。 script部分 こちらは単純です。Vueインスタンスを作り、中にdataオブジェクトとして変数sampleを作っています。初期値は今回空にして入力値が分かり易いようにしています。 v-modelはv-bindと違い v-modelは双方向のバインドになります。なのでhtml側で入力した値がModelに反映されます。 ちょっと難しくなりましたが、現段階ではv-bindでは入力した値は即座には反映されない(イベントを発火させて変えることは可能)。 v-modelは入力値が即座に変数に反映！と覚えておくと良いでしょう v-on v-onとは …
