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
Proposal for dropping ie11 support in Vue 3 · vuejs/rfcs · Discussion #296
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
PWA Night CONFERENCE 2022の登壇資料です。
なぜPWAなのか PWA(Progressive Web Apps)はひと言で説明するとWebがアプリのようになる技術です。 個人的にはとても魅力的な技術だと思うのですが、2015年に発表されてから今まであまり活用されていないような気がします。もちろんネイティブアプリには及ばないですが、情報がまとめてあるのが中心で少しの機能だけの場合はPWAで事足りるのではないかと思ったので作ってみました。 作ったサイトはこちら https://mdtakaoka.info まず結論から言うと、Webサイト的には成功したのではないかと僕は思います。下の画像GoogleAnalyticsの解析ですがPWAユーザ（ホーム画面に追加したユーザ）はページ/セッション、平均セッション時間、直帰率がすべてのユーザに比べて良くなりました。今回はWebサイト上にはホーム画面に追加できることを記載しなかったので、１割程度の
Vue.jsのコンポーネント間でデータを渡す方法はたくさんありますが、Propsを使うかSlotsを使うかはニーズによります。Slotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて紹介します。 The Difference Between Props, Slots and Scoped Slots in Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Vue.jsのProps Vue.jsのSlots 名前付きSlotsとの違い スコープ付きSlotsとの違い 終わりに はじめに 私はVue.jsを使い始めた時は、コンポーネント間のデータをPropsを介して渡していましたが、使い続けていくと、Slotsでも同じ結果を得られ
Vue.jsに関する勉強会「Roppongi.vue #2」が2019年7月31日に開催されました。Vue.jsをさまざまな角度から掘り下げ、知見をシェアします。トークセッション 「最近のフロントエンドぶっちゃけどうっすか？」に登壇したのは、フロントエンドエンジニアで活躍するpotato4d氏とkahirokunn氏。昨今のフロントエンド界隈事情をディスカッションします。 gRPC-webは伸びしろがある tadano：Q3.「みんなにもっと知ってほしい知識や、積極的に広めたいモノはありますか？」。 potato4d：それこそ今の話ですが、gRPC-webは伸びしろがあると思っています。あと、異なる言語間で通信できるというところで、IDLという概念がこれから重要になってくると思っています。BFF層も、これから過労死するぐらい使われていくことになると思う。 例えばBFF層がTypeScrip
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
Vue.js研修資料 - Qiita
Googleトレンドのトピックの推移 Vue.jsのメリット 学習コストが低い 公式ドキュメントがしっかりしている 日本語ドキュメントが多い 軽量なフレームワークである 基本機能に絞ることで簡単に作れる DOM操作を自動的に行ってくれる 小中規模のWebサイトを作るのに向いている SPA（Single Page Application）開発につよい 簡単かつシンプルで日本語ドキュメントもある！！→社内システムを作るのにちょうどいい Vueの勉強の仕方 公式サイト:https://jp.vuejs.org/index.html 勉強を始める前になぜ Vue.jsの動画を見ると感覚的に理解できる 有名な本 amazon:https://www.amazon.co.jp/s?k=vue&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&ref=nb_
We are happy to announce that Vue 2.7 is now in beta. Despite Vue 3 now being the default version, we understand that there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, we have backported some of the most important features from Vue 3 so that Vue 2 users can benefit from them as
GitHub - vuejs/petite-vue: 6kb subset of Vue optimized for progressive enhancement
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
Amplify FrameworkでVueプロジェクトを爆速でデプロイしてみる。 | DevelopersIO
モチベーション 普段はAndroidアプリ開発をやってます。最近はPWAやらTWAやらAndroid界隈もWebの話をちょこちょこききますよね、やってみようと思って、React,Vue,Angulerのチュートリアルをやってlocalhostで試すところまではささっとできると思います。 localhostでPCブラウザで確認するだけでなく、実際にAndroid,iPhoneの実機で試してみたい。同じネットワークに繋いでローカルIPで接続したらみれるけど、やっぱり公開した実際の本番環境に近い形で確認したいですよね。 全然AWSのこと詳しくありませんが、Amplify Frameworkを使うといい感じにAWS構築をやってくれるみたいです。とりあえず試してみよう。 Amplify Framework Amplify Frameworkは、スケールするモバイルアプリケーションおよびウェブアプリケ
TL;DR: Vue 3 is now the new default version as of Monday, February 7, 2022! Make sure to read the Potential Required Actions section to see if you need to make certain changes before the switch to avoid breakage. From a Library to a Framework When Vue first started, it was just a runtime library. Over the years, it has evolved into a framework that encompasses many sub projects: The core library,
GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
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
We are excited to announce the release of Vue.js 3.2 "Quintessential Quintuplets"! This release includes many significant new features and performance improvements, and contains no breaking changes. New SFC Features #Two new features for Single File Components (SFCs, aka .vue files) have graduated from experimental status and are now considered stable: <script setup> is a compile-time syntactic su
「Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です。 →【かんたん30秒】無料登録で転職相談する ▲イベント登壇時の写真 これまで本業の傍ら、フロントエンドの副業を複数受けてきました。今回はその経験から得られたものや、これから副業を検討される方に向けての注意点を紹介します。 まず私が副業を始めた理由は2つ。家賃を副業の収入でまかなえるようにすることと、本業では経験できないことに挑戦してスキルアップを図りたいと思ってのことでした。 副業を始めようと思った当時、私はクライアントワークをメインとしているWeb制作会社に所属していました。クライアントワーク自体は楽しかったのですが、納品して終わりという業務を
今年2019年も去年と同じような感じであれですが、2019 年の Vue.js における状況、そして大きい出来事をまとめつつ、Vue.js アドベンドカレンダの最後を締めくくりたいと思います。 Vue.js の状況今年も The State of Javascript から JavaScript 周りのアンケート調査の結果が出されました。 2019 年の Vue.js に対する満足度状況としては以下のような結果になっています。 Vue.js の満足度ですが、「使ったことがありまた使いたい」という結果は、2018 年は 20.8% だったのに対して、2019 年は 40.5 % という数値結果になっています。2019 年も前年 2018 年と同様に Vue.js に対する認知と利用ユーザーが伸びていることが分かると思います。 Vue.js 3.0 に向けた RFCs が公開された2019年1
最近Nuxt.jsでWebアプリを作ってるけど、 度重なる改修でVueコンポーネントが乱立。。 使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。 スクリプトはこんな感じ #!/bin/bash # vueコンポーネントの一覧を取得 FILES=`find components -name "*.vue"` for i in $FILES; do # 全体からコンポーネントをインクルードしている行の数を取得 NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"` # ファイル名と見つけた件数を表示 echo "** ${NUM}: ${i}" # grepした結果を表示(確認用) grep -r "$i" * echo "" done ** 1: components/Hero.vue pages/index.vue:im
Vue3アップグレード要点解説①：移行ビルド導入前にやるべき7つの作業 - LAPRAS Tech Blog
こんにちは、LAPRASの業務委託エンジニアのしんです。 先日弊社のプロダクト（LAPRAS と LAPRAS SCOUT）のVue3アップデートがついに完了しました🎉 中〜大規模プロダクトのVue3移行を（開発を止めずに）2回行ったことで様々な学びがありましたので、連載記事の形でVue3移行について解説していきたいと思います。 移行ビルドを用いたVue3移行は大まかに、 移行ビルドの導入前の準備 移行ビルドの導入 & 削除 のフェーズに分けることができます。 第1回目の本記事ではまず「移行ビルド導入前の準備」についてまとめていきます！ 移行ビルド導入前にしたほうがいいこと 一度移行ビルドを入れてしまうと、完全に動く状態になるまでmain ブランチへマージできません。 移行ビルド導入のPRは非常に巨大になり工数もかかるため、導入前にできる作業は全て先にやっておくのが吉です（参考までに、3
Vue2 Vue3 マイグレーション 令和最新 最強
Vue2 Vue3 マイグレーション 令和最新 最強
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
PRPLパターンで「ロリポップ！」「ヘテムル」のWordPressを爆速にしよう - Pepabo Tech Portal
リモートワークを長期的に続けるには、何かと工夫が必要だなと感じていて、ずっと筋トレ不足を解消したいと考えていました。昨日、懸垂バーを買ったらネジが一本しか入ってなくて、全く使えない鉄屑を前にネジが一式送られてくるのをまだかと待ちわびているlinyowsです。みなさん元気にお過ごしですか？ 今日は、「GitHub Actionsで「ロリポップ！」「ヘテムル」をもっと便利に使おう」の記事の続編？にあたる、ブログやサイトを作る上で欠かせないWordPressを、低コストに爆速にする方法をご紹介します。少し、難易度は上がるかもしれません。 WordPressは、利用方法の一つとしてレンタルサーバーに設置して使います。レンタルサーバーは、サーバーリソースを利用者と共有することで安価になるのですが、リソースを共有している以上、パフォーマンスに優れているわけではありません。Googleは、マルチデバイス
(株) ライトコードでWebエンジニアをやっている宮田です！ 前回は、v-bind、v-model、v-on ディレクティブを使って、どんなことができるのか見てきました。 今回も、引き続き、ディレクティブを使ったプログラムをみていきましょう！
Vue & Vite Rustify
プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production
GitHub - antfu-collective/vitesse-webext: ⚡️ WebExtension Vite Starter Template
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 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1) | Vue Mastery
Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1) The Vue team has recently released the highly anticipated migration build for Vue 3. If you’ve been thinking about upgrading your Vue 2 app to Vue 3, this is what you need. The process of upgrading an app to the latest version of the framework can be a daunting task. This article series is created to make that process easier. The Vue
Vue 3 に向けて Composition API を導入した話 - MicroAd Developers Blog
システム開発本部アプリケーションエンジニアの Edy です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 その Vue.js ですが、「Vue 3 is now in RC! (Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub)」が公開され、version 3 ( Vue 3 ) が盛り上がりを見せています。 今回は、Vue 2 から 3 へ移行する理由と、 2 から 3 へ version up するために行なっている Composition API の導入 についてお話していこうと思います。 そもそも Vue.js とは ? SFC TypeScript Vue 2 の限界 大規模なプロジェクトになるほど開発効率が落ちる ロジックの再利用にかかるコストが大きい 単
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
Lets start TypeScript ~Vue3 + Express で TypeScript 入門してみよう~
Today we are happy to announce that Vue 2.7 "Naruto" has been released! Despite Vue 3 now being the default version, we understand that there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, we have backported some of the most important features from Vue 3 so that Vue 2 users can ben
RSocket With Spring Boot + Vue.js アプリケーション - OPTiM TECH BLOG
こんにちは、プラットフォーム事業部 DXユニットの高橋（@yukey1031）です。 先日開催されたOPTiM TECH NIGHT｜Webアプリケーション/APIサーバフレームワークを語るLT大会で 「WebFluxでリアクティブなWebAPIのデモ」といった話をさせて頂きましたが、続けてこの記事ではSpring Boot2.2でサポートされたRSocketについてサンプルを交えつつ触れてみたいと思います。 optim.connpass.com マイクロサービスな現場でのAPI開発 以前の記事でも触れているようにオプティムが提供するAI・IoTプラットフォーム Cloud IoT OSは、マイクロサービスアーキテクチャで構成されており、周辺エコシステムの開発においてもマイクロサービスが前提となります。 マイクロサービスの連携には一般的にWebAPIが利用され、RESTful API、Gr
TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した - BASEプロダクトチームブログ
BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では社内用コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されていましたが、TypeScript Compiler API と社内のフロントエンドエンジニアの有志たちのおかげで Storybook のバージョンを最新の v6.3 にする対応が完了しました。 以前執筆した「Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える」 という記事で、Storybook v5 から v6 の書き方である Component Story Format(CSF) への変更手順を確認しました。 この記事では、TypeScript Compiler API を
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
Nuxt.js の既存プロジェクトの型チェックを厳格化した話 ～vue-tsc と tsconfig/strictest 導入までの道のり～ - ANDPAD Tech Blog
ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなものも少しずつ増えてきました。 そういった状況を改善するアプローチの1つとして、Nuxt.js の既存リポジトリにおける型チェックのルールをより厳しい設定に変更する、という取り組みを2ヶ月ほどかけて行いました。 今回はその取り組みにおける道のりを振り返って、苦労したことや良かったことなどを書いてみたいと思います。 導入を決めるまでの流れ きっかけは noUncheckedIndexedAccess を知ったことから 弊社のSlackにはtimes文化
UI components powered by Finite State MachinesA collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js
Vue with Vite
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
2019年10月12日（土）に開催予定のVue Fes Japan 2019について、台風19号の接近に伴う対応をご案内します。 はじめにVue Fes Japan 2019は、スタッフ、スポンサーも合わせて1,400名以上の来場を見込んでいる大型カンファレンスです。海外スピーカーの渡航・宿泊費をはじめ、ランチやアフターパーティー、印刷、同時通訳、各種運営など、すでにキャンセルできない多額の費用が発生しています。 そこで仮に中止となった場合に発生済みの費用を補償するため、Vue Fes Japan 2019では興行中止保険に加入しています。今回加入している保険は、悪天候ならびに交通機関のマヒが発生した場合、一部費用を補償する契約内容です。 開催判断当日6:30に、気象状況ならびに交通機関の運行状況などにより開催が不可能と主催者側が判断した場合、公式Webサイトならびに公式Twitterで開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
イベントの情報サイトをPWAで作ってみた【Nuxt.js】 - Qiita
Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説
「開発はVue.jsでしたいけど、TypeScriptを入れたい問題」をどうするか フロントエンド開発のお悩み相談
Vue / Vite 関連ライブラリー名の読み方 2024
Vue 2.7 is Now in Beta | The Vue Point
Vue 3 as the New Default | The Vue Point
入社3ヶ月目のデザイナーから見たLayerXのデザインプロセス - LayerX エンジニアブログ
Vue 3.2 Released! | The Vue Point
Vue.js を使った副業のリアル。スタートアップでの働き方と注意点 | Offers Magazine
Vue.js 2019年 締めくくり｜kazupon
Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト - Qiita
【第3回】Vue.js 入門 〜ディレクティブ編〜 – 株式会社ライトコード
巨大化したSPAのフレームワークを少しづつVueに移行しはじめたお話
Vue2のプロジェクトをVue3へマイグレーションする
【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門 | アールエフェクト
Vue 2.7 "Naruto" Released | The Vue Point
正式リリース前に総予習!! Vue3の変更点まとめ - Qiita
Vue.jsでカテゴリー分けされた画像リストを実装
Zag - Rapidly build UI components without sweating over the logic. - Zag
台風に伴うVue Fes Japan 2019開催対応について｜沖 良矢｜世路庵