Vue 3のデフォルト化に合わせて今さらVueのComposition APIを使い始めるにあたって
祝 Vue 3 デフォルト化。 これまで npm install した際やサイト上のドキュメントもすべて Vue 2 ベースのものが基本となっていましたが、これからは Vue 3 の情報が前面に出てきます。しばらくは v3.vuejs.org から構造も変わってドキュメントが見つからなかったりするかもしれないけど、各位頑張れ。 Vue 3 as the New Default | The Vue Point ということで、Vue の Composition API を使うに当たって例によってあれこれハマったので、主にその点を掘り下げながらメモを起こしていく。 ※ Vue 3 のデフォルト化はたまたまです。直前にこんなツイートしてたけど、ほんとにたまたま。 Vue 3以降盛り上がりに欠けるのはドキュメントとかライブラリのデフォルトバージョンとかの管理の問題かもなぁ。 — wtnabe, ye
Vue.jsだけで爆速に開発したい人へのヒント集 - Qiita
目的 仕事で知見がたまったので共有したい。 想定される読者 Vue.jsを普段使っているひと とにかく早く実装したいひと きれいに実装したいひと まわりにVue使いがいないけどなぜかVue案件なひと 注意事項 効果には個人差があります。 開発メンバーのスキルや納期や規模感によります。 絶対の正解はないです。 著者のレベル感 Vue.js半年ちょいぐらいのレベル感 VuexとかNuxt.jsとか知らない バックエンドが好みなのでJSは雰囲気で書いてる コードの綺麗さよりも納期を優先されるところで働いています(泣) CSSも雰囲気で書いてる Component編 Componentを分けない 必要な場合を除き、なるべく分けないで、書きましょう。 分けると親子の変数の受け渡し、メソッドを叩く処理を実装しなくてはならず、時間がかかります。 Componentを分ける 上記と、矛盾しますが、ひとつの
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」 - Qiita
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」JavaScriptVue.js どうしてもレンダリングはサーバーサイドがやっているものを変えたくない。でもフロントは変えろ。そんな要望ありますよね？ え？ありませんって？あったんですよ。 コンテンツの中身は可変なのでSSレンダリングしたいけど、APIを作ってFE側から取ってくるほどの内容でもない。その上で、レンダリングするHTMLにはVueのためのバインディングや条件式が書けない。そんな場合を想定します。 例えばアコーディオン 閉 開 こんなイメージのものを作って行こうと思います。 まずはサーバーサイドにレンダリングしてもらうHTMLです。 コード html <div id="accordion--wrapper"> <div id="accordion--component" c
Vue.jsのv-modelを正しく使う - Qiita
はじめに v-modelはVue.jsを使ってフォームを構築する際によく使う機能です。 しかし、意外ときちんと使えていない場面を見かけることが多いので仕様と間違えやすいところを簡単に整理します。 v-modelの動作 公式のリファレンスにある通り、v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスです つまり以下の二行は同じ動作をします <input v-model="searchText"> <input :value="searchText" @input="searchText = $event.target.value"> ※上記はテキストボックス <input type="text"> での例です。 公式リファレンスにあるように、チェックボックス、ラジオボタン、セレクトボックスの場合はプロパティが異なります。 表にまとめると、次のようになります。
Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ
Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。 Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。 Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成しま
2019-02時点でJestの設定で最後までハマったもの
Vue cli 3 はよいという話を以前書いたんだけど、Jest でテストできるようになるまで一つだけすごくハマったものがあって、それは Babel runtime の除外設定。 ちなみにバージョンは以下の通り。 @babel/core 7.3.3jest 24.1.0エラーはこういうもので、 Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modu
あとから@vue/cli 3 + Jest
まとめいろいろやって、結局丸一日くらいは掛かることが分かった。 気をつけるべきポイントBabel がすでに入っているなら 7系 にちゃんと上げておく@vue/cli は Webpack と一部概念が違う関係するツールが増えると当然だが検証時間は伸びる狙い大きなフレームワークが入っておらず、中途半端に JavaScript が散らかっている状態の小規模のプロジェクトがある。このうち一部のコードに対して I/O 周り（HTTPS? や localStorageアクセス）に変更を施す必要がある ことが分かった。そのため ビルドプロセスに手を入れる既存のコードをテスタブルな状態にもっていくを行う必要があると判断した。 方向すでに動いているコードは以下の状態。 jQuery ベースのコードがあるビルドプロセスを伴わない状態で Vue も採用されているテストの欲しい変更を行うコードは Vue の方。そ
Vue componentのevent handlerのテストはwrapper#triggerから
<template> <container> <button @click="handler">押して</button> </container> </template> <script> export default { methods: { handler() { // これをテストから直接呼ぶとrender済んでない可能性大 } } } </script> こんな Vue component があるとする。 端折りまくったテストコードはこんな感じに書けるんだけど、ここで handler() を直接呼んではいけない。 import Komponent from 'komponent.vue' .. describe('Komponent', () => { var wrapper function mountComponent(component) { return mount(com
Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project
2018.06.26 に #ichigayageek で話したスライドです。 https://ichigayageek.connpass.com/event/87792/
改めてVue.jsのデータの監視方法と回避方法とコンポーネント設計
まとめVue で監視していたのは data ではなく setter を通ったかどうかだった そこは Backbone.js 時代から変わってなかったArray や Object の一部を書き換える処理は setter を通らないので Vue は検知できない逆に丸ごと壊せば setter を通すことはできるしかし恐らくその場合は書き換える DOM の範囲が広がり、VirtualDOM の速さのメリットがスポイルされるコンポーネントを小さくしろというのはそういう意味でもあった参考Vue.js 2.0 の算出プロパティ周辺のコードリーディング - kitak blogInternels Vue.js 算出プロパティはどうやって動いているかArrayの変更、Objectの変更はsetterを通らないので検知できないまぁ、分かってしまえば当たり前の話なんですけど、こういう感じのコードがあると思いねぇ
Replacing jQuery With Vue.js: No Build Step Necessary — Smashing Magazine
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue
なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
実録コミット振り返り：CSS Grid Layout GeneratorをVueで作ってみる - Qiita
はじめに mizchiさんのCSS Grid Layout GeneratorをElmでクローンを作っている（記事）というのを見て、関数型すごいなあと思いつつ、中身のロジックは置いといて単に見た目同じようなものをVueで作るならどのくらいで出来るかなと興味が湧いたのでベンチマーク的に目コピを試してみました。 結果から言うとこんな感じになりました。 デモ： https://vue-grid-generator.netlify.com/ リポジトリ： https://github.com/miyaoka/grid-generator 今回記事にまとめるにあたり、特にゼロから立ち上がりの部分を見ていったらいろいろ手順とかつまづきどころとか作業見積もり感とか面白いんじゃないかなーと思うので、一個一個のコミットを拾って振り返ってみようと思います。 1stコミット [11:34] コミット：https
改めて学び直すVuex - Qiita
まえがき 以前 Vue.js用のFluxライクなライブラリVuexを試してみる という記事を書きました。2年前の記事で更新もしていなかったので改めて整理して学び直してみようと思います。今回使用するバージョンは 3.0.1 です。 Vuexとは？ VuexはVue.js用の状態管理ライブラリです。Fluxの影響を受けています。ReactだとReduxに当たります。 Fluxの考え方はFacebookのリポジトリにあるflux-conceptsが詳しいです。その中の図をお借りすると以下のような考え方になります。 1 Action → Dispatcher → Store → View のようにデータが流れていきます。Vuexでもこの考え方と同じようなデータの流れになります。 2 Vuexでのデータの流れは Actions → Mutations → State → Vue Components
SCOUTER開発者ブログ
2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー
A complete guide to forms in Vue.js - LogRocket Blog
Editor’s note: This guide to forms in Vue.js was updated on 19 January 2021. Learning to work with forms properly in our favorite frameworks is valuable, and it can save us some time and energy during development. In this tutorial, I will walk you through the process of creating, validating, and utilizing inputs from a form in a Vue.js v2.x application. To follow along with this tutorial, you will
Vue.js 2016年まとめ & 今後
Vue.js 2016年まとめ & 今後この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。 フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。 そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。 2.0 リリース！一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！ Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO 2016年9月30日今年の4
レガシー管理ページをちょっと動的にするためだけのVue.jsとPHP - Qiita
こんにちは！ 片手間JSerの者です！ レガシーPHPの方から来ました！ みんなPHPで動的な管理画面とか作りたいじゃないですか。私などは怠惰ななまけものですので、動的なページ、特にブラウザ側での動きがあるページを作るのはだるいなあ、とか思ってしまふわけですよ。 きちんと設計したアプリケーションも良いものなのですが、水は低きに流れると申しまして、Vue.jsは雑に動くコードを異常に簡単に書くこともできます。 PHPだけで片手間 スゴイ雑に、こんなページを作ってみます。これは、何かの商品の一覧と説明文を登録する画面ってことにします。 このコードの思想としては、一個づつ追加して保存すると最後に空欄ができるのでJavaScriptがなくてもコンテンツを追加するアプリケーションが実現できる！！！ って感じです。 ソースコード: https://github.com/zonuexe/katatema
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue CLI v3
ASP.NET Core アプリでVueJsを使います - Qiita
