スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
Vue3リリース直前！導入されるcomposition APIを使ってみよう - 虎の穴開発室ブログ
皆さんこんにちは虎の穴ラボのY.Fです。 最近のWebフロントエンド界隈の話題を追っていると、フレームワークの勢力図的にはReactとVueの2大巨塔という感じがします。 特にVueに関してはメジャーバージョンアップであるVue3のリリースが迫っている状況です。 今回のブログ記事ではVue3で導入され、既存のVueコンポーネントの書き方をがらっと変える可能性がある composition API について書いてみようと思います。 Vue3について Vue3は2020年の第1クォーターにリリースが予定されている、Vue.jsのメジャーバージョンアップです。以下のような追加、変更が見込まれています。 コードベースをTypeScriptに composition api の追加 パフォーマンスの向上 Time Slicingをサポート slotsの扱いを変更 etc... 現在はα版がリリース済
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
Vue Fes Japan 2019 サイトのソースコードを公開した - おいちゃんと呼ばれています
この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。 生成した静的ファイルを Netlify でホスティングしている。 スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。 ポイントをピックアップ Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いの
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
Lessons by WebAssembly app in production on CDN Edge Computing Service
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita
Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当
Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。 自作ポートフォリオサイト もともと1週間でVue.jsを使ったポートフォリオを作った記事をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんですね。 それで、Vueでの自作ポートフォリオサイトを１つの目標にしたんですが、想像以上に私には難しく１ヶ月くらいかかりました(^p^) あと、２回ほど心が折れました(^p^) そんな過去の私のようにVue
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Compo
運用期間20年 DMMが明かす、Vue.jsを使って長期運用サービスを改善するまで
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「長期運用サービス改善のために構築した開発環境の話」に登場したのは、koyano氏。DMMにおいて長期間運用されているサービス「DMM動画」の改善のために、Vue.jsを使って取り組んだことについて語りました。講演資料はこちら 長期運用サービス改善のために構築した開発環境の話 koyano氏：それでは始めさせていただきたいと思います。よろしくお願いします。 （会場拍手） 「長期運用サービス改善のために構築した開発環境の話」をさせていただきたいと思います。 まず自己紹介
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
社内管理画面を Vue + Go で作る - Gunosy Tech Blog
広告技術部のUTと呼ばれている @mocyuto です。 普段は広告配信のバックエンドを主に担当しています。 今回は社内管理画面を作った話をお伝えしたいと思います。 はじめに 設計 バックエンド goa 構成 フロントエンド 構成 TypeScript Vuex Atomic Design まとめ はじめに Gunosyの管理画面ではRailsが多いですが、社内用管理画面を新規で作ることになり、Vue + Go のSPA（Single Page Application）で作ることにしました。 管理画面をVueとGoで作る事例は最近増えてきていますが、弊社でもすでにこの組み合わせで実績はあり、２つ目となりました。 今回の社内向けの管理画面の作成意図としては、ABテスト反映の高速化が目的です。 今までは、リリースフローは以下のようになっていました。 配信チームとロジックチームをまたいでファイル
Laravel × Vue.js × axiosでTODOリストを作るよ！ その1 | とんよー。ブログ
はい。とてつもなくシンプルですね（笑）。 タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。 ………以上！！ …あ。バリデーションは面倒なのでナシで（汗）…。 開発環境について 本記事は下記の環境を想定して書いています。 お使いのPCの環境と異なる場合は、適宜調整してくださいませ。 macOS High Sierra ver.10.13.5 Composer – 1.6.5 npm – 5.6.0 Laravel – 5.5 Vue.js – 2.1.10 axios – 0.16.2 laravel-mix – 1.0 Laravel・Vue.js・axiosでTODOリストを構築する手順 変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。 Laravelのインストール・セットアップ Vue.jsとaxios
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス
