【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
こんにちは。AWS事業本部のKyoです。 簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の１つに上がってきます。 Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ？」そんなイメージをお持ちの方も多いのではないでしょうか。 今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。 また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。 具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。 Amplify is 何？ まず、言葉を整理しましょう。
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
「Vue 3」は、JavaScriptフレームワークVue.jsの次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。Vue 3で導入される新機能のうち、前回は新しいコンポーネント記述形式「Composition API」を紹介しました。今回は、それ以外の主な新機能を説明していきます。 はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
【React/Vue.js】UIコンポーネントのProps設計と具体的な作り方 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、UI コンポーネントの Props 設計について紹介します。 コンポーネントを初めて作る方や作り慣れていない方は、どのような Props 設計にすれば、汎用的にできるのか、どこまで Props に持たせるべきか悩んだことがあるのではないでしょうか。本記事では、具体的な実装例を元に解説していきますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、UI コンポーネントの Props 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
Vue.jsの日本最大級カンファレンス「Vue Fes Japan Online 2022」、10/16にYouTube Live上で開催 日本最大級のVue.jsカンファレンスであるVue Fes Japan Online 2022が、10月16日（日）にオンラインにて開催されます。 本カンファレンスでは、セッションやライトニングトーク、さらには様々な企画が開催されます。今回はYouTube Liveでの開催なので、ぜひ気軽にご参加ください。 キーノート キーノート（基調講演）には、Vue.jsの開発者であるEvan Youがライブ配信にて登壇します。キーノート後には、Evan Youが質問に答えてくれる「Evan Youに聞こう」という企画も用意されています。直接質問できる貴重な機会ですので、Evan Youに質問してみたいことがある方は、ぜひ#vuefes_qaのハッシュタグをつけて
Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの
STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate
2023 年 1 月 26 日追記 Reactivity Transform は Vue 3.4 でコアから削除されることになりました。 https://twitter.com/danielkelly_io/status/1618256962776600576 ただ完全になくなる訳ではなく、Vue Macros という Vue 向けマクロ集のパッケージが引き継ぐようです。 https://twitter.com/sanxiaozhizi/status/1618290614306746371 Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要
Vue と Jest で Unit test を始めよう 保守性の高いコードが書けていますか？ VueのComponent構成 ~ Unit test までの流れを書いています。 Unit testがあると、保守しながら長くメンテナンスしていけるコードになるので、 開発の助力になればと思います。 本題の前に Vue とは オープンソースのJavaScriptフレームワークであり、 フロント系では、3大フレームワークと言われ、わかりやすい構文の為人気があります。 Jest とは JavaScriptのUnit testのためのツールです。 わかる事 Atomic Component のディレクトリ構成 (atoms) atomsのComponentのUnit test 触れないこと Vue, Jest の基本的な構文 Atomic Component のディレクトリ構成 Unit testす
はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経緯 最近Vue.jsの基礎を勉強したので自主4連休中に、Techpitで販売されているVue.js/Vuexを使ってTrello風アプリを作成しよう！を買ってサンプルア
Vueユーザーが感じたSvelteのおもしろい機能を紹介する - SMARTCAMP Engineer Blog
スマートキャンプでエンジニアをしている瀧川です！ 2月に育休を取得し、3月に復帰したと思ったらコロナでリモートワーク、そしてチーム異動となかなか落ち着かない今日このごろ。 みなさんいかがお過ごしでしょうか？ 今回家にいる時間が多くなり、せっかくだから新しいことしたいよなーということで、以前から気になっていた Svelteを触ることにしました！ Svelteの紹介記事では、「Vue.jsと構文が似ているため習熟が簡単」「Vue.jsの50倍早い」みたいなところにフォーカスされることが多いかなと思いますが、本記事ではSvelteのTutorialをやるなかで、フレームワーク(ライブラリ)の機能として普段Vue.jsを利用している私がおもしろいなーと思ったものをご紹介したいと思います。 Svelteとは 基本文法 特徴的な機能 propsやclassの省略記法 Await Block React
GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
とても簡単にドラッグアンドドロップが実現できる Vue-draggable を使ってみた ｜ Developers.IO
西田@大阪です 以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Vue.js でドラックドロップでリストを入れ替えることができる Vue-draggable を使ってみました SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js プロジェクトの作成 Vue.jsのプロジェクトを作成します。今回は今流行りの TypeScript を選びました $ vue create vue-draggable-sample ? Please pick a preset: Manually select features ? Check the features needed for your project: TS ? Use class-s
Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
を追記すれば準備完了です。 改変元のソースを用意する 新しい書き方を学ぶには 既存コードの改変がとっつきやすいです。 お決まりの Todo アプリで行きます。まずはテンプレートを用意しましょう。 きみは今まで作った Todo アプリの数をおぼえているか。 <script> export default { data:() => ({ todoList: [], tempTodoName: '', taskId: 0 }), computed: { itemCount() { return this.todoList.length } }, methods: { updateTaskName(name) { this.tempTodoName = name }, addTodoItem() { this.todoList = [ ...this.todoList, { id: this.ta
20卒未経験エンジニアが研修でVue.jsに自信を持った話 - SMARTCAMP Engineer Blog
スマートキャンプの20卒エンジニアの高砂です！ 新卒入社後、スマートキャンプでは2週間の全体研修と1ヶ月のエンジニア研修に参加しました。 本記事では、後者のエンジニア研修について紹介させて頂きます！ 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること OJTではない分、目指すレベルは高く 研修内容 1ヶ月でAsanaを再現 実際の開発結果 研修による成長 Vue.jsでの開発に自信が持てるように 質問・相談の質が向上 研修を踏まえて今後どうするか 習得した技術を中心に事業へ貢献 質問・相談はより具体的に その機能の将来を考えて設計・開発 最後に 宣伝 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること ベンチャーでは「OJTで学んでいく」というのも一般的です。 しかし私の場合は先輩社員と相談した結果、研修中はメンタリングをして貰いながら実務とは直結し
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
I created the exact same app in React and Vue. Here are the differences. [2019 Edition]
Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence — the grass in this scenario being React. Note: there is a new version of this article that can be found here: https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition I’d read the React docs and watched a few
![I created the exact same app in React and Vue. Here are the differences. [2019 Edition]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a229f2668ed6825521466698ba6ff56beed1178d/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AfiKg1ve_EvCP5FIImxXNGQ.png)
開発部の横溝です。 昨年、弊社ANDPADの機能「施工管理」をNuxt化するプロジェクトが始動し、停止しました。 「停止」というと残念な感じがするので、充電期間に入ったと言い直しておきます。 「Nuxt化するプロジェクト」とは？ 背景 改めて、この記事について Nuxt化が始動して、停止した話 まず、エンジニアがそれを「やりたかった」 Nuxt化のはじまり 停止 いま、Nuxt化のリポジトリはどうなっているか プロジェクトの恩恵 残された課題 さいごに 追記(2021.03.12) 「Nuxt化するプロジェクト」とは？ 2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。 前述の「施工管理」は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRuby on Rails（slimテンプレート）+ AngularJSを利用しています。それを、
仕事に役立つ調査データ： 消費者の傾向、若者の価値観、働き方の変化――このコーナーでは、ビジネスパーソンの働き方や企業の戦略立案に役立つようなさまざまな調査データを紹介していく。 リモートワーク求人に特化したITフリーランスエージェントのRemogu（リモグ）は、約4000件のITエンジニア向けのフルリモートワーク案件から、職種別・言語別の平均月額報酬をランキング形式で発表した。職種別の1位は「CTO/VPoE/テックリード」の93.7万円、言語別の1位は「Scala」の93.8万円となった。全案件の平均月額報酬は約73.5万円だった。
*Nuxt.js 3で使う場合、一部のUIフレームワークは外部ライブラリが必要 結論 なんでもいい、早めに成果物をみたい：Quasar Element+ レスポンシブサイトを構築したい：Quasar 高度なカスタマイズができるUIフレームワークを使いたい：TailwindCSS PrimeVue スマートフォンサイトだけを構築したい：Vant IOS、Android、EXEアプリを作りたい：Quasar 補足 Vuetify 3はリリースしたばかりなので、結論に含まれていません クロスプラットフォームについて本記事は特に話しません SEOに気になれば、Nuxt.jsがおすすめです。SPAアプリは生まれた時からSEOに弱いです 🔰 学習の初心者へ： Vuetify 2がおすすめです。参考資料が多くて、Vuetify 2の場合は公式サイトで日本語のドキュメントもありますので、勉強しやすいと思
Vue.jsを使ってメンテナンスツールを作ってみた - MicroAd Developers Blog
ご無沙汰しております。 マイクロアドでアプリケーションエンジニアをしているNです。 約1年前「JavaScriptフレームワーク（Vue.js）を導入して」というタイトルでブログを執筆させていただきました。 その時、 興味を示して頂き何らかの反応をいただければ、きっと別の社員がもう一歩踏み込んだVue.jsのお話を書いてくれるんじゃないかと期待しています。 と書いたっきり誰も続いてくれなかったので1年越しではありますが、責任持ってアプリケーションエンジニアの N 動きます。 社内メンテナンスツールをつくってみた 最近WEB開発してないんです。 実は去年の4月ころからだいたいバッチしか作らないチームのリーダーにさせていただきまして、それからずっと趣味以外でWEB開発をしてません。 （実は前回のブログを書いた時にはもう。。。） でもWEB開発したい！JS書きたい。。。 そうだ！バッチのメンテナ
Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部のMA（マーケティングオートメーション）アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤（@snagasawa_）です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。 この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0への
はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方 | DevelopersIO
Vue.jsでローディングを表示 Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。 Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。 使い方 まずはVueプロジェクトが作成済みの前提で進めます。 以下のコマンドでインストールします。 $ yarn add vue-loading-template あとは表示したいViewでモジュールをインポートして使います。 <template> <div class="container"> // 使用 <vue-loading type="spi
Vue.js(SPA)でhead要素のtitleとdescriptionはページ別に設定しよう【SEO対策】 - かとのぼのマイコード・マイライフ
Vue.js(SPA)でサイトを作るときは、head要素をページごとにちゃんと設定しないと、グーグルの検索画面になかなか載らないため、対策が必要です。 SPAでサイトを作るとhead要素がページごと変化しない問題 Vue.jsでhead要素titleとdescriptionの変更する方法 規模が小さいサイトなら、各ページmounted SPAでサイトを作るとhead要素がページごと変化しない問題 SPA（シングル・ページ・アプリケーション）は、その名前の通り、一つのHTMLのページで、まるで色々なページに切り替わっているように見せる技術です。ページの遷移も早く、作りやすいです。 しかし、実際はページが切り替わっていないため、別のページに移動しても、何も設定をしないとhead要素は変わらないままです。 これがとても問題で、ページごとにhead要素が変わるように対策をしないとグーグルの検索にな
技術について思っている印象とかを、定期的にまとめておくとあとで見直したときに良い振り返りになるかもしれないなと思ったのでまとめておく。 上記の目的でやるので思い切り主観で書く。 Vue について思うこと composition-api がとてもいい。 composition-api で頑張るなら React 使えよみたいな意見を耳にしたことがあるが、Vue の良いところは、template と style が JS と別個で動くというところだと思っているので、composition-api の前身である Option API が改善したところで、React と比較してどうこうみたいな見解の変化はない。 Vue を使っている限りは、基本的には CSS in JS 戦争に巻き込まれないので平和。 Vue3 をまださほどキャッチアップしていないので適当な意見になるが、SFC の書き方自体が結構変
![[ポエム]VueとReactとCSSについて思うこと2021/1月版](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5b1a7d33962fdef07ef6cb7b48fb4f1fd91dbdf/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14GjOZkrZMgKwcEyykl5_iULVEVkUUJd793r9_z8DF4s%3Ds250-c)
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
TL;DR v3は独自テンプレートのコンパイル時に、差分検知の最適化を行っている 「静的要素の巻き上げ」と「パッチフラグ」による最適化 この最適化によって、レンダリングと差分検知処理の速度がv2より100%向上している JSXの場合は最適化されないため、独自テンプレートが推奨される レンダリング関数とは Vue.jsは、記法がJSXか独自テンプレートかに関わらず、最終的にVue.jsのレンダリング関数に変換されます。これはReactなど他の仮想DOMフレームワークも同じです。 例えばこのようなJSXテンプレートは、以下のように変換されます。
本エントリは2021年8月30日に開催されたNode学園 37時限目 オンラインにて、「Vue 2で大きなデータを扱うときの性能改善手法」というタイトルで発表させていただいた内容をテックブログ記事化したものです。発表当日の様子はYouTubeにアーカイブで公開されておりますので、そちらも合わせてご覧いただけましたら幸いです。 はじめにストックマークでは、法人ユーザー向けに「Astrategy」というウェブサービスを開発・提供しています。Astartegyの詳細や技術的な全体構成についてはAstrategyを支える技術: gRPC, Elasticsearch, Cloud TPU, Fargate… SaaS型AIサービスの内側の世界というエントリで紹介しておりますのでそちらを参照いただくとして、本エントリではAstrategyのフロントエンドを構築する上で重要である性能改善手法について紹
はじめに こんにちは、レストランボード（以下、RB）のフロントエンドチームの石亀です。担当していた規模の大きめなプロジェクトでVueを結構触っていまして、設計含め困難と向き合いながら色々取り組ませてもらったのでそれをナレッジとして残そうと思い記事を書くことになりました。エモいですね。 RBは現在自社のフレームワークで構築されていて、徐々にVueでリプレイスをかけています。 今回、大規模なプロジェクトにてVueでさらなるリプレイスを実行しましたが、プロダクト自体がとても大きく且つ限られたリソースの中でいかに負債化させずにできるだけ安全に移行させるかを検討しました。 そこで実際に実施した施策や検討内容などを紹介します。 おそらく、多くのサービスやプロダクトで既存のコードを新しいライブラリ・フレームワークで書き換えているかと思います。 背景だったり関わる規模・コンテキストが異なるとは思いますが、
eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ
フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く頭を悩まされている方もいるのではないでしょうか、BASE もそうです。 この記事では ESLint とその Vue.js 向けプラグインの eslint-plugin-vue を利用した、deprecated となる機能へのアプローチを紹介します。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグインとして eslint-plugin-vue が開発されていて、BASE でもこれを利用しています。 このプラグインには vue/no-deprecated- で始まるルールがい
大規模アプリのVue3アップデート対応知見まとめ
はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない
はじめに インターンでお世話になっている、コウゲと申します。現在担当させていただいている仕事は業務で使用している管理画面のマイクロサービス化です。 マイクロサービス間をつなぐ認証機能が必要だったので、認証プラットフォームとして使いやすそうな 「Auth0」で どんなことができるのか、実現したいことは可能なのかを検証してみることになりました。 なぜAuth0なのか ダッシュボードの設定 + 少ないコード で認証機能が簡単に実装できる。 Auth0専用ライブラリやSDKが多数存在し、目的に応じてそれを利用することで 簡単にログイン機能を実装することができる。 実現したいこと 発表 ありがたいことに、調べた結果を社内で発表する場を設けていただきました。 ブログの内容より少し詳しく書いています。読んだら即実装できるようなスライドを心がけて作りました! speakerdeck.c
Django REST framework + Vue.js「SEIYU風のECサイトを作りましょう」全6回（予定） - Qiita
前書き 本記事はまだ連載中、更新頻度は大体週に一回(多分)、忙しさ次第 コンテンツ紹介 バックエンドはDjango (Django REST framework) + 管理システムはXadmin フロントエンドは Vue.js + Vue Router + Vuex 動作確認リンク 読んで欲しい人 Python大好き Pythonの基礎的な文法を把握しています Pythonでウェブサービスを作りたい Djangoの環境構築をしたことがある Vue.jsに興味がある Vue.js のCLIでプロジェクトを作ったことがある 環境説明 PyCharm
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
React における XSS｜React と Vue に関する XSS アンチパターン
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
Vue.jsの日本最大級カンファレンス「Vue Fes Japan Online 2022」、10/16にYouTube Live上で開催 | gihyo.jp
Vue Language Server から生まれた Volar.js と、それが秘める可能性
Vue.js「コンポーネント」入門 - Qiita
Vue に stale-while-revalidate がやってくる - STORES Product Blog
Vue.js は Reactivity Transform でさらに進化する
Vue と Jest で Unit test を始めよう | DevelopersIO
Vue.jsのユニットテスト環境作成方法と見るべきドキュメント | DevelopersIO
Vue Function API で簡単に view と logic を分離しよう - Qiita
AngularJSからVueへの置き換えを8ヶ月やってみて得られたこと - ANDPAD Tech Blog
月額報酬が高いプログラミング言語 3位「Vue.js」、2位「Go」、1位は？
Vue3のUIフレームワーク／UIライブラリ紹介と比較 - Qiita
ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita
[ポエム]VueとReactとCSSについて思うこと2021/1月版
Vue.js から考えるアクセシビリティについて - 2019
Vue.js 3 は100%の速度向上をどう実現しているか - Qiita
Vue 2で大きなデータを扱うときの性能改善手法
「レストランボード」における大規模フロントエンドの漸進的なVueリプレイスの取り組み
Auth0を使ってSPA(Vue.js, Python)の認証機能を作ってみた - JX通信社エンジニアブログ