機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
【Vue.js入門】の執筆者が語る！ Vue.jsで押さえておきたい５つのポイント - FLEXY（フレキシー）
※本記事は2019年11月に公開された内容です。 JavaScript用のフレームワークの中でも高い採用率を誇るVue.js。そのVue.jsをこれから学び始める方は、学び方を教えてほしい、有識者の話を聞きたいと考えたことはありませんか。本記事では、「Vue.js入門 基礎から実践アプリケーション開発まで」の著者である手島拓也氏にVue.jsを学ぶ前に知っておきたいポイントを語っていただきます。Vue.jsの勉強方法や手島氏の経験を知ることができるので、ぜひご覧ください。 学ぶ前にまずはどんな案件があるか知りたい方は、FLEXYで取り扱っているVue.js案件をご覧ください。 私のエンジニア史とVue.jsに出会うまで 先日、慶應義塾大学矢上賞（起業支援）授与式で招待講演をする機会がありました。その際にも強烈に感じたのですが、Vue.jsと私のエンジニア史を切り離して語ることはできません。
Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。 今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。 選定結果から言うと、モノタロウ独自の７つの選定基準をもとに、Reactを選ぶことになりました。 背景 新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた 俯瞰して改めて選定基準を考えた 一般的な視点 モノタロウの社内事情 ７つの選定基準 選定結果 技術選定を通して得た３つの学び 背景 まず、モノタロウの現フロントエンドについてざっくり説明します。 モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。 基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
Agoraでweb会議システムを作ってみよう！ - Qiita
はじめに 最近何かとよく目にするClubhouse。そのClubhouseで使われているっぽいAgoraを今回使用し、web会議システム的なものを作ってみようという記事です。 Agoraとは Agoraは、ネイティブアプリやWebサイトにビデオ通話やライブ配信をかんたんに実装できるSDKです。 特徴 WebRTCと互換性があり、P2P通信よりも安定しています。と書いてあるように、Agoraは、WebRTC互換の技術を使用しており、通信はP2PではなくAgoraのサーバを使うそうです。 ただ、他のビデオ通話系のサービスである、ZoomやGoogle Meetなども全てサーバ経由なので、他のサービスと方式は同じようですね。 プライベートネットワークでサーバ間を繋ぐのが強みのサービスのようです。 1000 人以上の配信(双方向通話)が可能のようです。(片方向のpush型ならより多くなるのではない
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
【Vue.js】CSS Modulesで書き始めるときに見るべきTips - Qiita
<template> <div :class="$style.container"> ExampleComponent! </div> </template> CSS Modules では親コンポーネントと子コンポーネントの間でクラス名の重複を気にする必要がない1ので、Scoped CSS に比べてあまり頭を使わずに短いクラス名を付けられます。 この2つのメリットが大きいので $style. を付くことで可読性が下がったり、書きづらかったりといったことは感じられませんでした。 むしろ注意が必要なのは、 :class で複数のクラスを当てたい場合は :class="[$style.class_name_1, $style.class_name_2]" のように配列構文を用いる必要があることです2。 ポイントは3つです: 親コンポーネントと子コンポーネントの間で、クラス名の重複を気にする必要は
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】 - Qiita
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と
【Vue.js】半日でできる、ビデオチャット上で動くオリジナルゲームの開発から公開まで。 - Qiita
Vue.jsを使って簡単なゲーム開発し、完成したものをwh.imというゲームのプラットフォームに公開するまでをまとめてみました。 この記事を読めば、Vue.js未経験の方であっても数時間あればオリジナルゲームを開発・公開し、友達と遊べるようになります！ できる限りわかりやすく書いたので長くなりましたが、ぜひ最後まで読んでみてください(記事の完成に3日かかりました🙄 服装の変化を楽しんでください)。ご質問はコメントまで！ 対象読者 html / css はある程度わかる方 Vue.jsに入門したい人 ビデオチャット上でゲームを作ってみたい方 はじめに wh.im というサービスの開発している@aitaroです。Vue.jsを使い始めてかれこれ1年半になります。今でこそ wh.im を開発できるぐらいの知識がつきましたが(wh.imはVue.jsとそのフレームワークであるNuxt.jsを使っ
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
フロントエンドエンジニア１年目はコードレビューでどんな指摘を受けるのか - Qiita
社内のコードレビューで先輩から指摘いただいた事をまとめました。 主にJavascript（Vue.js）のコードです。 本記事の修正前のコードは、（Qiita用に簡略化してますが）実際に自分が書いたダメコード。 ちゃんと失敗を活かしていけよと自分へのメッセージを込めて書きます！ 筆者のスキル感 エンジニア歴（≒プログラミング歴）ちょうど１年 フロントエンドエンジニア Vue.js/Nuxt.jsで開発 凡ミス 一番指摘されると申し訳なく感じるところ。 凡ミスがマージされるとバグの温床になるので、気をつけなきゃですね・・。 デバッグの痕跡が残っている console.log('hoge') 現プロジェクトはgitのpre-commit hookを使ってをコミットしないようしてるのですが、 そこをすり抜けてデバッグコードを潜ませてしまう事があります・・。 タイポ const enviromen
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Vue.js( Nuxt.js )とFirebaseを使用してメールでのユーザー認証（ログイン認証）を作ります - Qiita
概要 今回はNuxt.jsとFirebaseを使用し、メールでのログイン認証機能を構築していきます。 普段はRailsを使用していて、Nixt.jsを使う機会があったため記録として書いて残しています。 初心者なので、色々ご教授、コメントいただけると幸いです！ 今回はログインのみです。新規登録はあとで書き直して追加するか、次の記事で書きます！ コピペでも実装していけるかと思います。 前提 前回の記事（プロジェクトの作成をしています）の続きとして書いていきますが、このページだけでも完結できるかと思います。 Node.js v10.15.3 Nuxt.js v2.8.0 1.プロジェクト作成 前回の記事はこちら。 Nuxt.jsとFirebaseでSSR×PWAのプロジェクトを作成している記事になります。 この記事では簡単にプロジェクトを作成していきます。 まずはvue-cliをインストールしま
Vue.js + Face APIで感情情報を取得する - Qiita
Microsoft AzureのFace APIを利用して感情情報を取得します。 今回はオープンソースのJavaScriptフレームワークであるVue.jsで実装してみます。 Face APIとは? Microsoft Azureの顔認識APIです。 年齢、感情、性別などの特徴を抽出することができます。 感情については、怒り、軽蔑、嫌悪感、恐怖、喜び、中立、哀しみ、驚きの 8種類を判定することができます。 詳細は以下のページに記載されています。 https://azure.microsoft.com/ja-jp/services/cognitive-services/face/ 今回は、こちらのように感情情報をコンソール上に出力します。 今回実施したこと 1.準備 (Vue.jsのプロジェクト環境構築) 2.カメラを起動し、リアルタイムの映像をvideoタグ内に表示する 3.感情分析する
Vue.jsで自動的にプラグインを読み込む - Qiita
概要 Vue.jsにおいてモジュールを作る上でpluginの仕組みを利用すると以下のような恩恵を受けることができます モジュールをimportする必要がない チーム等での作業の際にimportしたモジュール変数の名前がブレない 関数内でvueインスタンスを取り扱える このように便利なのでいつも僕は以下の画像のように大量にpluginを作ってます （本当は数倍ありますが割愛しています） しかし、このようにいっぱいpluginが増えてくるとapp.jsへ大量にVue.use(hoge)が増えますし、import文も盛り盛り増えます そこでpluginフォルダ内に置かれたindex.jsを除くjsファイルを自動的にVue.useしてくれるように実装してみました 実装 WebpackのAPIを使います plugins/index.js import Vue from 'vue' export de
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
React と Vue に関する XSS アンチパターン
Spring＋Vue.js でAPIの連携をする - Qiita
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
