React, Vue.js, JavaScriptでdebounceの仕組みを理解| アールエフェクト
JavaScriptのdebounceの仕組みがよくわかっていないで理解したいという人向けに PureなJavaScript(Vanilla JavaScript) だけでなくReact, vue.jsではどのようにdebounceを利用することができるのか解説しています。lodashライブラリのdebounceを利用すれば簡単に設定できますが本書では自作のdebounceを作成することでdebounceの仕組みを理解してReact, Vue.jsでの設定方法を確認していきます。lodashライブラリを利用した場合の設定方法も合わせて説明を行なっています。 作成するdebounce関数はReact, vue.jsで共通なのでReact, Vue.jsで設定を行う前にPureなJavaScript(Vanilla JavaScript)でコードの説明と動作確認を行います。 Debounceと
vue.jsとTailWindCSSとday.jsで作るズルいカレンダー - Qiita
カレンダーを作る際にテーブルを作るのも何なのでグリッドレイアウトを使ったらコードもシンプルになりました。 import dayjs from 'dayjs' // 月末の日にち const endDate = dayjs().endOf('month').get('date') // 月初の曜日 const startWeekday = dayjs().startOf('month').get('day') // 配列を作ります。 const dates = computed(() => { let data = [] //月の初めの日までは何もなし for (let i = 0; i < startWeekday; i++) { data.push('') } //日付を追加します。 for (let h = 1; h <= endDate; h++) { data.push(h) }
【Vue3】ブラウザでマイク音声を録音する(Composition API) - Qiita
やりたいこと ブラウザで録音するアプリケーションを作ります。 Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。 基本 ブラウザでの録音はMediaStream Recording APIを使います。 基本的には以下のソースコードと解説を参考にしました。 MediaStream Recording API の使用 - Web API | MDN 全コード 短いので、テンプレートの全コードを掲載します。 <template> <button @click="startRecording()" v-if="!record.state"> 録音 </button> <button @click="stopRecording()" v-if="record.sta
Vue3系でフェードアニメーション - Qiita
これは何？ 画像がフェードイン&フェードアウトするサンプル。 作った経緯 勉強のため。 かつ、ネットには動かないサンプルが大量に転がっていて腹がたったから。 今回重視したのは以下２つです。 v-for と v-if を同時に使いたい時にどうするか理解する transition によるアニメーション挙動を理解する そもそも、v-for と v-if を同時に使うことは非推奨だとドキュメントに書いてあるのに、 ネットでは同時に使っているサンプルが出てくるので、ドキュメントのことを思い出すまでに時間がかかりました。 スタイリングガイドによると、要は フィルタ済みの Object で for を回す template 構文を使って、 for と if を分ける このどちらかにしなければいけないので、今回は後者を選びました。 コード <template> <div class="slider-out
[Vue3]Composition APIで画面キャプチャ - Qiita
<script setup> import { ref } from 'vue'; const stream = ref(null); const startCapture = async () => { console.log("startCapture!"); try { stream.value = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false, }); dumpOptionsInfo(); } catch (err) { console.error(err); } return stream; } const stopCapture = () => { console.log('stopCapture'); const tracks = stream.value.getTracks(
![[Vue3]Composition APIで画面キャプチャ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d84d1d0567166ac8b43f58e18a728f79f9d8a464/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCVnVlMyU1RENvbXBvc2l0aW9uJTIwQVBJJUUzJTgxJUE3JUU3JTk0JUJCJUU5JTlEJUEyJUUzJTgyJUFEJUUzJTgzJUEzJUUzJTgzJTk3JUUzJTgzJTgxJUUzJTgzJUEzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lZDE5MmU2NDU3MmFjZmVlYWQzZTliOTI0ODJjNDFiMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa3NfamFnYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzFjODQwYmMxYTVhYzQ4ZTlmNmFlODc4NTRjYzM1ZGQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D786b7a6e623e109835beb27e6994e4a2)
NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その1：画面の説明とSDKの導入） - Qiita
NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その1：画面の説明とSDKの導入）monacaNCMBFramework7DeepL NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。 今回は画面の説明とSDKの導入までを進めます。 コードについて 今回のコードはNCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリですにアップロードしてあります。実装時の参考にしてください。 利用技術について 今回は次のような組み合わせになっています。 Monaca NCMB JavaSc
vue3で郵便番号の自動入力をする - Qiita
はじめに この記事ではvue3で郵便番号の自動入力をする方法を紹介します。 実装例で、フォーカスが外れたときに郵便番号を自動入力するサンプルコードを載せています。 環境 Vue.js: 3.0.5 Node.js: 14.17.0 npm: 7.16.0 Bootstrap: 5.1.3 ライブラリのインストール yubinbango-core2というライブラリを使用します。 https://www.npmjs.com/package/yubinbango-core2 ターミナルで以下を実行 補足 本家のyubinbango-coreはmoduleがエクスポートされていないため、そのままだとvueで使えません。 そのため、moduleエクスポート済みのyubinbango-core2をインストールしています。 （https://github.com/yubinbango/yubinbang
index.htmlだけでCSVを検索するシステムを改善する - Qiita
概要 index.htmlだけでCSVを検索するシステムをつくるという記事を以前に投稿しました https://qiita.com/tamoco/items/87e344c8832c54d95cfb コードや実際に動くものを公開しています ソースコード https://gitlab.com/tamoco-mocomoco/csv-search 公開先 https://tamoco-mocomoco.gitlab.io/csv-search index.htmlだけでお手軽にCSVが検索できることから初心者の方やお試ししたい方などちょっとした需要があるようでした ご利用いただいている状況など考えると改善したいポイントがいくつかあったので、このシステムを改善しようと思います まずはダメ出し（改善ポイントを洗い出す） CSVをそのままテーブルとして表示しちゃっている エンジニアのあるあるですがC
index.htmlだけでCSVを検索するシステムをつくる - Qiita
概要 index.htmlだけでCSVを検索するシステムをつくりました。 以下の方法でCSVファイルを読み込み表示します。 予めアップロードしたCSVを読み込む <input type="file">でダイアログからCSVファイルを選択する 使用したフレームワーク JavaScript：Vue.js CSV変換：PapaParse CSS：bulma 使用したオープンデータ(CSVファイル) 以下のオープンデータを使用しました。 https://www.itdashboard.go.jp/DataFeeds/csv#300 https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200521&tstat=000001011777&cycle=0&tclass1=000001094741 公開先 コ
Vue3+Node.jsで認証機能を実装する - Qiita
はじめに サーバー側、RPA開発の経験が主なのですが、フロント側の経験も積みたく、勉強も兼ねてVue.jsを使った社内システムの開発を最近はじめました。 ほぼ初めて触るのでせっかくならば最新バージョンでと思いVue3で実装をしてみましたので、ここに備忘録として作業内容を残します。 // 余談 現時点(2022/04/09)ではナレッジが少ないことと対応ライブラリが少ない事から、今後の開発が辛いことが分かりましたので、社内システムはVue2で作り直そうと思っています。 本記事で紹介すること 構成図 完成イメージ VueCLIからVueプロジェクト作成 フロントエンド-認証画面の実装 Node.jsプロジェクト作成 バックエンド-認証処理の実装 ※Node.jsとVue.jsのインストールは割愛しております。 構成図 ざっくりこんな感じです。 // コメント 今回はやっておりませんが、実際に作
To-Do ListのChrome拡張機能をVue.jsで作る - Qiita
Chromeの拡張機能でいい感じのTo-Do Listが欲しいと思い、ちょうどバイト先でもVueを使っていたのでVueを使い作ってみました。 (Vue.jsはバージョン2.6.14です。あと, 他の記事を見たときにbuildがめんどくさいと書いてあったのですがその辺りはpythonで実行しています。buildしたときにファイルを追加しなきゃならないのがめんどくさい) 是非ダウンロードして使ってみて下さい!!! ソースコード↓ 完成イメージ 機能 リストへの書き込み やったことをチェックできる リストのリセット リストの一括リセット ダークモード リストのドラッグ 手順 Chorme拡張機能の申請に必須のファイル(manifest.json)を作成 作りたいものをVue-cliで作成 申請し審査を通す 1.Chorme拡張機能の申請に必須のファイル(manifest.json)を作成 申請、
【Vue3】でアニメーション(Web Animations API)を使ってみた - Qiita
こんにちはSadoです。 今回はVue3で開閉処理を行う際に、「Web Animations API」(JavaScript)を使ってゆっくり開閉するアニメーションを作成してみます！ 純粋に宣言した CSS とは違って、Web Animations APIを用いる場合 はプロパティからアニメーション時間を動的に設定することが出来るみたいです。 Web Animations APIについて やること シンプルに開閉ボタンと開いたときに表示される要素を用意して、そこにアニメーションを付け加えていきたいと思います。 準備 表示用のファイル（親）とアニメーション処理を書くファイル（子）に分けておきます。 Vue3.2の<script setup>構文を使用しております。 CSSはTailwindを使用。 <script setup lang="ts"> import Child from "./C
VueJSでのTouchイベント処理をむりやり実現する - Qiita
mouseの慣性操作、TrackPadのピンチ操作、TouchScreenの慣性操作、ピンチ操作をどうやら自分で実装しないといけなさそうです ※これ本当ですかね？もし良い情報あったらお教えください #慣性操作の実装(Mouse/TouchScreen) MouseとTouchScreenの慣性動作について実装します。 どこかにライブラリがありそうだけど見つけられず、自分で実装しています。 実装の思想としては、慣性が初速から動摩擦係数で減っていくとすると、 有名なニュートンさんのF=maを一回積分してv(t) = v(0) - at： aは摩擦係数とすると計算できるという単純な中学物理のロジックです。 x, y座標のそれぞれの時間あたりの減衰Speedを計算しています。 async onGraphUp (e) { // 初期速度の計算 this.touchSpeedX = Math.sqrt
【TypeScript】Vue 3 SFCでLazy LoadingのSuspenseを自前で作る - Qiita
背景 筆者は、React 18で本格的に導入されるデータ受信が終わるまで仮の部品（Loading...など）を表示する機能がとても待ち遠しいです。 仕事でVueを使っているので、Vueでも同じことができたら、と思いましたが、VueのSuspenseはまだ開発中でProductionの製品では使えません。 それと、データ受信の間もいいですが、部品のJavaScriptを読み込んでいる間（Lazy Loading）も、データ受信を待っている間も、Suspense部品を出したい！というのが、筆者の狙いです。 目次 環境セットアップ Lazy Loading部品のセットアップ データ取得のロジック Suspense導入 環境セットアップ 今回は簡単に見せたいのでVue CLIでセットアップします。
【2022年2月時点】お酒の日記アプリをSPAで作ったけど、Googleに登録されたし、Adsenseも合格できた - Qiita
【2022年2月時点】お酒の日記アプリをSPAで作ったけど、Googleに登録されたし、Adsenseも合格できたSEOadsenseSPAVue.js検索エンジン Webアプリの開発を始めた人は、とっつきやすいSPA（シングルページアプリケーション）からスタートする人が多いと思います。 このSPA、巷では「SPAはSEOの観点で不利」とか「広告を載せようにもAdsenseの審査通らない」なんて言われています。 一方で、「Googleの検索botはJavascript読めるからSPAでも大丈夫」なんて話もあります。 実際のところ、どうなのでしょうか？？？ 今回、SPAとしてウェブアプリを開発し公開したところ、検索エンジにも反映され、Adsenseの審査も通りましたので、参考情報としてご報告いたします。今後、SPAで開発しようとしている人の手助けになれば幸いです。 （2022年2月時点での情
Vueで可変モーダルを実装する - Qiita
はじめに ドラッグで移動、拡大縮小ができるモーダルを作ってみました。 早速完成形からお見せします。 モーダルの移動 サイズ調整 移動 まずは、ヘッダー部分をドラッグすることでモーダルが移動ができるようにします。 1. テンプレート <template> <div class="draggable-modal" :style="{ width: `${modalWidth}px`, height: `${modalHeight}px`, transform: `translate(${pos.x}px, ${pos.y}px)`, }" > <div class="header" @mousedown=" (e) => { adjustDragStart(e) } " > header </div> <div class="body">body</div> </div> </template
Vue3 の CompositionAPI で p5.js を動かす - Qiita
この記事は、ニフティグループ Advent Calendar 2021 6日目の記事です。遅くなりすみません！ 最近はシミュレーションの描画にハマっており、p5.js 触ってみたいなということで今回のネタにしました。 Vue.js のコンテナ内で、CompositionAPI の記法で p5.js を動かしたので紹介します。 CompositionAPI についての説明は割愛します。以下の記事を参考にさせていただきました。 Vue 3 Composition API を使ってみよう 作ったもの 振動するボールを作って動かすことができます。 マウスをクリックするとその位置にボールが集まってきます。 丸い物体が絶妙に揺れながら近づいてくるの可愛すぎる。 p5.js の紹介 p5.js はクリエイティブコーディングのための JavaScript のライブラリです。 アートやシミュレーションの描画
＊Vue 3系＊ モーダルウィンドを作成 - Qiita
はじめに Vue3系を勉強し始めてcomponentを使う練習をしたかったので モーダルを作ってみた時の忘備録です。 また、初心者のため Emit（子→親）についても整理しながらの記事になります。 もうVueを使い倒している方には向かない内容につき 時間の無駄になってしまうので読まないでくださいね！！！ 私は、今までVue2系の"vue-property-decorator"を使用していたので Vue3系の勉強をしながら作成したものになります。 不備等もあると思いますがご了承ください。 ＊関連ワード Vue.js 3系 / TypeScript / SCSS / component / Mac OS / Modal / emit 完成形 ディレクトリ構成 ディレクトリ内 ※ storeやrouterなど使用していないものは省略しています src/ ┣ components/ │ ├ He
Vue 3 + TypeScript ではじめるリポジトリパターン - Qiita
はじめに Vue 3系 + TypeScript での API によるデータ操作をリポジトリパターンを用いてまとめたときの実装内容を、実際の手順とコードを踏まえつつまとめます。 リポジトリパターンとは リポジトリパターン とは、データ操作の処理を一元管理することで、ビジネスロジックからデータ操作ロジックを切り離すデザインパターンです。 これにより、データ操作ロジックの保守性・再利用性を向上させることができます。 つまり axios の多重管理が発生し、エンドポイントや axios のプロパティに変更があった際など保守するのが大変 コンポーネント内で同じようなデータ操作ロジックを何度も書くのが大変 コンポーネント内でのデータ操作ロジックの直書きによって単体テストが大変 このような大変を解消してくれるのが、リポジトリパターンです。 サンプルコード では、実際に手を動かしてみていきましょう。 1
【 Vue.js】Vue.jsでGoogleBookAPIを取得する。 - Qiita
GoogleBooksAPI概要 Googleに登録されている本を検索する事ができる。 登録なしで使える：1000件/日 情報の精度、検索結果が少し弱い 使用API 公式リファレンス * base_url * https://www.googleapis.com/books/v1/volumes? + 検索queryq=ウーロン茶 * response:json { "kind": "books#volumes", "totalItems": 1484, "items": [ { "kind": "books#volume", "id": "kFIgNwAACAAJ", "etag": "wn0MtLjELK0", "selfLink": "https://www.googleapis.com/books/v1/volumes/kFIgNwAACAAJ", "volumeInfo": {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
