2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
5 Awesome Boilerplates/Templates For VueJS Projects
Are you about to begin an important Vue project? To ensure you start with a solid foundation, you might use a template (aka boilerplate, skeleton, starter, or scaffold) rather than starting from npm init or vue init. Many experienced developers have captured their wisdom about building high-quality Vue apps in the form of open source templates. These templates include optimal configuration and pro
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
The best Vue.js Frameworks 2024 - Made with Vue.js
Framework-ception! This collection of frameworks helps you kickstart your Vue projects. There's a variety of libraries within the Vue-niverse that support you with routine tasks and boilerplate code. If you think we're missing an essential entry on this list, just tell us via Twitter @MadeWithVueJS! General Frameworks Nuxt.js 54134 Nuxt is an opinionated framework that helps you create performant
スタイルガイド — Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
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系でプラグインとして利用で
フロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみる - Qiita
この記事は、Vue #2 Advent Calendar 2019 の3日目の記事です。 Advent Calendar初参加です！ 経緯 自社で開発しているサービスの機能が増えてきて、ユーザーの利便性が問われることが多くなりました。 UI改善と言っても、そのサービスのフロントエンドはjQueryで出来ており、一新しようとしてもできる範囲に限界があります。そこで、部分的にVue.jsを導入していき、段階をとってUI改善をしていく方向性となりました。 Vue.jsは他のjavascriptのフレームワークと比べても学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があります。 私も本来はサーバーサイドエンジニアですので、まずは学習から始まったのですが比較的すぐに技術を習得することが出来ました。頑張れば一日で基本の項目(Componentあたり？)まで習得できる
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使う - Qiita
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使うAngularVue.jsWebComponentsReactserver-side-rendering WebComponentsは未来の技術みたいな感じでしたが、lit-elementが登場してかなり作りやすくなりました。ただ、実際のウェブアプリケーションで使うにはどんな感じになるのかな、というのを脳内シミュレーション＆実験してみましたので、それの記録です。 この記事自体は5月ごろに書いて放置したのですが、JSConfで発表したのでそれに合わせて公開します。 本記事の想定ストーリー かっこいい部品を作りたいデザイナーさん、もしくは社内的なデザインガイドラインがある。ホストのフレームワークがなんであるかは気にしないで、とりあえずデザインを作り込みたい 管理画面は
Nuxt.js+Herokuを使って布団の温度をLINE LIFFで見る #SleepTech - Qiita
はじめに 前回、寝床内気象（布団内の温度・湿度）を測定する装置を作り、データをAmbientというサービスを使って可視化していました。 しかし、毎回 Ambient にログインしてグラフを見るのが面倒になってきたので、 以前に作成した気温に応じておすすめのおふとんを教えてくれるBOTで見れるようにしていきます。 作ったもの リッチメニューの右側をタップすると、LINE LIFF 上にグラフが表示されます。 これで手軽に布団の温度が確認できるようになった！ #protoout #sleeptech pic.twitter.com/KBNQdb1dNd — Takahiro Mitsuoka (@t_mitsuoka) November 27, 2019 アプリ構成 前の記事で温度を測定する部分を作成したので、今回は LINE で表示する部分を作っていきます。 システム構成 バックエンドは前回
メドピア開発合宿でVue.jsテストライブラリ「vue-function-tester」を作った話 - メドピア開発者ブログ
涙の数だけ強くなるフロントエンドエンジニア村上(@pipopotamasu)です。 先週の水木金とメドピア恒例の開発合宿 in 熱海に行ってきたので、そこで作ったVue.jsのテストライブラリ「vue-function-tester」を紹介したいと思います。 github.com atami vue-function-testerとは vue-function-testerは、Vue.jsの「メソッドの単体テストライブラリ」として作りました。 もっと具体的に言うと、Vue.jsのmethods, lifecycle hooks, computed, watchをテストするためのライブラリです。 ※ちなみに「vue-method-tester」にしなかったのはmethodsプロパティと被ってややこしくなるのでやめました Get started 長々と解説するよりは実際のコードをみて行きましょ
いかにして未経験から4年間でフルスタックエンジニアになったか - Qiita
TL; DR 案件ガチャで未経験分野の案件に参画し続け、使用する技術がどんどんモダンな方向に進みまくった結果としてフルスタックになることができたという話 未経験技術での仕事の話が来たときでも今できないからやらないという姿勢ではなく、積極的に挑戦することでスキルを身につけることができた フリーランスや受託の場合、フルスタックな人材であればあらゆる業務をこなすことができかなり有利だと思われる 新しい技術はプライベートに加えて業務中に学習して身につけるのがベスト。なぜなら週40時間もの時間をプログラミングに使うことができるから 未経験でもポートフォリオを自分一人で作ればフルスタックな人材になれるのではないかという話。ただし毎週20時間は必須 はじめに 先日お邪魔させていただいた交流会にて、自分が持っている技術スタックが比較的希少なものである、ということを知らされました。 自分としてはコンピュータ
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト - Qiita
最近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
いい感じのグラフを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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vuejs/vue-cli: 🛠️ webpack-based tooling for Vue.js Development
blog.md
CSS Architecture on Vue.js
