正式リリース前に総予習!! Vue3の変更点まとめ - Qiita
8月上旬に正式リリース予定とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとにvuejs/rfc又はVue3 Documentへのリンクを貼っているので索引的に使ってもらえると嬉しいです。 この記事は以下バージョン時点の情報です。 vue-next v3.0.0-rc.5 Composition APIの追加 rfcs/0013-composition-api.md at master · vuejs/rfcs Composition API RFC | Vue Composition API おそらく一番大きな目玉となる変更はこちら。Composition APIという新しいAPIが追加されます（PluginでVue2系でも使用可能です）。 Composition APIはコンポーネントのロジックの柔軟な再構成を可能にする関数ベースのAPI群
7 Ways to Define a Component Template in Vue.js
Anthony Gore | March 24th, 2017 (Updated February 3rd, 2020) | 5 min read There are plenty of choices when it comes to defining component templates in Vue. By my count, there are at least seven different ways! In this article, we'll go through examples of each and address the pros and cons so you know which one is the best to use in any particular situation. Plain stringsThe quickest and easiest w
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita
Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
Vue.js 2.6がリリースされた - Qiita
2019/02/05にVue.js 2.6 "Macross"がリリースされました。 そのうちもっと適切な日本語訳が出ると思いますが、まだ無いので紹介してみます。 以下はVueの作者Evan Youによる記事、Vue 2.6 releasedの日本語訳です。 Vue 2.6 released Vueは昨日、5歳の誕生日(Vueniversary)を迎えました。 そして本日、素晴らしいことにVue 2.6 "Macross"の発表を行うことができました。 この一年、我々は新しいCLIと3.0のプロトタイピングに多大な時間を費やしました。 その結果、Vue2.xはしばらくメジャーアップデートを行えませんでした。 しかし今こそ、その時です。 このリリースには、以下に解説する多数の大幅な改善、内部構造の変更、そして新機能が含まれています。 詳細についてはGitHubのリリースノートも参照してくださ
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Vue + TypeScript を模索して迷走した先にあるもの - Qiita
これは 2019.01.29 スタートアップテック vol.2 の LT 資料です @zaru Vue で TypeScript を使いたい Vue は楽しいです。TypeScript も楽しいです。楽しい * 楽しいにしたいです。 現状確認および課題 Vue だけであれば VueCLI で TypeScript サポート選べば OK Vuex も TypeScript で書ける けどコンポーネントからの読み出しは恩恵を受けにくい Nuxt も v2.5 から TypeScript サポートが良くなる 初期設定なしですぐ書けるようになる Vue template 内でのサジェストが弱い… 今回の目標 とにかくサジェストされてほしい。いつでもどこでも まずは VueCLI で TypeScript / Class スタイルな設定でプロジェクトを作る $ vue create ts-proj
俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
VueComponent間で再利用可能な部品を実装するための機能がmixinです。mixinを使った共通化の例はよく見かけますし、私もしばしばやってきました。ただ、どうも自分の実装方法だと後々不便になったり見通しが悪かったりと、使い勝手の悪いものになってしまうことが多かったです。 そこで今回は自分の過去の実装例を見返しながら、なぜ失敗したのか、mixinをどうを使うべきかについて、現時点の考えをまとめてみます。 この記事で紹介する失敗例は、私が携わったプロダクト開発においてデメリットの方が大きかった実装例です。 便宜上「アンチパターン」「失敗例」といった表現をしていますが、あくまで個人的にやりたくないパターン程度の意味合いです。 失敗例1. Template Methodパターンを意識したmixin 暗黙的挙動の危うさ OverrideではなくMergeしているだけ Classの継承とmi
CSS フレームワークを Vue.js のコンポーネントにする方法 - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2018 - Qiitaの 20 日目の記事です。 この記事では Google が提供しているマテリアルデザインの CSS フレームワークであるMaterial Componentsを Vue.js のコンポーネントにしていく話を書いています。 その過程で Vue.js におけるコンポーネントを作るときの要点なども一緒に書いてます。 バージョンなど Vue.js: 2.5.21 Vue CLI: 3.2.1 Material Components: 0.42.x サンプルリポジトリhttps://github.com/mya-ake/vuepress-plugin-component-catalog/tree/master/example/material-components-web アウトライン Materi
Lighthouseを使ってVuex.jsで書いたポートフォリオサイトを爆速化する - Kekeの日記
本記事はVue.js Advent Calendar 2018の第3日目の記事です。 はじめに GCPの無料枠が終了したため、ポートフォリオサイトはクローズドしましたが、引き続き本記事はご覧いただけます。 私は以前、インターンシップなどの選考に備えて自分のポートフォリオサイトなるものを作りました。 しかし、あまりに速くデプロイしたかったことからパフォーマンスについて一切無視した結果、とてつもなく遅いサイトができてしまいました。 結局、他人に見せるには恥ずかしいサイトになってしまい、今回の記事で爆速にできればと思います。 サイトはこちらで、SEO対策やOGPも実装したので以下のように展開されます。 要約 自分のポートフォリオサイトがロードまで8秒近くかかっていたのがキャッシュ込みで0.3秒くらいになった クリティカルレンダリングパスを知ることが重要 Chrome DevToolを使い倒すとよ
TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた？ - Qiita
Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き」は健康にいいよねって誰でも言うと思うけど、実際に万人がやっているかどうかは別じゃないですか。それと同じで「テストすること」も絶対いいことだと私は思っていますが、やるかどうかはチームの置かれている状況によって決まります。この記事は、その「テストを導入するかどうか」という意思決定の一助にでもなれればいいなと思います。 はじめに こんにちは。ぼくです。 今回はVue.jsでTODOアプリを作ってみよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
