Hatena Blog Tags
はてなブログ トップ
vuejs
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

vuejs

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
そららのクリエイティブログ•4ヶ月前

【Vue.js＋TypeScript】デジタル時計を作ってみた

こんにちはです。あっちのそららです。最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。 デモページ acchinosorara.github.io「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。 文字のデザイン カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。 参考記事 ja.wikipedia.org HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。例えば、 「2」→ C、Fを非表示 「4」→ …

#TypeScriipt#vuejs#Vue 3#GitHub#プログラミング

関連ブログ

Tak Log•6ヶ月前

NuxtプロジェクトでHistoireを利用する

はじめに コンポーネントカタログとしてStorybookが有名ですが、こいつはReactベースらしいです。 使ったことないので詳しくないんですけど。 私の関わるプロジェクトではVue.jsを利用することが多いです。 VueベースのコンポーネントカタログとしてHistoire（イストワール）というものがあるというのを知りました。 histoire.dev フロントエンドの開発をしていると、1個のコンポーネントだけ表示してチマチマ修正したいという欲求があったのですが、コンポーネントカタログはこの欲求を満たしてくれるものなので、最近ではなくてはならないものになってきてます。 Vueを利用したプロジェ…

#vuejs#nuxt#histoire
Tak Log•6ヶ月前

Vue.jsとGoogelカレンダーAPIを連携する その2

takedatakumi.hatenablog.com 前に書いた上の記事ですが、問題なく動作はするんですけど pnpm build したらエラーでまくったので、修正版の記録です。 どうも、コードがかなりレガシーだった模様。 まず、TypeScriptでGoogle系のAPIを扱うために型定義をインストールします。 pnpm add -D @types/gapi @types/gapi.client @types/gapi.client.calendar-v3 @types/google.accounts 次に、修正後のvueファイル全文です。 Calendar.vue <script set…

#vuejs#Google Calendar API#TypeScript
しばいぬびより•6ヶ月前

Flask+Vue.jsでWebアプリ作ってみた

Goal 爆速でFlask+Vue.jsでWebアプリを作ってドヤァする Reference https://qiita.com/Takeshi_Nagayasu/items/d9d7baca23e9197c60e6 https://nodejs.org/ja/download https://ja.vuejs.org/guide/quick-start.html https://flask.palletsprojects.com/en/stable/quickstart/# https://developer.apple.com/forums/thread/682332 技術スタック Mac…

#やってみた#技術#Flask
Mobile Factory Tech Blog•9ヶ月前

1500コンポーネントある巨大なVue2アプリのVue3移行

はじめに 駅メモ！開発チームエンジニアの id:kaidan388 です。 駅メモ！のフロントエンドは Vue で書かれており、およそ 1500 コンポーネントあります。 Vue2 が EOL を迎えるに際して、これをどう Vue3 に移行するかが問題になりました。 具体的には以下の 2 点をどう達成するか、というのが問題になります。 普段の機能開発を止めずに、Vue3 移行を進めたい 普段のリリースを止めずに、Vue3 のリリースをしたい 駅メモ！開発チームでは、途中メンバーの交代もありつつですが、基本的に 3 名で 1 年半かけて、上の要件を満たしつつ Vue3 へ移行を完了しました。 こ…

#Vue 3#vuejs#フロントエンド実装
雑に書く•1年前

Vue Fes Japan 2024 メモ

去年に引き続き今年も参加してきました。 今年も前回と同様に、思い出す限りのメモ。 Vue Fes Japan 2024

#vuejs#vuefes
猫とGAS•1年前

VueJSで3桁カンマ付き入力項目を作る

See the Pen 3桁カンマ付き入力項目 on CodePen. 入力が終わったらカンマをつけ、入力中はカンマを消す 入力される値に気を使いながら値を書き戻す 初期状態でもカンマがつくようにする 猫 全体サンプル 入力が終わったらカンマをつけ、入力中はカンマを消す 入力中かどうかは、input項目にフォーカスが当たっているかどうかで判断をする。フォーカスを当てた時、フォーカスを外した時にそれぞれ呼び出せるイベントがあるので、イベントの中で入力項目の見た目を変更する。カンマをつけてしまうと文字列になってしまうので、バインドする変数はダミーの文字列にしておく。 カンマは正規表現での置換でつけ…

#カンマ付き入力項目#GoogleAppScript#猫
猫とGAS•1年前

PC、タブレットからGASを使ってGoogleドライブに署名を保存する

See the Pen 署名 on CodePen. 署名するエリア（キャンバス）を準備する クリアボタン、保存ボタンを作る タブレット、スマホに対応させる 画面の縦横変更、サイズ変更に対応させる Googleドライブに署名を保存する 猫 全体サンプル 署名するエリア（キャンバス）を準備する 署名欄にはcanvasタグを使用する。画像を表示したり図形を描画したりいろいろな使い方ができるタグだが、そのうちの線を引く機能を活用してマウスがクリックされている間だけ線が引かれるようにする。試してみるとなめらかな線が引かれるが、実際はマウスが動くたびに細かい直線を積み重ねている。canvasタグを使う前…

#Google App Script#署名#サイン#猫
猫とGAS•1年前

郵便番号から住所を検索する（複数の住所がヒットする郵便番号対応）

See the Pen 郵便番号検索 on CodePen. 郵便番号検索 複数候補から選択できるようにする 見た目を調整する 猫 全体サンプル 郵便番号検索 日本郵便がzipcloudという郵便番号検索APIを公開しているため、検索自体は郵便番号をパラメータにセットしてfetchで呼び出すだけで実現できる。fetchにつきもののasync,await構文については、他の記事で簡単に触れているためそちらを見てみてほしい。 neko-gas.hatenablog.com 郵便番号検索APIをfetchで呼び出して住所を取得 (async ()=>{ let param = new URLSear…

#GoogleAppScript#vuejs#郵便番号検索#猫
猫とGAS•1年前

GASでVueJSのcomponentを使う

See the Pen ポップアップを開くComponent on CodePen. 前置き componentを作成する componentを呼び出し側で登録する slotを使ってポップアップの中身を設定できるようにする 猫 全体サンプル 前置き VueJSにはcomponentという非常に便利な機能があり、これを使うと機能を部品として切り出し再利用が可能になる上、ファイルを分けられるので可読性も上がる。componentを使う際は.vueファイルに定義したcomponentをexportし、使う側でimportするのが一般的であり、VueJSの書き方を調べるとこの書き方は非常によく目にする…

#GoogleAppScript#component#猫