Laravelのslot機能でボタンの文言を変えて使い回す！
はじめに Laravelのbladeでhtmlのコーディングを行っていると、「Vueのコンポーネントの様に中身だけ変えて使い回したい！って場面が多々出てくると思います。 そんな時にLaravelに元々あったsectionとは別にslotという機能がめちゃくちゃ感覚的に使えて良かったので説明していきます。 slot機能とは まず、プロダクトの中で使い回すパーツをコンポーネントと呼びます。 例えば、こんな感じのボタンですかね。 これをslot機能を使う事で、中の文言だけ変えて色々なところで使い回していきます。 slotの使い方 コンポーネント作成 まずコンポーネントを作っていきます。 変えていきたい部分を {{$slot}} としておきます。 ちなみにボタンのscssはこんな感じですでに定義しています。 これにてボタンのコンポーネントはできました。 コンポーネントを呼び出す 先ほど作ったコンポーネントを呼び出していきます。 この様に('button')の部分にコンポーネント名。 …
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とは …
Vueコンポーネントを利用する
はじめに これまでVue.jsの基本的な使い方やテンプレート構文について触れてきました。その中では1つのVueオブジェクトの中に全てを記述していました。 今後、より複雑なアプリケーションを作る際にVueオブジェクトを複数作る事もしばしば出てきます。 そこで、使えるのがコンポーネントです。 コンポーネントとは 一言でまとめると「名前付きの再利用可能な Vue インスタンス」です！ 作成方法は以下の通り。 実際にHTMLとして出力して欲しい箇所は設定情報の中にオブジェクトで書きます。 具体的には templateの中にpタグやbuttonタグを記述しました。 また、html内で呼び出してあげたい時は、 で簡単に呼び出せます。 helloコンポーネントを作成してみる 基本的な使い方を知った所で、実際にコンポーネントの実例を見ていきましょう。helloコンポーネントを作成し、その中に「Hello！」と記述して出力できるかを試してみます。 コンポーネントを利用している部分 ここにtemplate内のhtml文が挿入されています。 …
scssの使い方・書き方入門
scssとは scssはcssを効率的に書く事のできるメタ言語です。cssの場合、長く複雑な記述をしなければいけない所を、scssを使うとわかりやすくシンプルに書く事ができます scssの使い方 実際にscssを使っていく際に.scssか.sassという拡張子のファイルに保存します。また生のcssと違いhtml内に<style>で記述する事は出来ません。 scssファイルを直接読み事は出来ないので、コンパイルという処理を行なってcssに変換します。ターミナルから行う場合は以下のコマンドにてコンパイルしてくれます。(hoge.scssをhoge.cssにコンパイルしている) コンパイルは他にもGUIを使っても行えます。自分は良く、npmを使って自動で更新される度に反映される状態を作っています。 sassとscssに違い 一言でまとめると「書き方が違います！！」 scssの方がcssに近いので一般的には書きやすいとされています。sassはより短い記述が可能なので、効率的に書き事ができます。 細かい書き方の違いはこちらなど参考にしてください。https://original-game.com/scss-vs-sass/ scssの書き方 ネスト(入れ子)構造 scssでは入れ子構造での書き方が基本になります。 というhtmlに対してscssを書くと以下のようになる。 コンパイル結果のcssはこのようになり、入れ子構造から勝手に親要素を認識してくれます。 scssの様々な書き方 scssにて良く使われる記述をまとめていきます。 divの中にいるclassがhogeを指定する …
Vueで簡単な税込み・割り勘計算アプリを作る
前置き Vueの基礎文法の復習として以下の要件の税込み・割り勘計算アプリを作りました。 コンポーネントやcomputed、methods、v-on、v-modelなどの簡単な解説も添えたので、Vue初学者の参考になるかと思います。 また本記事では過去の記事で触れた「vueインスタンスの基礎」や「v-if」についての解説は入れていません。必要に応じてこちらを参考にしてください。 要件 任意の数と人数が入力されたときに以下の二つの出力をできるようにする。(数、人数ともに整数とする) 1.税込みの値 2.税込み金額を人数で割った値 完成品 本編 さて、実際に作成に入っていきましょう。 一旦、完成物のコードを見て頂き、それを沿って解説を入れていこうと思います。 完成版ソースコード 解説 コンポーネントの出力 61~63行目: 以下の記述をすることで、「Calculationコンポーネント」を呼び出しています。 65~106行目: …
