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() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要
chibivue
chibivueStep by Step, from just one line of "Hello, World". powered by VitePress
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から8年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2021年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : スクロール演出の作り方 トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 20,800 PV ウェブサイトを魅力的にするスクロール演出。スクロール演出を3種類にわけ、それぞれの実装方法を解説しています。ウェブサイトを「より良く魅せたい」というニーズが大きいのか、この記事が202
AWS LambdaとNuxt.jsでServer Side Renderingする（2020年版） - Sweet Escape
サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。今回はSSRをAWSのサーバーレス、つまりAWS Lambdaでやってみたいと思います。 今回はVue.jsのフレームワークであるNuxt.jsで作ったサンプルアプリのSSRをLambdaで試してみます。 前回のブログでNuxt.jsでの例という説明をしましたが、今回はそこを実際にやっていく感じです。 なお、Nuxt.jsをLambdaで動かす場合の話って実はググってもあまり出てきません。いくつかの記事が出てくるだけです
はじめに おはようございます、加藤です。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
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
Next Generation Frontend Tooling 💡 Instant Server Start ⚡️ Lightning Fast HMR 🛠️ Rich Features 📦 Optimized Build 🔩 Universal Plugin Interface 🔑 Fully Typed APIs Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts: A dev server that serves your sour
Nuxt.js(SPA)+FirebaseのWebアプリで初マイグレーションをしてけど、いろいろ失敗した話。。 - Qiita
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を本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
20卒未経験エンジニアが研修でVue.jsに自信を持った話 - SMARTCAMP Engineer Blog
スマートキャンプの20卒エンジニアの高砂です！ 新卒入社後、スマートキャンプでは2週間の全体研修と1ヶ月のエンジニア研修に参加しました。 本記事では、後者のエンジニア研修について紹介させて頂きます！ 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること OJTではない分、目指すレベルは高く 研修内容 1ヶ月でAsanaを再現 実際の開発結果 研修による成長 Vue.jsでの開発に自信が持てるように 質問・相談の質が向上 研修を踏まえて今後どうするか 習得した技術を中心に事業へ貢献 質問・相談はより具体的に その機能の将来を考えて設計・開発 最後に 宣伝 研修目的 「一定以上のレベルで実務に貢献できる技術力」を身につけること ベンチャーでは「OJTで学んでいく」というのも一般的です。 しかし私の場合は先輩社員と相談した結果、研修中はメンタリングをして貰いながら実務とは直結し
こんにちは！LayerXバクラク事業部エンジニアの加藤 (@tatane616) です。 本記事では、私の所属するバクラク申請・経費精算チームで主に展開しているフロントエンド開発Tipsについて紹介します。 ※本記事は LayerX Tech Advent Calendar 2022 4日目の記事となります。 背景 バクラク申請・経費精算チームでは、以前「半年で3倍以上にスケールしたプロダクトチームを支える文化｜tatane｜note」で紹介させていただいたように、2022年12月時点で5名のエンジニアがいます。 LayerX では厳密に専門性で業務を縛ることは少ないです。プロダクトチームのエンジニアであれば、フロントエンドもバックエンドも（今後はおそらくアプリも）書きます。 その中には今までバックエンドやモバイルアプリを専門にやってきた方もいますが、上記引用の通り、LayerXの開発では
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog
どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + without Vuex のパターンへ書き換えを行っています。 Composition APIへ書き換える最大のメリットは、コンポーネントのロジック部分の多くを単なるJavaScript関数として切り出せるので、コンポーネントとロジックを疎結合な状態に分離でき、単体テストが恐ろしく書きやすくなるという点です。 そんなわけで、コンポーネントを一切マウントせずに書けるフロントエンドあるあるテストパターンを紹介していこうと
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)
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
開発部の横溝です。 昨年、弊社ANDPADの機能「施工管理」をNuxt化するプロジェクトが始動し、停止しました。 「停止」というと残念な感じがするので、充電期間に入ったと言い直しておきます。 「Nuxt化するプロジェクト」とは？ 背景 改めて、この記事について Nuxt化が始動して、停止した話 まず、エンジニアがそれを「やりたかった」 Nuxt化のはじまり 停止 いま、Nuxt化のリポジトリはどうなっているか プロジェクトの恩恵 残された課題 さいごに 追記(2021.03.12) 「Nuxt化するプロジェクト」とは？ 2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。 前述の「施工管理」は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRuby on Rails（slimテンプレート）+ AngularJSを利用しています。それを、
フロントエンドの技術選定
ある製品開発で管理画面を作ることになりました。その際にフロントエンドの技術に疎いプロジェクトマネージャーが技術選定から始める必要がありました。基本的に誰がやっても技術選定は難しいです。選定の成否は決めた時点では分からないからです。フロントエンドに詳しいメンバーがチームにいれば委譲したり、メンバーがなんらかの技術に精通していればその技術を選択するという考え方もあります。しかし、残念ながら、私たちのチームではそういう状況にありませんでした。そこで覚悟を決めて、分からないなら分からないなりに1から調査して技術選定を行うことにしました。 本稿では、主に次の内容について説明します。 どのように技術選定を進めたか どのような調査を行ったか 最終的にどういう視点で技術を選定したか 昔ながらのテンプレートを使ったサーバーサイドレンダリングは生き残れるか 私が引き継ぎをうけたとき、前任者がプロトタイプとして
2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 ↑私が10年以上利用している会計ソフト！ 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった頃にWordPressの勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPressでなくてもいい気がしてきていました。また、WordPressやPHPのバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsby
#SaaS_Frontend で発表した、SaaSプロダクトのKARTEの開発におけるプロダクトの国際化(i18n: Internationalization)についてです。 こちらの本にもi18nについて書いてますので、もしよろしければ眺めてみてください。 みんなのVue.js - 現場で役立つ実践ノウハウ
*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の場合は公式サイトで日本語のドキュメントもありますので、勉強しやすいと思
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
Vue.jsを使ってメンテナンスツールを作ってみた - MicroAd Developers Blog
ご無沙汰しております。 マイクロアドでアプリケーションエンジニアをしているNです。 約1年前「JavaScriptフレームワーク（Vue.js）を導入して」というタイトルでブログを執筆させていただきました。 その時、 興味を示して頂き何らかの反応をいただければ、きっと別の社員がもう一歩踏み込んだVue.jsのお話を書いてくれるんじゃないかと期待しています。 と書いたっきり誰も続いてくれなかったので1年越しではありますが、責任持ってアプリケーションエンジニアの N 動きます。 社内メンテナンスツールをつくってみた 最近WEB開発してないんです。 実は去年の4月ころからだいたいバッチしか作らないチームのリーダーにさせていただきまして、それからずっと趣味以外でWEB開発をしてません。 （実は前回のブログを書いた時にはもう。。。） でもWEB開発したい！JS書きたい。。。 そうだ！バッチのメンテナ
本書は、Web ブラウザにおける本格的な GUI の入門書です。 Web ブラウザに期待される役割は年々増してきています。 ネイティブアプリ顔負けのデザインツールや、ドラッグアンドドロップでの操作が必要なフォームを作りたくなったとして、我々は何に気をつけるべきなのでしょうか？ そうでなくとも、これまで HTML / CSS / JavaScript で実装するのが大変だった UI をどう実装するべきなのでしょうか？ この点を本書は重点的に扱います。 本書では定番のセレクトボックスやヘッダーレイアウトの他、バウンディングボックスやツリーといったドラッグを伴う UI なども実装していきます。 苦しくも楽しい、Web ブラウザの複雑 GUI の世界がここにあります。皆さんもエディタとブラウザを開きながら、足を踏み入れてみましょう。 関連ワード: GUI, 複雑GUI, SVG, React, V
zx + Datadog + GitHub Actions でフロントエンドのコードベースの健全性を可視化する
フロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。 作ったもの zx と Datadog、GitHub Actions を使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。 値はデモ用に書き換えています 現在、計測している指標はこちらです。 Vue SFCファイルにしめるTypeScriptの割合 Vue SFCファイルにしめるComposition APIの割合 strict: trueにした場合のType Errorの数（tsc & vue-tsc） Jestの各種カバレッジ 各指標は毎朝9時に更新していて、時系列での推移も確認できます。 なぜ作った？ 技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。 こ
*印が付いているものは初めてさわった技術です。はい、お恥ずかしながらすべて初物です。（普段はJavaとかJavaとかJavaとかさわってます） Vue.jsを使用したSPAで作成しています。当初はRuby on Railsで作り始めたのですが、作るWebサービスを考えるとバックエンドはフルスタックなものはいらない・むしろデータ加工したAPIを返すだけで良いんじゃ？と思い、一気に方針転換してSPAで作るように変更しました。 バックエンドフレームワークも、Flaskに変更しました。 Flaskは一般にマイクロフレームワークと呼ばれていて、1ファイルで成り立つようなくらいなモノで小さく始められます。 が、Flaskの機能自体は少ないわけではなく、ディレクトリ構成なども特に規定があるわけでもなく、自由なので初心者には結構難しいFWなのかなという感じでした。 （RailsやDjangoのように規約に
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
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
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要素が変わるように対策をしないとグーグルの検索にな
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue に stale-while-revalidate がやってくる - STORES Product Blog
Vue.js は Reactivity Transform でさらに進化する
これがフロントエンドで話題になった記事！ ICS MEDIAの2021年 - ICS MEDIA
Vue.jsのユニットテスト環境作成方法と見るべきドキュメント | DevelopersIO
HTML Centricで行きたい私たち - LIFULL Creators Blog
2023年版！エンジニア必見のチートシート集 - Qiita
Vue Function API で簡単に view と logic を分離しよう - Qiita
チーム全員がフルスタックになるためのフロントエンド開発Tips - LayerX エンジニアブログ
Vite + Tailwind CSSでペライチHTMLをマークアップする
AngularJSからVueへの置き換えを8ヶ月やってみて得られたこと - ANDPAD Tech Blog
ポートフォリオサイトをNuxt + Netlifyに移行しました
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
Vue3のUIフレームワーク／UIライブラリ紹介と比較 - Qiita
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
入門GUI ーWebブラウザで作る本格インタラクションー：複雑GUIの会
【個人開発】Qiitaの人気の記事・ユーザー・書籍を見つけられるWebサービスを作りました - Qiita
ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
DenoがJSXに対応した - No Regrets in Bathing