フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog

2024/02/18 125 users React フロントエンド Blog 前編

はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇な... 続きを読む

Vue.js と Nuxt の 2023年まとめ

2024/01/03 60 users Nuxt 駆け足 進展 アップデート 多く

2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺... 続きを読む

優先度B: 強く推奨 | Vue.js

2023/11/02 22 users 推奨 コンポーネント 少数 違反 ルール

優先度B: 強く推奨 ​これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ​ファイルを結合してくれるビルドシ... 続きを読む

Vue Language Server から生まれた Volar.js と、それが秘める可能性

2023/10/28 21 users Vue 可能性 OSS フレームワーク エディタ

Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用... 続きを読む

Vue3をアゲアゲ↑↑する記事 - Qiita

2023/08/26 40 users Vue Qiita script setup エンジニア 感謝

はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く... 続きを読む

Webフレームワーク「Astro」とは？ 開発初心者からベテランまで注目する理由

2023/07/03 15 users astro React 骨組み フレームワーク 筆者

はじめに Web制作におけるフレームワークというと、ReactやVue.jsなど、エンジニアが効率的に開発を行うために必要なシステムの骨組み、という印象がありますが、Astroは筆者のような、どちらかというとデザイン寄りの制作者でも理解しやすい設計になっており、実体験としてデザインから静的サイトの構築までを一人で完... 続きを読む

ペイトナー請求書のフロントエンドにスナップショットテストを導入した話 - Paytner Tech Blog

2023/03/02 13 users フロントエンド スナップショットテスト Jest 本稿 導入

はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドの品質改善の一つとして、最近実施したスナップショットテストの導入についてご紹介させて頂ければと思います。 この記事の対象読者 Vue.js / Nuxt.jsでJestのスナップショットテストを実装する... 続きを読む

ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog

2023/03/02 19 users figma React ANDPAD Tsukuri 実装

この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得し... 続きを読む

ruby.wasm で MySQL Parameters を作り直した - tmtms のメモ

2023/02/23 13 users MySQL うっかり ruby.wasm たび プログラム

プライベートでは基本的に誰の役にも立たないプログラムを作ってるんだけど、たまにうっかり MySQL Parameters みたいな役に立つものを作ってしまう。 MySQL Parameters は5年くらい前に Vue.js の勉強のために作ってみたんだけど、結局そのまま Vue.js は触らず放置状態だった。MySQL の新しいバージョンが出るたびにデ... 続きを読む

[Vue3/TypeScript対応] emitで理解するVue.jsの本質

2023/01/06 17 users React Vue 復習 TypeScript対応 本質

この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下の... 続きを読む

Web フロントエンドの実装において本来の機能を損なってはいけない

2022/12/25 211 users 実装 フロントエンド 本来 web 機能

2022.12.24 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方、データの取得・ルーティン... 続きを読む

Mirrativ のWebフロントエンドで使っているライブラリを紹介する！ - Mirrativ Tech Blog

2022/12/13 28 users Mirrativ React TypeScript 8割以上

こんにちは、フロントエンドエンジニア 兼 バックエンドエンジニアの駒木です。 iOS / Android / バックエンドのライブラリ紹介に引き続き、MirrativのWebフロントエンドで使用しているライブラリをご紹介します！ JSフレームワーク: React with TypeScript / Vue.js 8割以上のアプリケーションはReact + TypeScriptで実... 続きを読む

qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog

2022/10/27 156 users React Qwik ライブラリ 発明 マイクロフロントエンド

最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) にこだわって作ったライブラリです *1。 すでにいくつも良い紹介... 続きを読む

Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

2022/10/16 14 users アクセシ アクセシブル アクセシビリティ コンポーネント 知識

Vue Fes Japan Online 2022 発表資料（Web 版） 昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。 最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。 しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシ... 続きを読む

[Twitter] React ユーザーが Vue を選ばない理由

2022/09/20 165 users Twitter React ブロッカー Vue 欠点

概要 本記事は、 Vue.js コアチームメンバーである @antfu7 氏の以下ツイートに対する回答を個人的にまとめたものです。 React ユーザーの皆さん、 好奇心で聞くのですが、Vue を使ったり試したりするのを妨げているブロッカーや欠点は何ですか？ 注意事項 対立煽りっぽいタイトルにはなっていますが、個人的な好奇心が... 続きを読む

Vue.jsでWebページをつくる際の肝！「コンポーネント」をTypeScriptで活用しよう

2022/08/03 11 users TypeScript コンポーネント デフォルト 型定義 言語

本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue 3がデフォルトとなる時代のVue.js開発新常識を紹介しました。今回は、Vue.jsでWebページを作る際の構成要素となる「コンポーネント」につい... 続きを読む

クラウドサインのフロントエンドミーティングと、その勉強会で発表した話 - 弁護士ドットコム株式会社 Creators’ blog

2022/07/28 10 users Creators’ blog クラウドサイン 勉強会 篠田

こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の篠田 (@tttttt_621_s) です。 普段は Vue.js と TypeScript を使ってクラウドサインのフロントエンドの実装を担当しています。 本記事では、クラウドサインのフロントエンドミーティングと、その勉強会で実際に発表した内容を紹介いたしま... 続きを読む

月額報酬が高いプログラミング言語　3位「Vue.js」、2位「Go」、1位は？

2022/07/26 30 users 月額報酬 高いプログラミング言語 Scala VPoE ＣＴＯ

Remogu（リモグ）は、約4000件のITエンジニア向けのフルリモートワーク案件から、職種別・言語別の平均月額報酬をランキング形式で発表した。職種別の1位は「CTO/VPoE/テックリード」の93.7万円、言語別の1位は「Scala」の93.8万円となった。全案件の平均月額報酬は約73.5万円だった。 続きを読む

『Vue.js入門』の執筆者が語る、はじめてのVue.js。本腰入れる前に知りたい５つのポイント〜私のVue.jsへの想いをのせて〜 | FLEXY（フレキシー）

2022/07/11 105 users ポイン 本腰 手島拓也 フレキシー flexy

GAOGAO Ptd.Ltd.でCo-Founder CEO&ソフトウェアエンジニアを務める手島拓也（@tejitak）と申します。Vue.jsをメジャーバージョンになる前から利用しており、「Vue.js入門 基礎から実践アプリケーション開発まで」の執筆も行いました。今回はFLEXY読者の皆様に本腰入れてVue.jsを学ぶ前に知っておいていただきたいポイン... 続きを読む

万葉は Hotwire を推していきます！｜万葉｜note

2022/06/08 68 users React Hotwire ＣＴＯ 万葉 全社

こんにちは、万葉で CEO & CTO をしている田中洸一です。 Rails 7 から標準になった Hotwire を、万葉では全社をあげて推していく事にしました！ この記事では、その事について詳しく書こうと思います。 モチベーション昨今、React や Vue.js をはじめとするフロントエンド技術が目覚ましく発展しています。新しい技術の... 続きを読む

【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog

2022/05/23 167 users React ベストプラクティス Kazuya offers

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつあり... 続きを読む

オープンソースのnpmパッケージ「node-ipc」にロシア在住の開発者を標的にした悪意のあるコードがメンテナーによって追加される

2022/03/22 14 users メンテナー ウェブアプリ ベラルーシ Snyk ウクライナ侵攻

オープンソースで開発される、ウェブアプリのUI構築用JavaScriptフレームワーク「Vue.js」のコードに、ロシアとベラルーシに在住する開発者を標的とした悪意のあるコードが追加されたと、開発者向けセキュリティプラットフォームのSnykが発表しました。メンテナーの1人がロシアのウクライナ侵攻に対する抗議行為として、... 続きを読む

警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害 - Qiita

2022/03/18 19 users npm Qiita node-ipc サプラ ウクライナ侵攻

本記事は2022年3月16日に発表した弊社の英語ブログAlert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraineを日本語化した内容です。 2022年3月15日、人気の JavaScript フロントエンドフレームワーク Vue.js のユーザーは、npm のエコシステムに対するサプラ... 続きを読む

Vue 2 からVue 3 に移行完了しました！ - クラウドワークス エンジニアブログ

2022/03/02 13 users クラウドワークス 移行 エンジニアブログ Vue 3 ＡＲＴ

Vue.js ロゴ画像提供 : https://github.com/vuejs/art はじめに こんにちは、クラウドワークス ジャンヌチームの@bugfire、@okuto_oyama、@yizknnです。 ジャンヌチームはクラウドワークスの負債を管理下に置くことがミッションのチームです。 問題の大きさに合わせて、直接解決する場合や、他チームと連動したりこちら... 続きを読む

Vue.js は Reactivity Transform でさらに進化する

2022/02/13 23 users experimental ref script setup

Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要なポイントを解説したいと思います[2]。 ref の変換 今まで Composition API ... 続きを読む