はじめに こんにちは、まーです。 【Twitter】 https://twitter.com/KPz234iNYoOQZF5 【今回作成したサービス】 https://teachingplan.msy-a.com/ 今回は、以前Laravel＋Vue.jsで作成した授業計画（指導案）作成サービスをご紹介したいと思います。 要件概要 ○導入 日々多忙な教員にとって毎回の授業内容（指導案）をスピーディーに作成することはとても重要になります。 特に、教育実習生や教員になったばかりの先生は、授業の経験値がなく、毎時間授業の計画を考えることは大きな負担です。自分自身の教育実習に行った経験、教員の友人からのヒアリングから間違いないと思います。 授業計画を効率的に作成することは、授業の質に関わり、それは授業を受ける子どもたちの成長にも関わってきます。 ○そもそも？（問題点） 世の中にタスク管理アプリはたくさんありますが、 「指導案を作成する」ことに特化したサービスはありません。現場の先生方は、効率的に指導案を作成することができていません。 ○なぜなら？（問題点の裏付け） 指導案を作るために、紙やWordの雛形に毎回書き込んでいるのが現場の現状です。 （ひと昔前の教育実習生は、手書きで書いた指導案がボツになり、指導教官に目の前で破り捨てられ、書き直しさせられたなんて話も…） ○だから？（課題） そのため、WEBサービスを利用し、 「効率的に指導案を作成するべき」だと考えます。 ○そこで！（改善策） 効率的に指導案が作成できるサービスがあったらどうだろうか？と考えサービスを作成しました。 サービス概要 1.授業を登録 ユーザー登録後にマイページから授業を登録します。 単元名、日付、時限、本時の目標を登録します。 2.授業の詳細を登録 授業詳細画面で、授業計画を作成していきます。 デフォルトで、「導入」、「展開」、「まとめ」の構成になっています。 追加ボタンを押してタスクを追加していきます。 3.タスクの注意事項を確認 タスクにはそれぞれ、学習活動、時間、留意点が登録できます。 今回は、サクッと授業計画を作ることが目的なので最低限のものだけにしました。 使用技術 PHP 7.4.12 Laravel 5.8.38 JavaScript Vue.js 2.5.17 CSSフレームワーク Bootstrap フロントライブラリ jQuery axios lodash chart.js vue-chartjs vuedraggable テスト PHPUnit mocha テーブル設計 工夫した点 非同期処理でユーザビリティを上げる Vue.jsでaxiosを使用し、タスクの登録・削除を行なっています。 非同期で処理を行うことでサクサク動き、ユーザーにストレスを与えないようにしました。 ドラッグ＆ドロップで直感的な操作 タスクをドラッグ＆ドロップで移動できるようにしました。 vuedraggableを使って、ドラッグ＆ドロップされるたびに、タスクの並び順を非同期通信で書き換えています。 授業の計画を変更したい場合にも、直感的に変更できます。 授業の時間配分をグラフで可視化 「導入」、「展開」、「まとめ」の時間配分を円グラフで可視化しています。 vue-chartjsを使用し、タスクを登録・削除・移動したときにリアルタイムでグラフが描画されます。 おわりに 最後までお読みいただきありがとうございました！ ITには社会の問題を解決する力があると思っています。 これからも学んで色んな問題を解決できたらと思います。 それでは！

Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法になります。 Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法 <template> <button @click="importScript">click</button> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ methods: { importScript() { const script = document.createElement('script') script.setAttribute('src', 'https://www.youtube.com/iframe_api') script.setAttribute('id', 'script_id') document.head.appendChild(script) } } }) </script> 上記のコードではボタンをクリックをしたら外部のjsファイルを読み込みます。 読み込んだjsファイルの関数にはwindowでアクセスすることができます。 読み込んだjsファイルを削除する例 ページを離脱する時などに読み込んだjsファイルを削除する方法です。 <script lang="ts"> import Vue from 'vue' export default Vue.extend({ beforeDestroy() { const script = document.getElementById('script_id') if (script) { script.parentNode.removeChild(script) } }, methods: { importScript() { const script = document.createElement('script') script.setAttribute('src', 'https://www.youtube.com/iframe_api') script.setAttribute('id', 'script_id') document.head.appendChild(script) } } }) </script> 外部ファイルを読み込むだけならheadの中に記述すればOK 普通に外部のファイルを読み込む場合は、headの中に記述することで可能です。 <script lang="ts"> export default Vue.extend{ head() { return { script: [ { src: 'https://www.youtube.com/iframe_api' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } ] } } } </script> 下記の記事でも解説しています。

最近はTailwind CSSを使用していて、とても快適だなと感じておりましてその流れで今回はよく使用されるであろうON・OFF切り替えできるスイッチボタンを生のCSSを使わずにTaliwind CSSのみで作成してみました！ やること CSSを使わずに、Tailwindで用意されている「peer」という兄弟の状態に基づいて要素のスタイルを設定できるものを使用します。なお今回はVue.jsファイルを用いて進めたいと思います。 Tailwind CSS - peer- {modifier}について 準備 Tailwindの環境をご準備下さい。Tailwindのインストール※Tailwindのバージョンは3.0以降を使用。 適当なVueファイルを準備。※Vue.jsのバージョンは3.2を使用。 Index.vue <template> <label> <input type="checkbox" id="checkbox"/> </label> </template> チェックボックスのみが表示されている状態 実際にやってみる 早速スイッチボタンをTailwindを用いて作成していきます。 ON・OFFを判別するための変数を作成 スイッチボタンを押したときに、ON・OFFのフラグを変数で準備します。Vue3では、変数をリアクティブな状態にするためにrefを使用します。 Index.vue <template> <label> + <input class="m-5" v-model="isCheck" type="checkbox"/> + {{ isCheck }} </label> </template> + <script setup lang="ts"> + import { ref } from "vue"; + + const isCheck = ref(false); + </script> ON・OFFで変数の値（true・false）が切り替わっていることを確認。 Tailwindでスイッチボタンのデザインを作成 Tailwindの「peer」を使って、兄弟要素の状態がchecked（チェックされたとき）にデザインが切り替わるようにクラスを指定します。 「sr-only」ではinputを視覚的に非表示にするクラスがTailwindで用意されております。 「after」では、疑似要素を用いて、ボタンの切り替えに使用する球体を作成しています。 「peer」をinput(兄要素)に設定してspan(弟要素)に「peer-checked」を指定することで、チェック(ON)されたときに疑似要素のafterに対して色を変えたり、丸い球体の位置をずらしたりしています。 Index.vue <template> <label> <input v-model="isCheck" type="checkbox" + class="peer sr-only" /> + <span + class="block w-[2em] cursor-pointer bg-gray-500 rounded-full + p-[1px] after:block after:h-[1em] after:w-[1em] after:rounded-full + after:bg-white after:transition peer-checked:bg-blue-500 + peer-checked:after:translate-x-[calc(100%-2px)]" + > + </span> {{ isCheck }} </label> </template> <script setup lang="ts"> import { ref } from "vue"; const isCheck = ref(false); </script> スイッチボタン(トグル)が完成

vue 3.0でスマホアプリを開発中です。 ユーザー認証を行い、権限ごとにFooterメニューの中身を変更したいと考えました。 テスト駆動で行いたいため、 ユーザーと権限の型をインターフェースで定義しています。 また、Footerメニューと権限の選択などはvueのInject機能で実装します。 アプリ構造 App.vue main.ts 　\views FooterMenu.vue（フッターメニュー） LoginMenu.vue（ログインさせたり権限選択を変えたり） Contents.vue（表示するコンテンツ） \stores UserStore.ts(共有するProvideInjectのもの) データは IUser（Name:string、Role：IRole） IRole（RoleName:string、isManager:boolean） という形でUserの中にRoleを持たせています。 使う時は、 export class AppUser implements IUser {....} export class AppRole implements IRole {....} storeKeyを利用して userStore.ts import { InjectionKey,inject } from 'vue'; import { IUser, IRole } from '../interfaces/IUser'; export const UserStoreKey: InjectionKey<IUser> = Symbol("User"); export function useUserStore() { const store = inject(UserStoreKey); if(!store) { throw new Error('store not found'); } return store; } こういうのを用意。InjectionKeyで検索すれば詳しく解説している人がいます！ App.vue <script setup lang="ts"> import { onMounted, provide, reactive } from 'vue' import { UserStoreKey } from './stores/UserStore'; const expRole = new AppRole(); const expUser = reactive(new AppUser()); expUser.Role = expRole; provide ( UserStoreKey, expUser); </script> App.vueにてInjectionするのですが、この時に、reactive()を付けます。 付けないとLoginMenu.vueで変更したものがFooter.vueに反映されなかったりします。 また、refで各値を作っても良さそうですが、入れ子になっていると上手く動かなかったりします。 使い方の注意は Footer.vue <script setup lang="ts"> import { useUserStore } from '../stores/UserStore'; const currentRole = useUserStore(); const { Role } = toRefs(currentRole); </script> toRefsしないとFooter.vueでリアクティブになりません。