Vue.js

CDNでVue 3を使用する

Vue.jsで作成したプログラムの「ビンゴゲーム」と「宣言的レンダリング & リアクティビティ」で、CDMのvueの読み込み方が異なっている。 ビンゴゲームの文脈 <head>タグの中に以下を記入している。 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> https://github.com/ki-hi-ro/bingo/blob/master/bingo.html 宣言的レンダリング & リアクティビティの文脈 </main>の後に以下を記入している。 <script src="http…

• Vue.js

Vue.js ビンゴ

Vue.jsでビンゴを作成してもらった。 ChatGPT 5に。 ざっくりとした仕様 B列（1~15）、I列（16~30）、N列（31~45）、G列（46~60）、O列（61~75）のビンゴカード 番号を引くボタンを押すと、カードを引くことができる 自動で引くボタンを押すと、自動でカードが引かれる ビンゴになると、状態がBINGO!になってゲームが終了する ソースコード https://github.com/ki-hi-ro/bingo/blob/master/bingo.html

• Vue.js

vuedraggableの仕組みを理解する

要素をドラッグアンドドロップできるVue.jsライブラリ「vuedraggable」の仕組みを理解するために記事を書いていく。 現状の動作 サバ味噌煮を高カカオチョコレートの下に持っていったりすることができる。 before after サバ味噌煮をクリックした状態で、高カカオチョコレートの下まで移動して、クリックを手放した。 現状のソース frontend/src/components/ShoppingList.vueから、vuedraggableに関連する部分を抜粋する。 <template> <div> <form @submit.prevent="createSection" class="row">…

• Vue.js

Vue開発用のVS Code拡張機能を入れてみる

Vueで検索すると色々出てきた。 VeturとVue (Official)を入れるのが直感的に良さそう。 Vue 3の場合はVue (Official) Vue 3かどうかはどうやって確認するか？ npm list vueで、Vueのバージョンが確認できた。 最初は、Vueの一階層上で実行してしまったが、Vueのあるfrontendに降り立って、実行した。 hiroki@shibatahiroshitakanoiMac shopping_list_app % npm list vue /Users/hiroki/Downloads/python/shopping_list_app └── (empty) hiroki@shibatahiroshitak…

• VS Code
• Vue.js
• ライブラリ管理

商品が削除される時に何が起こっているのか？

例えば、トマト水煮を削除するには、 チェックボックスを押す。 削除された。 この理由をソースコードドリブンで解明していこう。 フロントエンド 要素の検証で確認すると、チェックボックスは、inputタグになっている。 frontend/src/components/ShoppingList.vueでは、以下のあたりが関係してきそうだ。 <template> <div> <section v-for="section in sections" :key="section.id" class="section"> <draggable v-model="section.items" item-key="id" @en…

• Vue.js
• Webアプリ開発

現状のオフライン対応の仕組み

以下のプロジェクトを「docker compose up --build」で起動した後、 https://github.com/ki-hi-ro/shopping_list_app 同一IPアドレス:ポート番号でスマホでアクセスできる。 機内モードに変更 機内モードにすると、以下のようになる。 オフラインモード（変更は後で同期）が表示されている。 機内モードを外す 機内モードを外すと、オフラインモードの文字が消える。 現状の問題点 5Gのモバイル通信で、オフライン操作が行えない。 具体的には、商品の追加ができない。 同一IPセグメントにいないためと思われる。 機内モードにしたときに、オフラインモードの表示が行われる理由 それは、frontend/src…

• Vue.js
• Webアプリ開発

カレンダー入力のUI作成、vuejs-datepicker

クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。 学習ブログを書いていきます。 今回の要件 引越し予定日の年・月・日をカレンダーから選択できるようにする。 ライブラリを使うための準備 まずは、vue.jsとvuejs-datepickerを読み込みました。 https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js https://unpkg.com/vuejs-datepicker 最も基本的な形 See the Pen vue datepicker by Shibata Hiroki (@khiro-eng…

• Vue.js
• Webアプリ開発

Vue.jsとjQueryの違い

Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが確認できます。 See the Pen jQuery by Shibata Hiroki (@khiro-enginner) on CodePen. jQueryの場合 jQueryの場合を見ていきましょう。 HTML HTMLでは、以下の3点を書いています。 入力欄 追加ボタン テキストが追加される場所 See the Pen jQueryでテキス…

• HTML・CSS
• Vue.js

vuetify

vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.com/en/getting-started/installation/#installation 公式ドキュメントの流れに沿って、進めていきました。 vuetifyのインストール yarn create vuetify を入力すると、以下のようになりました。 Mac:vuetify shibatahiroshitaka$ yarn create vuetify yarn create v1.22.4 [1/4] 🔍 Resolving packages... [2/…

• Vue.js
• Webデザイン

Vueアプリケーション、Vite、node.js、npm run dev

以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 ブラウザで実行されたVueアプリケーション ブラウザで実行されたVueアプリケーション 本記事では、どのように上の画面に到達したのかについて書いていきます。 公式サイトを開く https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application まずは、公式サイトの「クイックスタート」というページを開きました。 ここに、Vue.j…

• Vue.js
• ライブラリ管理