Vue2

はじめに ブンブンHello World. どうも開発です。 今回は製品開発本部での取り組みである「たしなみ時間」と、その成果物を使って会社の業務効率改善も目論んだ話をしたいと思います。 はじめに 話の発端 たしなみ時間とは 成果物 アーキテクチャ 改善したポイント Vue3にアップデート Viteの採用 axiosの利用を止める ログイン機能の実装 実際の運用について 過去の問題点 今回解決できたこと 実際に運用してみてどうか おわりに

シナプスの技術部システム開発課の小園です。 Google Apps Scriptでウェブアプリケーションを作ってみました。 Google Apps Script とは GASでウェブアプリケーションとは？ 作ったもの ウェブアプリケーションで利用するコンテンツ ウェブアプリケーション ブラウザ側の技術要素 Webサイト内容 最終的なファイル構成 GASプロジェクト作成 GASスクリプト コード.gs htmlファイル index.html error.html cssファイル libraries.css.html jsファイル libraries.js.html index.js.html デ…

この記事の概要 Lit を用いて Web Component を実装しています Custom Element Manifest の情報を元に Vue や React のコンポーネントを機械的に実装しています デザイナーと開発者がデザインシステムの語彙を用いてコミュニケーションを取りやすいような設計をしています 1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する二つ目の記事です。 以前の記事を前提に作成しているため、先に…

Nuxt3への移行の前段階として、Vue2.7にする方法を調べたときの備忘録(*´ω｀*) 以前はnuxt-edgeを使ってたけど、いつのまにかNuxt2.16が出てた(*´ω｀*) Release v2.16.2 · nuxt/nuxt Vue2.7について Vue3で追加された機能のいくつかが使える様になっている。 ある程度、Nuxt2+Vue2.7で書き換えを行ってから、 Nuxt3+Vue3にするのが良さそう。 Vue 2.7 "Naruto" Released | The Vue Point できるようになること Composition API SFC <script setup> …

vue3-migration-improve-frontend はじめまして！ BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> Element…

GitHubを整理したい 現状私は学生の頃なんとなく使っていたものをそのままにしている これを社会人としてアピールできるようなレベルのものにしたい GitHubを個人利用の場合はグルーピングできないため名前で整理しよう 現状持っているリポジトリ 勉強するためのリポジトリ 競技プログラミング用のリポジトリ 実際にアプリを作成したリポジトリ 命名ルール Learning-XXX: 学習用リポジトリ それ以外とするようにする ただ作業が手間である 手間である... 作業メモ github.com 作業リスト アカウント URL check Vue2, Vue3学習 現 https://github.…

ここのところはReactの記事を書いていましたが、最近業務でNuxt3へのアップデートを行っているのでその備忘録も兼ねてまとめていきたいと思います。 大きく分けてPlugins, Composables, Composition APIについて。 Plugins Nuxtでは自作の関数や外部パッケージ等をプラグインとして使うことで拡張することができます。 Nuxt2ではこんな感じでした。 // /plugins/hoge.js export default (context, inject) => { inject('hoge', () => { console.log('hoge') }) …

Vueを使うならComposition Apiに書き方を変えることをお勧めします。 自分はVue3に変えComposition Apiを使うようになり、ソースコードがかなり機能ごとに作れるようになったと思っています。 ja.vuejs.org 具体例 export default { data(){ return { dialog: false, dialog_delete: false, } }, methods: { openDialog() { this.dialog = true; }, closeDialog() { this.dialog = false; }, openDelet…

結論 プロジェクト直下に SVGファイルをテスト実行時にパースするファイル (svgTransform.js) を定義して、Jestでそれを読み込むようにする github.com 各パッケージのバージョン nuxt@2.15.8 vue@2.6.14 @vue/test-utils@1.3.3 @vue/vue2-jest@29.2.0 jest@29.3.1 ts-jest@29.0.3 nuxt-svg-loader@1.2.0 svgTransform.js // NOTE: JestでSVGをパースするためのファイル // 参考：https://github.com/damianst…

Nuxt2のプロジェクトのNuxt3化をしてる途中。 nuxt-modules/iconが使いたいけど、 Nuxt2には対応していないよう。。 とりあえず、Nuxt2でIconifyを使える用意して、 Buefyのb-iconを置き換えれるようにしたときの備忘録。 iconifyの導入 Iconify for Vue 2 Icônes インストール $ npm install --save-dev @iconify/vue2 プラグインの作成 // plugins/iconify.ts import { Icon } from "@iconify/vue2"; import Vue from …

個人で開発しているものをNuxt2からNuxt3にアップデートしたため、その時に対応したこと等を記載していきます。 Nuxt2からNuxt3にアップデートしようと思った理由について Vue2が2023年末にサポートが切れてしまうためVue3にアップデートさせる必要があった vue2が2023年12月31日にサポート終了 (EOL) でNuxt2がVue2のみのサポートのため、Vue3サポートがされているNuxt3にアップデートする必要があったため。 Vue2のサポートについて v2.vuejs.org Nuxt2, Nuxt Bridge, Nuxt3で対応されているものについて nuxt.c…