jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
みんなのVue.js
2021年2月18日紙版発売 2021年2月16日電子版発売 野田陽平，門脇恒平，山田敬美，高橋和樹，藤川淳史，韓徹 著 B5変形判／224ページ 定価2,508円（本体2,280円＋税10%） ISBN 978-4-297-11902-7 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書は，日本国内で爆発的な人気を誇るVue.jsの最新ノウハウ・アイデアを1つにまとめた新しい「Vue本」です。アプリケーション開発のためのルーティング・レンダリングから，CSS設計，状態管理，コンポーネント開発，パフォーマンス改善まで，Vue.jsをプロジェクトで使用するうえのさまざまな開発上の観点をまとめつつ，現場のエンジニアによる解決方法
PRPLパターンで「ロリポップ！」「ヘテムル」のWordPressを爆速にしよう - Pepabo Tech Portal
リモートワークを長期的に続けるには、何かと工夫が必要だなと感じていて、ずっと筋トレ不足を解消したいと考えていました。昨日、懸垂バーを買ったらネジが一本しか入ってなくて、全く使えない鉄屑を前にネジが一式送られてくるのをまだかと待ちわびているlinyowsです。みなさん元気にお過ごしですか？ 今日は、「GitHub Actionsで「ロリポップ！」「ヘテムル」をもっと便利に使おう」の記事の続編？にあたる、ブログやサイトを作る上で欠かせないWordPressを、低コストに爆速にする方法をご紹介します。少し、難易度は上がるかもしれません。 WordPressは、利用方法の一つとしてレンタルサーバーに設置して使います。レンタルサーバーは、サーバーリソースを利用者と共有することで安価になるのですが、リソースを共有している以上、パフォーマンスに優れているわけではありません。Googleは、マルチデバイス
CORS: OPTIONSリクエスト（preflight request）を避ける - Qiita
ajaxなど、ブラウザ経由でGET, POST, DELETEリクエストを投げると、実際のリクエストが走る前にOPTIONSリクエストが送信されることがあります。 一度しかリクエストを送信していなくても、実際はOPTIONSとGETなど、２回リクエストが走っています。 APIによっては、OPTIONSリクエストを受け付けないため、Response to preflight request doesn't pass access control checkのようなエラーが返ってくる場合があります。このOPTIONSリクエストはCORSプリフライト（preflight requests）と呼ばれていて、これが通らないと、実際のGET, POST, DELETEなどのリクエストは送信されません。 このプリフライト・リクエストとは何なのか、OPTIONSリクエストを回避する方法はあるのか調べてみま
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 ショ
GitHub Pages action - GitHub Marketplace
WIP, See Issue #87 GitHub Enterprise Server Support ✅️ GitHub Enterprise Server is supported above 2.22.6. Note that the GITHUB_TOKEN that is created by the runner might not inherently have push/publish privileges on GHES. You might need to create/request a technical user with write permissions to your target repository. Table of Contents Getting started Options ⭐️ Set Runner's Access Token github
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
Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う - Qiita
次のように、ボタン「A」を押すと右に入力フィールドが現われるようなものを作ったとき、たいてい、そのフィールドにフォーカスさせたくなってきます。これが難しい。 すぐに focus() しても、まだその DOM は表示されていないので、フォーカスが空振りしてしまいます。 そのようなときは、次のように $nextTick を使ってタイミングをずらすとよさそうです。 <div id="app"> <button @click="c">A</button> <input v-if="s" ref="r" /> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", data: {s: false}, methods: { c() { this.s = true this.$nextTick
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
Vue.jsで色々書き方のルールがあるようで、備忘録として実際に使ったものをここにまとめていきます。 最初は少ないですが随時追加していく予定です。 1.propsで受け取った変数の中身を表示 {{ }}を使う <template lang="html"> <div> <p>{{ message.message }}</p> <small>{{ message.user.name }}</small> </div> </template> <script> export default { props:["message"] } </script> <template lang="html"> <div> <img v-bind:src="message.user.img_path"> <!--<img :src="message.user.img_path">--> </div> </te
Vue.jsでビューの変更がされないときに疑うこと+主な解決策方法 | iret.media
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース 1.インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 2.配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 1. $setを使う 2. Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivi
Nuxt.js で簡単な画像一覧アプリを作成する - Part.1 | LuftGarden
Nuxt.js とは Nuxt.js は「ユニバーサルな Vue.js アプリケーションを構築するためのフレームワーク」です。 ユニバーサルという言葉を辞書で引くと、「すべてに共通であること」、「普遍的・一般的」という意味になります。 ここで言う「ユニバーサル」とは、「サーバサイドとクライアントサイドの違いを抽象化することで無視して、一貫した方法でUIレンダリングすること」です。 公式ドキュメント を見れば最も理解が進むと思います。 Nuxt.js はコンポーネントとルートをマッピングするための vue-router や、Vue.jsで状態管理するためのライブラリである Vuex を内包しています。 Nuxt.jsの利用シーンについて Nuxt.jsの主な機能は以下のようになっています（公式ドキュメントより引用）。 Vue ファイルで記述できること コードを自動的に分割すること サーバ
Vue.js ( Nuxt.js ) でアニメーションやってみたら最高だった話。 - Qiita
Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と
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
webpackとvue-loader v15ではまって解決した - totechite's blog
webpack4+Vue単一ファイルコンポーネント+Babelの記事を参考にしたらはまった 最新版で学ぶwebpack 4入門 - BabelでES2018環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA 結論からいうとvue-loaderのv15以上を扱う場合、以下の記述が必要だったらしい。 // webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { // ... plugins: [ new VueLoaderPlugin() ] } https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required 記事はvue-loade
Vue.jsでアプリケーションを開発するときによくある質問集 - Qiita
概要 Single Page Applicationを実装するにあたって、気になることの質問・回答集。 ここで言う「Single Page Application」とは、画面遷移（リロード）をせず、１ページ内で ajaxなどを使用してページ遷移（のような動き）を実装しているものを指します。 また、Vue.jsを使用して実装することを想定しています。 ※随時更新していきます。 FAQ Google Analyticsの測定はできるの？ 可能です。 vue-routerでURLを切り替える際に、手動でGA側にページ遷移を通知することで測定されます。 （ブラウザバックではページカウントが増えません） 任意のイベントを通知することも可能ですが、懸念点としては下記が挙げられます（未検証） GAタグ以外で、手動でページ遷移を通知する方法がない計測タグは対応できない Google Tag Manager
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://hafilog.com/vue-vee-validate
Validation Rules | VeeValidate
GitHub - logaretm/vee-validate: ✅ Painless Vue forms
Vue.js Examples
GitHub - nuxt/vue-meta: Manage HTML metadata in Vue.js components with SSR support
