Vue のトランジションでゲームが作れるのでは？という提案 - Qiita
この記事は Vue.js #3 Advent Calendar 2018 の19日目の記事です。 Vue で動くものを作る 要素の動きを扱おうとする場合，CSS のみで記述すると複雑となってしまいます． Vue には要素の動きを扱う トランジション があります． Vue のドキュメントのトランジションのページを見ていただくと，いろいろと動くデモが載っています． この記事では，このトランジションを利用して，ゲームを作るときに利用できそうな動きを例示していきます． カードがめくれる動き（transition） Vue の transition を利用します この機能は基本的に 要素が現れる/消える ときの動きを扱ってくれます 作成例 カードがひっくり返る動作のデモです カードが現れる/消えるときにカードが90度回転するようにしてあげています 実装のポイント <transition> に mod
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
Storybook for Vue 入門 - Qiita
はじめに 筆者が今携わっているプロジェクトでは Vue.js（以後は Vue）が使われています。 そのプロジェクトで一度 「Storybook」 というツールを導入しようとしたことがありました。結局導入は見送ることになりましたが、その時に Storybook に良い手応えを感じたため、あらためて簡単なプロジェクトを作り Storybook を試してみました。 下記がデモです。 デモ 1（プロジェクト） デモ 2（プロジェクトの Storybook） Storybook 自体まだまだ新しいプロジェクトのため、ネット上にも情報は多くありません。この記事を読み Storybook に興味を持ってくれる人が増え、ネット上に Storybook の情報が増えていけばいいな、と思います。 この記事の対象読者 Vue を使って開発をしている人 / する予定のある人 / 興味のある人 Vue のプロジェク
Storybookがなぜ必要か？(Vue.js編) - Qiita
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。
VueJsコンポーネント化 - Qiita
はじめに 表題とおりに、VueJsはとてもすごいライブラリーですけど、VueJsだけで開発すると、まだ足りないと思います。特殊な機能を入れたい時に、別のライブラリを使わないといけないです。 その時にVueJsコンポーネント化の変換が必要になると思います。以下のサンプリングはDatepickerとSelect2ライブラリをVueJsコンポーネント化することです。 Vue Component Datepicker Datepickerライブラリー: https://jqueryui.com/datepicker/ Html Template <script type="text/x-template" id="date-picker"> <input placeholder="YYYY-MM-DD" style="width: 100%" type="text"> </script> Vue.
Announcing Storybook 3.2
Storybook is the best way to develop modern component-based UI’s in React, React Native, and now Vue. It helps engineers and designers efficiently and interactively build, browse, review, and test user interfaces. With over 12,000 stars on GitHub, 400k/mo downloads on NPM, and used by industry leaders such as Airbnb, Slack, Squarespace, and NY Times, it’s the world’s favorite open-source UI develo
Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル 近年大きな注目を集めるフレームワークとなったVue.js。その発展の裏には、開発コミュニティをストレスなく駆動させる、コミッターたちのさまざまな工夫がありました。黎明期からVue.jsを支える、コミッターの川口和也（kazupon）さんに、フレームワークを躍進させるために必要なことを聞きました。 WebアプリケーションのUI実装を簡単に行える、オープンソースのJavaScriptフレームワーク・Vue.js。利便性の高さと導入の容易さから、近年サービスに採用されるケースが増えています。 そして、Vue.jsの黎明期から、コミッターとしてフレームワークの成長を支えてきたエンジニアがいます。Vue.js日本ユーザーグループの運営に携わるkazuponこと川口和也（かわぐち・かずや／ @kazu_po
Nuxt.jsでページ内の日本語だけでWebフォントのサブセットを作成したい（静的サイトの話） - Qiita
きっかけ 「JavaScriptのイベントをたくさん見られるサイト」というWebサイトをNuxt.jsで作成した際に、明朝のWebフォントを使ったのですが、どうせ静的サイトで使う文字が決まっているわけだから容量を軽くできないかな、と思ったのがきっかけです。 フォント/形式/ツールの選定 前提として、日本語のWebフォントは控えめに言ってクソ重いので、使わないに越したことはありません。どうしても使いたいのであれば、できる限り容量を減らすよう努力する必要があります。 一番手っ取り早いのはお金を払ってFONTPLUSやTypeSquareなどのサービスを使うことです。たいていのサービスでは動的にサブセットを生成してくれるので、容量を抑えられます。最近ではGoogle Fontsにも日本語のWebフォントがあるので、こちらも有力な選択肢になるかもしれません。@font-faceのunicode-r
10分ちょっとでわかるVueコンポーネントの書き方 for Reactエンジニア - Qiita
はじめに この記事は、Makuake Product Team Advent Calendar 2018 16日目の記事です。 はじめまして。今年11月に株式会社マクアケにジョインした@ryosuke-morishigeです。 まだ、ジョインから２ヶ月未満ですが、初アドベントカレンダーや新オフィス移転(こちらは後日紹介記事があると思いますのでお楽しみに！！)などイベント目白押しで良い意味で目が回っております。 Makuakeでは、現在UIライブラリとして主にVue.jsを採用しております。以前はReactしか扱ったことのなかった私は開発参加にあたってVue.jsを学ぶ必要がありました。 というわけで、今回はReactエンジニアに送る10分ちょっとで(大体)わかるVueコンポーネントというお題目で、半ば自分の備忘録も兼ねて書かせていただきます。 想定読者 Reactはそこそこ書ける・理解して
tiptap - Vue.js向けのリッチなWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。 tiptapの使い方 通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。 文字を選択してフローティングメニューを出す機能もあります。 新しい行に入ったタイミングでツールバーを下に表示させます。 画像の挿入。ドラッグ&ドロップでできます。 文字列を選択した時にツールバーを出します。普段は隠れています。 Todoリスト。 Twitterのような @ でメンション相手を出す機能。 Markdown記法をビジュアル化し
Vue.js アプリケーションで起こる謎のエラーの原因が VSCode の拡張機能だった話 - Qiita
発端 仕事場で Vue.js を使ったアプリケーションを開発するため、環境構築を行っていた時のこと。 ドキュメントにある環境構築の手引きは、リポジトリを clone してきて、yarn でパッケージを落とし、yarn mock でモック環境が手元で走ることを確認すれば OK というもの。普通にやればミスるはずがないような環境構築で、開発担当が数名いる中、何故か自分の環境だけうまく動かない。 最初の数度は問題なく動作するのだが、何回かビルドを繰り返すと、Webpack が作った index.js で TypeError という謎の状況に。ビルドは通るのに画面が真っ白。 思わぬところでコケて混乱し、時間を浪費してしまう羽目に。 原因を探る その後、Mac で同じように環境を作ると、同じように数度ビルドしたところで同じエラーが発生することを確認。 また、元の環境で PC の再起動をかけると、問題
Vuetifyのグリッドシステムの属性について - Qiita
2020/02追記 ここの記事はVuetify1系のグリッドシステムについての属性であり、2020/02時点でのVuetifyの最新は2系です。 色々属性名等が変わって参考にならない部分が増えたはずなのでご注意ください。 一応2系のグリッドシステムについては以下にまとめなおしました。 https://qiita.com/nulltemp/items/cb93565ac81a78b04097 はじめに 仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。 https://v15.vuetifyjs.com/ja/framework/grid CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見
Vue.jsで便利なカスタムフィルターのサンプル一覧まとめ
Vue.jsのフィルターとは Vue.jsのフィルターとはテキストフォーマットなどを適用するためもの。 例えば{{ str }}がabcと表示される箇所に{{ str | capitalize }}のような記述でフィルターを記述するとAbcで値が返されるようになる。 Vue.js 2.xではフィルターはすべて自分で作成する必要がある。 Vue.js 1.x のデフォルトのフィルター Vue.js 1.x以下だと10個のデフォルトのフィルターが存在するが2.x以降では削除されているため、これらは自分で作成する必要がある。 capitalize uppercase lowercase currency pluralize json key debounce filterBy orderBy 以降にVue.jsでよく使用されるカスタムフィルターのサンプルを掲載した。 必要なものを取り入れたり、フ
VueがReactを抜かしてGitHubのスター数3位になった件（3大フレームワークの頂点） - Qiita
VueがついにGitHubプロジェクト3位に ふとGitHubのスター数が高い順を見てみたいと思い検索してみたところ、、、 !?!?!?!?!?!?!?!?!? Vueが3位になっているではありませんか。 ついに3大フレームワークの頂点に達したというのか。。。Vueよ。。。 （ちなみに筆者はAngularを書いて、Reactビギナーズガイドを積読中) Vueを書いてみよ。 以上、Vueを書いてみようというお話でした。（違う） 追記（2018/11/27） 5ヶ月前に抜いていたそうです。 情報提供ありがとうございます。 https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html おまけ 下記URLを叩くとスター順で見れます。 https://github.com/search?utf8=%E2%9C%93&q=star
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Weex Advent Calendar 2018 - Qiita
A La Carte — Vuetify.js
https://vuetifyjs.com/ja/
Animation - Vue.js Examples
https://github.com/snipcart/vue-blog-demo/blob/master/README.md
Vue.js Top 10 Open Source for the Past Month (v.Mar 2018)