Composition API

はじめに 注意 Composition API の書き方 親コンポーネント 子コンポーネント script setupへリファクタリングする(親コンポーネント編) script setupへリファクタリングする(子コンポーネント編) まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、Vue.jsのComposition APIをscript setupへリファクタリングする方法をまとめます。 Vue.js3.2よりscript setupが導入されました。 script setup で書くことにより、より簡潔な記述ができるようになります。 既存のComposit…

はじめに Day.jsの導入経緯 JavaScriptは日付処理がややこしい。 momentは既に死んでいる Day.js、君に決めた Vue.js(Vue3)でのDay.js使用方法 Day.jsのインストール Day.jsをvue.jsへ読ませる方法(inject/provide使用) Day.jsをvue.jsへ読ませる方法(globalProperties使用) Day.jsプラグインの読ませ方 まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 javascriptの日付処理ライブラリである、Day.jsをVue3で使用する方法についてまとめたいと思います。 D…

はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下の…

どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + without Vuex のパターンへ書き換えを行っています。 Composition APIへ書き換える最大のメリットは、コンポーネントのロジック部分の多くを単なるJavaScript関数として切り出せるので、コンポー…

はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思い…

@nuxtjs/composition-apiを使ったプロジェクトで、$axios.postを発火するメソッドをテストをする際にかなり詰まったので記事にします。 検証環境 nuxt: 2.15.3 @nuxtjs/composition-api: 0.22.3 @nuxt/typescript-build: 2.1.0 jest: 26.6.3 @vue/test-utils: 1.1.3 ざっくり結論 Vue Test Utilsのマウンティングオプションで$nuxtとcontextをモックする $axiosが読み込まれない問題 useContext()から$axiosを読み込み、postや…

@nuxtjs/composition-apiを使用したプロジェクトでテストを実行する際、表題のエラーでテストが実行されないことがあります。 実装ではnuxt.config.tsのbuildModulesに@nuxtjs/composition-apiを記載していると思いますが、Jestにも@nuxtjs/composition-apiのエントリーポイントを教えてあげる必要があります。 module.exports = { moduleNameMapper: { '^@/(.*)$': '<rootDir>/$1', '^~/(.*)$': '<rootDir>/$1', '^vue$': '…

事情があって[^1]本格的にReactをやることになった。今まではVue2.xで開発していた。 慣れてしまう前に印象を書き残しておくことにする。 前提は↓の記事と同じ。 rimarimadan.hatenablog.com 所感 「State自体がわからない」ところから始めるならVue（Options API）から始める方が圧倒的にわかりやすい。 逆に、保守や継続した開発を考えるとReact.jsの方がメンテナンスしやすい印象を受けた。 State自体がわからないとき Vue2.xのときはState管理は基本的にdataを使う。これがとてもわかりやすかった。 右も左もわからない状態からだと「d…

はじめに こんにちは、hacomonoでウェブアプリケーションの開発を担当しています、野崎です（社内ではサイモンと呼ばれています）。 少し前に、Nuxt 3とCapacitorで作るiOSアプリの記事をパブリッシュしており、今回はその続きです。Capacitorで構築したiOSアプリから外部ライブラリをプラグイン化して呼び出すという話をします。 併せて読んでいただけますと、より理解しやすくなりますのでそちらもご参考ください。 techblog.hacomono.jp 前提条件 hacomonoのPOSレジとは hacomonoではフィットネスクラブやジムの店舗管理システムと連動して使えるPOS…

実践 Angular: Standalone Components をざっくりキャッチアップしてみた Part6（まとめ） lacolaco さん監修の実践 Angular: Standalone Components をざっくりキャッチアップしてみます。 zenn.dev Who is lacolaco? / lacolaco さんて、どんな人？ Google Developers Expert for Angular Angularコントリビューター Angular日本ユーザー会代表 jsprimer.net 著者 Zenn プロフィールから引用 前回 lifewood.hatenablo…

実践 Angular: Standalone Components をざっくりキャッチアップしてみた Part4 lacolaco さん監修の実践 Angular: Standalone Components をざっくりキャッチアップしてみます。 zenn.dev Who is lacolaco? / lacolaco さんて、どんな人？ Google Developers Expert for Angular Angularコントリビューター Angular日本ユーザー会代表 jsprimer.net 著者 Zenn プロフィールから引用 前回 lifewood.hatenablog.com…

はじめに vue-cropperjsの概要 調査 README バージョンについて Props コールバック 実装編 応用編 円形切り取り 画像サイズの自動調整 最後に はじめに お久しぶりです！ クロスマート株式会社でフロントエンドのタスクを主に担当しております。ナイスガイの福留です。 大腿骨頸部骨折して緊急搬送されたエンジニアが３ヶ月半の入院中でも仕事が出来た訳の執筆後、特に大腿骨周りに異常はなく健康に過ごせております。 日々の散歩とカルシウムは大事ですね。 本日は、弊社プロダクトでも使用しているライブラリであるvue-cropperjsを色々調べてみる記事になります。 また以下から弊社の…

1. はじめに 2. リポジトリ全体に関して 2.1. ディレクトリの構造 2.2. パッケージマネージャ 2.3. Node.js 2.4. スキャッフォールディングツール 2.5. そのほかの モノレポツール 3. ビルド・バンドルツールに関して 4. ドキュメンテーションに関して 5. テストに関して 5.1. ブラウザで実行するテスト 5.1.1. Storybook の play 関数で実装したインタラクションテスト 5.1.2. Visual Regression Test (VRT) 5.1.3. axe-core による a11y テスト 5.2. Node.js で実行するテ…

こんにちは。新卒2年目ソフトウェアエンジニアのほっしーです。 Vue.jsの勉強のために個人で作ったWebアプリをVue2からVue3へ移行しました。その際に悩んだ・行き詰まった点をまとめました。「refとreactiveどっちを使えばいいのか？」といった情報は調べれば出てくると思いますが、悩んだ・行き詰まったポイントについてはなかなか出回っていなかったので、同じ悩みを持つ方に向けて書き残しておきます。 主な作業内容 どのパッケージをインストールするか Composition APIを使う際の雛形 想定外の行で発生したエラー 感想 主な作業内容 今回、Vue2からVue3へ移行した際に以下の2…

Nuxt3+Firebase 捨てられるWebアプリケーション設計 「Nuxt3+Firebase 捨てられるWebアプリケーション設計」発行主旨・内容紹介 「Nuxt3+Firebase 捨てられるWebアプリケーション設計」目次 「Nuxt3+Firebase 捨てられるWebアプリケーション設計」Amazonでの購入はこちら 「Nuxt3+Firebase 捨てられるWebアプリケーション設計」楽天市場での購入はこちら※電子書籍版となります Nuxt3+Firebase 捨てられるWebアプリケーション設計 インプレスグループでIT関連メディア事業を展開するインプレスは、技術書典や技術書…

Vue とは Vue コンポーネントの２つのスタイル Vue アプリケーションの作成 前提条件 テンプレートを作る アプリケーションのインスタンスを作る アプリケーションのマウント 参考 Vue とは 説明は次のように書かれている。 Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。 フレームワークがピンと来なかったので少し調べました😅『フレームワーク』はアプリケーション開発するた…

最近は細々したタスクを担当しつつ、もっぱらNuxtのアップデート作業に従事しています。 で、色々やっているうちにちょこちょこ知見も溜まってきたのでそれらをまとめてみようと思います。 変数の値 Vueのcomputedよく使うと思います。 例えばVue2までのOptions APIで書くとこんな感じ。 <script> export default { name: 'Hoge', data() { return { hoge: 1 } }, computed: { fuga() { return this.hoge * 2; }, piyo() { return this.fuga + 1; }…

フロントエンドエンジニアのこん(@k0n_karin)です！ 今回は昨年末に書いたウェブストーリー関連のお話となります。 tech.yappli.io HLSでm3u8を再生する HLS用のcomposableを実装 composableを利用するVueコンポーネントを実装する おわりに HLSでm3u8を再生する 前回、動画はmp4を表示していましたが、モバイル端末のWebViewで再生することを考えて、HTTP Live Streaming（HLS）を使った動画再生に対応します。HLSで動画再生する際、セグメントに分割されたtsファイルとプレイリストとなるm3u8を扱う必要があります。これ…

こんにちは。弁護士ドットコム クラウドサイン事業本部の篠田 (@tttttt_621_s) です。 普段はフロントエンドの開発を担当しています。 Vue.js を使ったプロダクト開発において、今年の課題としてあげられるものは Vue2 のサポート終了による Vue3 への移行ではないでしょうか。 弊社プロダクトの CloudSign や社内用の管理画面（以下 backyard と呼びます）も Vue.js で開発されています。 プロダクトの安定性を担保するためにも段階的に移行していく必要があります。本記事では Backyard を Vue2.7 に移行した取り組みを紹介します。 Backyar…