はじめに こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！ 今回はv-showについてアウトプットしていきます！ v-show　とは 要素の表示/非表示を切り替えることができます。 v-ifと違うポイントとしてはp要素そのものが削除されるのではなくcssのdisplay プロパティをon/offされるで表示/非表示が繰り返されます。 書き方 HTML <div> <p v-show="toggle"> Good night! </p> </div> Vue.js var app = new Vue({ el:'#app', data:{ toggle:true } ※細かい書き方はv-ifと同じで前記事で解説しているので省略します。 まとめ ・v-showではdisplayプロパティがon/offされる。 ・全体的な書き方はv-ifと一緒。 最後に 今回はv-showについてアウトプットしました。 今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！ 最後までご愛読ありがとうございました！

エラー composer require laravel/uiでパッケージを追加して、php artisan ui vueでベースを作成。 その後、npm install npm run devを実行した際に、以下のようなエラーが発生しました。 [webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack: - D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin-webpack5.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\index.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\components\Vue.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\components\ComponentRegistrar.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\Mix.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\setup\webpack.config.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\lib\webpack-cli.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\lib\bootstrap.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\bin\cli.js - D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15) at Function.Module._load (internal/modules/cjs/loader.js:745:27) at Module.require (internal/modules/cjs/loader.js:961:19) at require (D:\110_LaravelProject\CasualMeetingV2\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.<anonymous> (D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin-webpack5.js:6:42) at Module._compile (D:\110_LaravelProject\CasualMeetingV2\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\plugin-webpack5.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\plugin.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\index.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\components\\Vue.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\Mix.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\setup\\webpack.config.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\bin\\cli.js', 'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack\\bin\\webpack.js' ] } これは、vue-loaderが古いせいで発生しているようです。 対処法 以下コマンドを実行して、再度npm run devを実行 npm i vue-loader

前回の続き から実装した方がわかりやすいかもしれません。 今回は、 STEP1 フォームにフォーカスしたらボタンを表示 STEP2 フォームに文字を入力したらボタンの色を変化させたいと思います。 完成例 入力前 STEP1　フォーカス後 STEP2　入力後 このように、フォーカスしたらボタンを表示して、 入力されたらボタンの色をグレーから緑に変えたいと思います。 STEP1 ボタンの設定 v-ifで条件分岐し、isEditing か titleExistsのどちらかがtrueの時だけボタンを表示します。 <button type="submit" class="add-button" v-if="isEditing || titleExists"> Add </button> CSSの設定 .addable .add-button { background-color: #00d78f; pointer-events: auto; cursor: pointer; } STEP2 data: function() { return { title: '', isEditing: false, } }, computed: { classList() { const classList = ['addlist'] if (this.isEditing) { classList.push('active') } // ２. cssを追加し、動的にボタンの色を変える if (this.titleExists) { classList.push('addable') } return classList }, 　// １. 文字が入力されたら、titleExistsがtrueになる titleExists() { return this.title.length > 0 } } 動的に変わる流れ ①文字が入力されたら、titleExistsがtrueになる ②trueになったことでcomputedのif文を実行して、cssを追加して動的にボタンの色を変える これで文字を入力したら、ボタンの色が動的に変わると思います！！

はじめに この度、「Web Service Hub」というWebアプリケーションを開発しました！今回はこのWebアプリケーションの解説・紹介をするために記事を書きました！これから、「何かサービスを作りたい！」「どうやったら作れるの？」とか思っている方におススメです。 Web Service Hub とは個人でWebサービスを開発している方のためのコミュニティサービスです。サービスを登録したり、みんなのサービスを見てWebサービスの開発を学んで品質向上を目指す場です。 URL ➡　https://web-service-hub.herokuapp.com/ GitHub ➡ https://github.com/kapureka6174/developHelper スマホからの閲覧も対応しています。 「ログイン画面」からゲストログインできますので気になる方はご使用ください。 作成した人 地方国公立文系の三年生でWebエンジニアになるため独学で勉強中 好きなことはプログラミング（React,Vue,Laravel）、デザイン（Canvaよく使います）、音楽（しゃろうさん、becoさんが好きです） NewsPicksなどの記事や番組を見たりして社会問題や会社についてあれこれ考えるのが好きです。 最近はハマっている本は「絶対内定2023 自己分析とキャリアデザインの描き方」（これを読むと人生のモチベが上がるので、特に就活生の方は読んでみてください！） 目次は以下のとおりです。 1. どんなWebアプリなの？【概要・機能】 2. どうやって作ったの？【技術】 3. どうやって勉強したの？ 1. どんなWebアプリなの？【概要・機能】 まず、どんなアプリを作ったか？知りたい人は見ていってください。 （１）概要 （２）使い方・画面 （３）機能一覧 （１）概要 冒頭でも示した通り、Web Service Hub は個人でWebサービスを開発している方のためのコミュニティサービスです。 「こんなサービスつくりたい！」っていう人（構想、アイデアだけでも全然OK!!） 「このサービス作ったよ！みんな使ってみて！」という人（デプロイしてるかは問いません） 「駆け出しエンジニアの人はどうやってwebサービス作ってんの？」っていう人 こういう人たちが集まって、サービスを登録したり、「これいいね！」とか、「こういう技術選択すればいいのか！」、「こんな機能いいんじゃない？」みたいに、コメントし合ったりすることを通して、Webサービスがどのように作られているのかを見てWebサービスの開発のやり方を学んでエンジニアとしての質の向上を目指す場として作りました！ 開発に至った経緯 私は文系でプログラミングはもちろん、コンピューターサイエンス的なものの素養は全くありませんでした。また、文系学部にいると周りにエンジニアを志望する学生はほとんどいませんでした。（地方かつ、近くの地元に就職したいと考えている人が多いことも原因だと思いますが・・・） そこで、私自身が抱えていた問題は主に以下の内容でした。 どんなサービスを作ったらいいのか分からない 一通り学んだ後に個人開発しようとしてもどこから手を付けるべきか分からない 周りにプログラミングが分かる人がいないためモチベーションが続かない 以上の3つの問題を解決したいと思っていました。 詳しい内容やどういう風にサービスの概要を決めていったかは以下の記事に書いています。 （２）使い方と画面 サービス一覧（検索機能） 「作り方や構成を見てみたい！」という方は、カテゴリーやサービスの開発状態に合わせて、サービスを探すことができます。 カテゴリー別の検索 並び替え機能（日付、お気に入り数、コメント数） 開発中か完成済みかで表示を分ける サービス作成（登録・編集機能） 「実際にサービスを作ってみたい！」もしくは、「サービスを作った！」という人は以下のようなサービス情報を登録することができます。（いつでも、編集可能なので埋められるところだけを埋めて、開発を進めながら徐々に埋めていくことをお勧めします。） サービス名、概要、カテゴリー 使用技術・要件定義 ページごとの機能 URI設計 以上のサービスを開発する上で必要な情報を閲覧・作成・編集することができます。 サービス情報、概要 サービス名、概要、Githubページ、サービスページへのリンクが表示されます。 カテゴリーやサービスの開発状態（開発中か完成か）も表示しています。 使用技術・要件定義（機能） 使用技術を分野ごとに分けて表示します。 要件定義として機能とその説明を表示します。 ページと機能 各ページごとにどんな機能があるのかを表示します。 各ページがどんな役割を担っているのかを知ることができます。 URI設計 URI、メソッド、説明を表示します。 どんなエンドポイントにして、メソッドにしているのかとそれぞれの役割を説明しています。 タスク管理・コメント タスクを段階に分けて管理することができます。 コメントを項目（質問・感想・アドバイス）に分けて投稿することができます。 新規作成画面 新規作成画面はこんな感じ。ヒントを出してどんなことを書けばいいか教えてくれます。 マイページ 自分が開発したサービスやお気に入りしたサービスを見ることができます。 プロフィール編集画面 （３）機能一覧 メイン機能 サービス登録/編集/削除機能 お気に入り登録機能 コメント機能 並び替え機能（日付、お気に入り数、コメント数） フィルター機能（開発中 or 完成） 保存・削除時の通知機能 認証機能 ユーザー登録・ログイン・ログアウト Google、Githubアカウントを使ったソーシャルログイン機能 ゲストログイン機能 パスワード再設定機能 プロフィール編集機能 アカウント削除機能 通知機能 サービスの作成・編集などの保存を無事に完了すると通知が表示されます。 サーバー側でバリデーションなどのエラーが発生した場合の表示です。 GoogleもしくはGitHubアカウントでもログインが可能です。 パスワードを忘れた場合はパスワード再設定のリンクがSendGridで送られます。 ゲストログインも可能です。 レスポンシブ対応 どの画面でも対応しています。 2. どうやって作ったの？【技術】 どうやって作ったか気になる方は読んでみてください。 （１）使用技術 （２）ER図 （３）苦労したこと【改善点】 （１）使用技術 フロントエンド Vue.js 3.0.5 vue-scrollto 2.20.0 (コメントへのスクロール移動をするために使用) Tailwind CSS 2.0.1 @tailwindcss/line-clamp 0.2.1（文字数を制限して省略表示するために使用） ESlint 7.30.0（コード整形） Prettier 2.3.2（コード整形） フロントをVueにしたのはLaravelでJetStreamとInertiaJSで開発する場合に、デフォルトで作られるのがVue.jsだったからです。個人的にはReactの方が好きなんですが、Vueも学んでみたかったので使ってみました。TailwindCSSは記事もしてみたので、気になる方は読んでみて下さい。 バックエンド PHP 8.0 Laravel 8.40 Jetstream 2.3 （ログイン、セッション管理をするために使用） Sanctum 2.6 (CSRF対策のため) Socialite 5.2 （Google,Githubでのログインをするために使用） s-ichikawa/laravel-sendgrid-driver （メールをsendgridで送信するために使用） InertiaJS 0.4.2 （APIを作成せずにLaravelアプリと同じように作成し開発効率を上げるために使用） MySQL (Heroku ClearDB) Inertia JSって何やねん！！って方がいると思いますが、LaravelのテンプレートエンジンにBladeってありますよね、あれをVue.jsにする感じです。SPAを作る際に使われていて内部的にはaxiosとかを使っているんですが、簡単に言うとバックエンドとフロントをいい感じにつなげてくれるやつです。詳しく知りたい方のために公式サイトと分かりやすく説明されている記事があったので貼っておきます。 公式サイト https://inertiajs.com/ インフラ Heroku AWS(S3) 本当は全部AWSでやってみたかったんですが如何せん、初めてだったのでherokuでやりました。次回は、AWSで全部デプロイやってみたいですね！！ちなみに、S3はプロフィール写真を保存するためだけに使っています(笑) 本当はER図とかインフラ図とかも貼って投稿できるようにしたかったんですが、今の段階では優先度が低くなったので、時間があるときに追加してみようと思います。 その他 Git 2.33.0 XAMPP VsCode Dockerを使いたかったんですが如何せん、PCが大学生協で配られているもので容量が少なすぎて、Dockerを動かすと遅すぎて、フロントをいじっているだけで大したことしていないのにコンパイルするのに2～3分かかってしまっていたので、XAMPPに切り替えました。 本当に余談ですが、最近GitHubの使い方を勉強しています。正直作る前はとりあえず、リモートレポジトリ作ってpushしとけばいいやと思っていましたが、issue立てたりPR送ったり、branch切ったりコミットメッセージのフォーマット統一したり、いろいろエンジニアになるために必須なことを軽んじていました(-_-;) （２）ER図 サービス作りながら、あれも欲しい・これも欲しいみたいな感じになって当初予定していたものよりもテーブル数が結構増えました。ちなみに、このER図はLucidChartというサービスを使って書いています。個人的には使いやすかったです。使ってみたい人は以下のリンクからどうぞ。 テーブルの説明 テーブル名 説明 users ユーザー情報の管理（メアド、SNS、紹介文など） services サービス情報（開発者、サービス名、概要など） service_tag どのサービスにどのタグが結びついているのか tags サービスのカテゴリーを管理 tech_fields 使用技術の分野を管理 teches 技術の情報管理（技術名とバージョン） requirements 要件・機能の管理 requirement_page どのページにどの機能が結びついているのか pages ページ名の管理 uris URI設計の情報を管理 tasks タスク情報の管理 comments コメント情報の管理 sessions セッション情報の管理 password_resets パスワード再設定のメールとトークン管理 （３）苦労したこと【改善点】 フロントエンドについて Vue.jsの基本的な書き方を勉強する暇もなく書き始めていたので、調べて出てきた記事のバージョンごとの違いなどに気づくことができずにぐちゃぐちゃコードが出来上がってしまいました・・・。最終的にはVue3 の Composition APIを使って統一させました。 Vue.jsのライフサイクルやreactiveなにそれ？という感じになって、どのタイミングでstateを変更させて、どのコンポーネントでstateを管理するべきなのかが分かっていなかった。ここら辺は、コードを書く前にどんな処理の流れにするかを考える時に知っていないと難しく、Vueの設計とか思想とかを学んでいないと難しいように感じました。 tailwind CSSのカスタム性が高すぎてコードが冗長化してしまう。自分で一つ一つをしていできるからこそ、ちゃんとコンポーネントにして使い回さないと、簡単なWebアプリケーションでも余裕で1000行を超えるファイルが出来上がってしまい、その後のリファクタリングに苦労しました・・・。 教訓・・・正しい書き方、処理の流れを理解する → コンポーネントに分けて細かく設計 → 修正。このサイクルをちゃんと作ること。 バックエンドについて バックエンドの操作が基本的に初めてすぎて基本的なことが分かるまでに時間がかかりました。特にリレーション関係やModelのappendとかを自在に使えるようになるまでは少し時間がかかるなと思いました。基本的にはいろんなメソッドを全て試してみてdd()にぶち込んで見ると分かりやすいですね。調べてとりあえず手を動かしてそれから考えるのがおススメです。 テーブル設計の最適解が分かりにくいことです。サービスの設計にも関わってくると思うのですが（どのタイミングでデータをどんな頻度で取得する必要があるかなど）、これは開発を進めながらじゃないのと分からないことばかりでした。なので、一対多なのか多対多なのかとか迷っているならとりあえず簡単にできる方で試してみて動かしてみて、必要に応じて都度変更していくことが大切そうです。 ダミーデータに関してはFactory、Seederを使いながらやっていたんですが、若干ドキュメントが少ないなと感じました。リレーションのリレーションはどうするのとか、少し複雑なことをやると上手くいかず、内部的にどんな処理が行われているのかを理解するのには時間がかかりました。 一番大変だったのはInertiaJSですね。これはフロントともバックエンドともかかわっているのですが、corsのエラーの解決はとても大変でした。InertiaJSがどんな処理をしているのか、corsはどんな時に発生してどのような設定や処理を行えばエラーが出ないのかは情報が少なすぎて丸3日ぐらいはかかりました。（時間ができたら記事にします。） この方たちの記事は非常に参考になりました。SPAを作る上でCorsのエラーはよく出てくるみたいなので、少し知っておくと便利かもですね。 教訓・・・分からなくても手を動かしてデータを見てみる。焦らずに、一つ一つ理解していくことが大切。 コーディングに関して（反省） 細かく分けて設計するのではなく思い付きと勢いで1000行以上のコードや分かりにく名前の関数や変数が多数存在するカオスな状態になっていました。改めて「リーダブルコード」を実践しないと意味がないなと思いました。これは、自分の内心的にも焦っていて常に「早く完成させないと！！」みたいなものを抱えたままやっていてコードにもそれが現れてしまう形になってしまいました。結果的に、リファクタリングやファイル構成などの修正に時間取られたり、処理を根本から設計しなおすことにもなりかねないので、小さく役割を分けてフロントならコンポーネントごと、バックエンドなら一機能、一処理ごとに設計していくべきだと感じました。 やらないこと、非機能要件をちゃんとつくっておくこと。これがなかったせいで、思いつきや発想があるとすぐにテーブル変更してフロント作ってバックの処理も追加して・・・。という風に、どんどんコードが肥大化していき、何をしたいサービスなのかが自分でも分からなくなる時がありました。やるべきことと、やりたいこと、やらなくていいことをしっかりと分けて、最低限必要なサービスを作って公開してその都度変更を加えていく、言われていても分かりませんでしたが、今回の経験を通して痛いほど分かりました。 教訓・・・「Start Small Scale Fast」小さく作って早く拡大（開発→フィードバック→修正のサイクルを早くする）。これをモットーに開発していくこと。 3. どうやって勉強したの？ （１）学習期間について （２）開発の日々 （３）開発中に役に立ったサイト一覧 （１）学習期間について 学習期間（2週間） PHPは、簡単な掲示板を作成しながら学びました。学習期間は1週間ほどです。基本的な文法に関しては知っていたのでPHP流の書き方を覚えるだけだったので簡単でした。 Laravelは、簡単なメモアプリをYoutubeを見ながら作成しながら学びました。どんなファイル構成で、ファイルごとの役割や基本的な書き方のみを学ぶという感じでした。学習期間は1週間ほどです。 Vue.jsは、完全に作りながら学びました。本当なら、簡単にチュートリアルくらいやっておけばよかったと思っています。（ReactでTodoアプリ作ったりしていたのでVueもそんな変わらんやろと思ってました・・・） 作成期間（2ヵ月ちょい） レポジトリのコミット数の推移です。 レポジトリを作成したのが7月15日で、その後、Laravelの学習や要件定義などをしながらテスト期間を経て、バックエンド、ダミーデータなどの作成を行います。 その後、9月に入ってから本格的にフロントエンドの開発に進みます。 最後の二週間はインフラ系の問題が発生したため、コミット数が増加しています。 以下はコードの行数の変化です。緑が増加、赤が減少です。 9月の地獄のリファクタリングの日々が現れていますね(笑)。 普通はもっと、最初が赤が少なくて緑が多くなり、最後らへんに赤が多くなると思います(笑)。 こんな感じで約3ヵ月ほどで、サービス全体が出来上がりました！！ ※ちなみに、駆け出しエンジニアの方向けに書いておくと上記の二つの画像はGitHubのInsightsで見れるので他のポートフォリオを作っている方のレポジトリに行って見比べてみると、けっこう楽しいですよ(笑) （２）開発の日々 基本的に開発するのは昼から夜にかけてがほとんどでした。 自分は夜型なので夜中まで調べ物をしたりしていました。（エラーをその日の内に解決しないと安心して眠れない・・・） 作業中はBGMを流しながら始めて、その内集中しだしたら音楽が1,2時間くらいで止まるので、音楽が止まっていることに気づいたら休憩するという感じでした。 実際にコードを書く時間は調べる時間と比べて、バックエンドは3:7、フロントは5:5くらいかなって感じがしています。 一日、最低限5,6時間くらいは平均してもやっていたと思います。 やる気が無くなったら、いろんなエンジニアの方の話をYoutubeで探したり、NewsPicks見たりしながら、他の刺激を受けたりしながらモチベを保っていました。 （３）開発中に役に立ったサイト一覧 1. フロントエンド Vue 公式ドキュメント composition APIについて学べます。 v-for内のv-modelでinputタグを管理すると連動したりするので気をつけましょう。 これは、Vue触ってる人なら一度は詰まることだと思います。v-modelで値が反映されない原因は大体これをちゃんと理解できていないからだった。 Tailwind CSS 公式ドキュメント tailwind CSS のコミュニティサイト。（いろんな人のコンポーネントをコピペできる。） tailwind CSSに関するいろんな便利情報が載ってます。 Inertia JS 公式ドキュメント Inertia JSとは何かが分かる。 仕組みや動き、基本的な機能を大体使ってくれているので分かりやすいです。 2. バックエンド Laravel ドキュメント（日本語版） 簡単なWebアプリを作りながら学べます。 英語圏のサービスですが、コミュニティの質問とかも活発だし内容はすごくいいし、ハンズオンでできるので、英語で学ぶことに抵抗ない方はめちゃおススメです。 3. 全般 公式ドキュメントを読む！エラーメッセージをちゃんと読む！ ライブラリ関連の問題なら、GitHubのレポジトリでissueを立てられていることがほとんどでした！ Qiita、Zenn、Googleで日本の方の記事を探す。（投稿日が一年以内に絞る） エラー系はteratailに多い気がします。 以上で無理なら英語圏に頼りましょう。 さいごに 今回の経験を通して、いろいろこうやればよかったとかの後悔や改善点を見つけることができました。でも、だからこそ、今の自分がエンジニア業界の中でどんな位置にいて、これからどんなことが必要なのかが分かった気がします。なので、素直にここまでやり続けた自分を認めてあげつつ、更にエンジニアとして成長のステップを踏んでいけたらなと思います。 また、後悔している点、他の駆け出しエンジニアなどの方には経験してほしくないことがたくさんあるので、それらも記事にしていこうと思っています。 自分はこれから具体的に就職活動を始めるところですが、最近自分が思うことは環境は自分で作り上げていくものであり、人から与えられることを当たり前だと考えてはいけないということです。この一つのWebアプリケーションを作るのも、多くのエンジニアがフレームワークやライブラリを作ってWeb、インターネット、RESTなどの基礎的な考え方から設計・開発してくださった人がいるからこそだと感じました。コードを書いていると、ふと、そういう方たちと繋がるような感じがします。時代も場所も超えて、そういう思いが伝わることができるのがエンジニアの特権だと思っています。 これからも、まだまだ与えられるや教えていただくことが多いと思いますが、自分が学んだこと・自分が与えられることに関しては少しずつ自分も誰かのために発信したりしていけたらと感じました。 最後に僕が好きな本の一節を残しておきます。 「世界がどうなるか」を心配する時間があるなら、「世界をどうするか」を考えたい By 佐渡島庸平　「僕らの仮説が世界を作る」より エンジニアとして世界を作る側に回っていきたいですね！ 最後までお読みいただき、ありがとうございました！

はじめに Vuetifyを使用した画面を作成したいときにこれを見る。 概要 VueCLIのインストール プロジェクトの作成 Vuetifyライブラリの追加 VueCLIのインストール ターミナルを開いて次のコマンドを実行。 vueCLIがインストールされているか確認できる。 @vue/cli x.x.xと表示されればインストール済み vue --version @vue/cli 4.5.13 ない場合はインストールする npm install -g @vue/cli プロジェクトの作成 適当なディレクトリに移動し、下記コマンドでVueプロジェクトを作成する。 Documentディレクトリの中にvueディレクトリを作成、 その中にvue-applicationという名前でvueプロジェクト作成。 cd Document mkdir vue vue create vue-application 途中で選択肢が発生する。 default vue2 て感じで選ぶ。 完了すると下記のような表示。 ? Successfully created project vue-application. ? Get started with the following commands: $ cd vue-application $ npm run serve $の2行を実行する。 表示されるlocalのアドレスをブラウザで開くとvueのロゴが画面に表示される。 Vuetifyライブラリの追加 下記コマンドでVuetifyをインストールする。 vue add vuetify App.vueを編集していけばOK。 参考 https://reffect.co.jp/vue/finally-understand-vue-cli https://vuetifyjs.com/ja/getting-started/installation/

概要 vuetifyのv-data-tableで、以下の３つの実装方法について説明します チェックボックスを表示し、かつ、行全体でクリック可能にする方法 選択中のチェックボックスの色を変更する方法 選択中の行全体の背景色を変更する方法 前提 Vue.js(2.x)、Vuetify、Vuetifyのv-data-tableを使用して表を表示 v-data-tableでは、single-selectを設定 必須ではないですが、自分が実装した際に後述の条件がそうしているため、その前提のコードになっています。 データ Vuetifyのv-data-tableのドキュメントにあるサンプルのデータ を利用 1. チェックボックスを表示し、かつ、行全体でクリック可能にする方法 @click:row にメソッドを指定し、後述methodsにあるように、第１引数で選択したアイテムのデータ（行データ）、第２引数で選択行のv-data-tableの情報（isSelectedなど）が取得できるようでそれを利用する 注意点 同様のことをするために、v-data-tableタグの中で、tr,tdタグを書いて、v-data-table__selectedをクラスに追加すると、 レスポンシブ化されない ので注意 。1-1のコードの方が記載量も少ないのでこの方が良いと思います。 1-1. コード <v-data-table v-model="selected" :headers="headers" :items="desserts" item-key="name" single-select show-select class="elevation-1" @click:row="rowClick" > <template v-slot:item.data-table-select="{isSelected, select }"> <v-simple-checkbox color="primary" :value="isSelected" @input="select($event)" ></v-simple-checkbox> </template> </v-data-table> methods: { rowClick: function(item, row) { row.select(!row.isSelected) } } 1-2. 画面 2. 選択中のチェックボックスの色を変更する方法 v-data-tableタグの中に、以下のようにチェックボックスを書く。 以下は、primaryカラーに変更する場合の例（該当部分のみ抜粋。他の部分は前述の1.を参照） 2-1. コード <v-simple-checkbox color="primary" /* ここで指定 */ :value="isSelected" @input="select($event)" ></v-simple-checkbox> 2-2. 画面 3. 選択中の行全体の背景色を変更する方法 CSSを定義する。以上。 3-1. コード <style scoped> /* 例 */ tr.v-data-table__selected { background: #1976d2 !important; } </style> 3-2. 画面 その他 自分がググった際に、いい例がなかったので、他の人に役立てばと思い、Qiitaの記事を書きました。もし役立ちましたら、LGTMよろしくお願いいたします。