Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
まちにまった Vue.js 3
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
フロントエンド連載の6記事目です。 今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。 Svelteとはなんですか？ 公式のサイトはこちらです。有志の方々が日本語翻訳のサイトを作ってくれています。たいへんありがとうございます！ Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。 特徴とReactやVue.jsなどほかとの違い公式サイトでも、コーディングする際のコード量が少ないという特徴があげられています。 詳しくはこちらのブログに書かれています。コードが多ければ作業時間とバグが増えてしまうため、コードが減らすことはこれらの問題を減らすことができるというようなことが書いてありました。またブログには具体的なコードで量の差について書いていますのでぜひ見てみてくださ
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【2. Introduction】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回はIntroduction編です。 Vue.js とは？ Vue.jsは、ユーザーインターフェース（UI）を構築するためのプログレッシブ・フレームワークです。 Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. このモノシリックなフレームワークが何を指しているかといえば、例えばAngular.jsです。モノシリ
Ionic x Vueでモバイル向けWebアプリを開発！ Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 Ionicは主にモバイルアプリ向けのオープンソースのUIツールキットのことを指しますが、IonicにはIonic Native（Cordovaを利用したネイティブサポート）、Studio（GUIソフトウェア）、Mobile DevOps（CI/CD）も含まれており Webフロントの技術（HTML/JS/CSS）を活用したモバイルアプリ開発の統合フレームワーク と言えます。 UIツールキットとしては、非常に綺麗なコンポーネントが用意されており、Webアプリの中にシンプルかつ簡単に用いることができます。 Ionicは2013年の登場から徐々にバージョンアップされており、現
Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog
スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal)
Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始 花谷拓磨氏（以下、花谷）：「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする - Qiita
就職活動をするにあたってポートフォリオを誰にでも分かりやすく伝える為に、リポジトリの説明であるREADME.mdをカッコ可愛く見せられないか試行錯誤したので共有します。 最近はGitHubで採用をしている会社さんもあるので是非分かりやすく力を入れたい所です。 リポジトリを見てくれても分からない物を丁寧に構築して確認してくれる可能性は低いです。 エンジニアを目指している人など凄いアプリを作っている人はいますが、READMEを書いていない人が多く、しっかり見てもらえているのか私はずっと気になっていたのでまとめました。 🎨 作ってみた物 以下、私のリポジトリにあるアプリのREADME.mdを一部紹介します。 それぞれ全体を見たい場合はリポジトリへ ・ ラーメンタイマー アプリの雰囲気に合わせてかっこよく可愛くしてみた。 ・ 書籍管理アプリ 緑をベースに目立ち過ぎずにアプリの仕組みを伝えたい。
個人的に超便利な Chrome 拡張を作ってみたので紹介です。 作ったもの Chikamichi（近道）という閲覧履歴・ブックマーク・タブを横断的に検索し移動できる Chrome 拡張です。 機能
【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
はじめに 今関わっているプロジェクトで7万行以上のコードを、JavaScriptからTypeScriptに移行するというのを経験しました。 移行するにあたっての準備や手順、実際にやってみて感じたことなどを共有します。 プロジェクトの概要 フルスタックWEBアプリケーション フロントエンド: JavaScript + React バックエンド: Node.js + Express.js + GraphQL なぜそもそもTypeScriptを採用しなかったのか 事前に技術選定をした際に、TypeScriptを利用するかどうかの議論はありました。 当時は以下の理由から採用しないという選択に至りました。 JavaScriptの開発に慣れていたため、TypeScript型定義=面倒というイメージが強かった 「スピードが命」と考えており、TypeScriptを使うことで開発効率が下がると思っていた プ
こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていないか不安になることがあると思います。リファクタリングをしようにも、意図しないところでUIが壊れないか心配になります。 画面表示に関わるコードを改修するたびに、ローカル環境やステージング環境で全UIコンポーネントを確認するのは難しいです。 また、ステージング環境と本番環境を並べて変更されたUIを目視で確認するのも非現実的です。 ビジュアルリグレッションテストはその名前の通り、視覚的な回帰テストを指します。改修前後のスクリーンショットの差分を検証するためのテストです。 開発に
「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
こんにちは。アーキテクトの堀内です。 前回の記事ではフロントエンドフレームワークの選定についてお話をしました。 blog.ecbeing.tech 今回は採用した Vue.js を使用して開発を進めるにあたり、つまずいた点と解決方法について話していきたいと思います。 今回やろうとしたこと アプリの WebView で商品一覧を表示、スクロールに応じて追加読込をする画面です。 ざっくりですが以下のイメージです。 テンプレートも分離したのは、View 部分だけを別管理として個別に編集できるようにしておきたかったからです。 商品一覧データは、商品単位の JSON データを配列形式で持たせています。 初期表示 事前に API で取得した商品データとテンプレートを Vue.js に指定して画面表示を行います。 今回テンプレートは、事前に HTML 上の targetID の要素に追記しています。 l
【React/Vue.js】UIコンポーネントのProps設計と具体的な作り方 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、UI コンポーネントの Props 設計について紹介します。 コンポーネントを初めて作る方や作り慣れていない方は、どのような Props 設計にすれば、汎用的にできるのか、どこまで Props に持たせるべきか悩んだことがあるのではないでしょうか。本記事では、具体的な実装例を元に解説していきますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、UI コンポーネントの Props 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
Nuxt.js + FastAPIを使ったデータエンジニアリングなデモ作り - 社内勉強会でデブサミのデモをしました - JX通信社エンジニアブログ
（今更ですが）新年あけましておめでとうございます！ JX通信社でシニア・エンジニアをしています, @shinyorke（しんよーく）と申します. 最近は週に2, 3回, ジムで10kmちょい走っています.*1 JX通信社のエンジニアチームでは, 月に一度みんなが集まる月次勉強会というイベントがあります（基本的に第2金曜日開催）*2. tech.jxpress.net ※過去の開催レポです 2020年初（かつ, 飯田橋オフィス最後*3）の勉強会は, 「普及したいことや年末年始に勉強したことなどを発表するLT大会」 ということで, 私は デブサミ2020登壇時に披露するデモアプリを披露 弊社プロダクトでも使っているFastAPI僕もやりました&Nuxt Core UI ええやで！っていう布教 （ちょっとだけ）野球選手の評価指標を紹介 という発表をさせてもらいました. このエントリーではそんな発
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 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 が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。
静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMスタック」です。JAMスタックとは何なのか、なぜJAMスタックが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JAMスタックとは JAMスタックを使用する利点 JAMスタックはなぜ人気があるのか まとめ JAMスタックの有用なリソース はじめに 最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーとVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをは
Visual Studio Code で Nuxt.js を使った Docker コンテナ内での開発 - Qiita
はじめに 以前、環境を汚さず（選ばず）Nuxtプロジェクトを作成しGitHub Pagesで公開するまでの一部始終 という記事を書きました。 その後、より簡単にNuxtの開発環境を作れないかと何回かやっているうちに、 Visual Studio Code をうまく使えばよりシンプルにできることがわかってきたので、再度まとめました。 Nuxtのバージョンが上がってプロジェクト作成時の設定が若干変わっています。 事前準備 Docker, Visual Studio Codeをインストールしておきます。 これからインストールする方は以下を参考にしてください。 Windows 10 Home に Docker for Desktop をインストールする手順 Visual Studio Code のインストール手順(Windows) ※今回は Windows 10 Home 環境で作業していますが、
GitHub - mtoukei/statbox2: 「新みやざき統計BOX」データ可視化機能のプロトタイプ
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.
新型コロナダッシュボード爆速リリースの舞台裏 〜小さく始めて大胆に変えるフロントエンドプロジェクト〜 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 JX通信社は「今起きていることを明らかにする報道機関」というミッションの元に、新型コロナリアルタイムダッシュボードを 2月16日 から提供し続けています。今回は、「新型コロナプロジェクト」の発足から現在に至るまでの、プロジェクトの進化についてご紹介します。 プロジェクト発足 そもそものプロジェクトの発足としては、2月14日の下記のツイートが発端でした。およそ 2 日でリリースしたことになります。 日本の感染者増えているので、もうそろそろ中国がやってる地域別まとめページ作っても良いのでは？https://t.co/6gSg3s16Nw pic.twitter.com/TyNeP44NbO— けろっと (@kerotto) 2020年2月14日 当時は、東京都のような自治体公式の特設サイトや、国内全体の動向をまとめたサイトはほぼありませんで
はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの
サードパーティスクリプトの極限環境向け Svelte
この記事は、 Svelte Advent Calendar 2020 - Qiita の 22 日目です。 昨今では、フロントエンドの JS を減らす圧が強くなってきています。とくに来年 4 月に導入される Core WebVital は SEO に関わるため、 マーケティング文脈でもフロントエンドの改善施策として、パフォーマンスを上げる圧が強くなっています。 Google の UX 指標「Core Web Vitals（コアウェブバイタル）」とは？LCP・FID・CLS を解説｜ ferret JavaScript よ。文明を捨て、自然に還れ。 ::ハブろぐ で、ユーザー体験を遅くするものとしてやり玉に上げられるのが、サードパーティスクリプトという、サイト外から読み込まれる第三者の script です。代表的なものが Google Tag Manager や Twitter や Face
Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる - SMARTCAMP Engineer Blog
エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne
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
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
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す
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
【Vue3に備える】実務で使うComposition APIについて考える
Svelteに入門した | フューチャー技術ブログ
Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう！ | DevelopersIO
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
【Vue.js 3.2】`<script setup>` 構文がすごくすごい
Headless UI v1.0 - Tailwind CSS
Vuex型推論・最終章 - vuex-guardian - - Qiita
新しいパッケージの開発はVue 3で作ろう Vue.jsのエコシステムを構築するには
閲覧履歴・ブックマーク・タブを横断的に検索し移動できるChrome拡張を作ってみた
SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報
7万行のJavaScriptコードをTypeScriptに移行した話 - Qiita
ビジュアルリグレッションテストを導入した話 - メドピア開発者ブログ
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
React における XSS｜React と Vue に関する XSS アンチパターン
プロダクトでVue.jsを採用しました 実践編 - ecbeing labs（イーシービーイング・ラボ）
Vue.jsの日本最大級カンファレンス「Vue Fes Japan Online 2022」、10/16にYouTube Live上で開催 | gihyo.jp
Vue Language Server から生まれた Volar.js と、それが秘める可能性
Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか
Vue.js「コンポーネント」入門 - Qiita
Vue に stale-while-revalidate がやってくる - STORES Product Blog
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
Vue.js は Reactivity Transform でさらに進化する
Vue と Jest で Unit test を始めよう | DevelopersIO
www.applelinkage.com
www.jiji.com
lens-aberration.com
www.nikkei.com
ema625.hatenadiary.com
internet.watch.impress.co.jp