yasuaki

CSS

TailwindCSSでよく使うクラス11選!(幅・高さ・余白・パディングなど)

TailwindCSSを使って、ガッツリと画面を作成しました。公式ページを単語で検索すると、リファレンスとして機能してくれます。実際に使用していく時は下記の公式ページで検索しながら使うことをおすすめします。(ページ上部の「Quick sea...
Vue.js

Vue.js(v3)のv-forでrefを使う方法(Composition API)

Vue.jsのComposition APIを使っているコンポーネントで、v-forをしている箇所に対して、refを使うときにハマりました。やりたかったのはv-forで複数定義しているテキストエリアをrefで参照して、値を更新するという処理...
Vue.js

Vue.js(v3)でemitを使う(Composition API)

Vue.js(v3)のComposition APIで、emitを使う方法を書いています。emitについては、前回の記事に書いていますので確認してみてください。前回の記事で作成したコンポーネントと同じものをv3のComposition AP...
Vue.js

Vue.js(v2)のemitを使う方法(子から親への値渡し)

Vue.js(v2)で子から親へ、emitを使って値を渡したりする方法を書いています。Vue.jsのバージョンは2(Options API)です。emitについての公式ドキュメントは下記になります。emitとは?子コンポーネントで、ユーザー...
Vue.js

Vue.js(v2, v3)のrefsの使い方(親から子の要素参照)

Vue.jsでrefsを使用して、コンポーネントの要素を参照する方法について書いています。Vue.jsのバージョンは2と3(Composition API)で動作を確認しています。公式のドキュメントはこちらに記載してあります。Vue.jsの...
Vue.js

Vue.js(v3)のpropsの使い方(親から子に値渡し)

Vue.jsでpropsを使用して値を受け渡す方法について書いています。Vue.jsのバージョンは3で動作を確認しています。公式のドキュメントも確認して、実際によく使いそうな書き方やハマりそうな箇所について解説しています。公式のドキュメント...
Vue.js

Vue.js(v3)でコンポーネントを作成する方法

Vue.jsでコンポーネントを作成する方法について書いています。Vue.jsのバージョンは3で動作を確認しています。公式のドキュメントのこちらに記載している内容をもとに、検証して記事にしてみました。Vue.jsのコンポーネントとは?Vue....
Laravel

LaravelでVue.js(v3)を使う方法!

LaravelでVue.jsのバージョン3を使い始めました。この記事ではLaravelのバージョン8でVue.jsのバージョン3を導入する方法について書いています。Laravelのプロジェクトを準備して、Vue.jsのバージョン3を使って簡...
Laravel

Laravelでトランザクションを張る2つの方法!

Laravelでトランザクションを張る方法について書いてみました。Laravel8 + MySQL8で確認しています。トランザクションを張る方法は下記の2つです。・DBのコミットやロールバック自分で書く。・transactionメソッドを使...
Laravel

Laravelのクエリビルダーでテーブル結合(内部結合, 外部結合)する

Laravelのクエリビルダーを使用して、テーブルを内部結合や外部結合するときの方法について記載しています。ほとんどSQLを書くのと変わらないくらいな記述量になるので、簡単な結合などはLaravelのモデルにhasOneやhasManyを設...
Laravel

LaravelのEloquentでリレーションを作る方法!(hasOne, hasMany)

LaravelのEloqunetでリレーションを作る方法をまとめてみました。Laravelのバージョン8で挙動を確認しています。モデルから関連するモデルにリレーションを作成しておくと、簡単に関連先のデータを取得することが可能です。複雑な条件...
Laravel

LaravelでTailwindCSSを使う方法

LaravelでTailwindCSSを使う方法と実際に導入して、動作確認してみました。7ステップで設定は完了します。簡単に使い始めることができるので確認してみてください。導入方法についてはTailwindCSS公式サイトの下記に書いていま...