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 のものと共通している点も多いの
読みやすさを重視した Jest の書き方 - おいちゃんと呼ばれています
この記事は STORES.jp Advent Calendar 2019 - Adventar の 8日目の記事。 先日（11/26）STORES.jp 社内で Jest の勉強会を開催したので、そのときに話した内容を書く。 なお、私たち STORES.jp のフロントエンドチームが Jest Vue Test Utils Vue.js を採用しているので、それらを用いたテストコードを掲載しているが、大半の内容は上記以外のスタックを用いたテストにも当てはまるものだと思う。 アジェンダ なぜ読みやすさを重視するのか？ 読みやすくするためのヒント 書きやすくするためのヒント おまけ なぜ読みやすさを重視するのか？ さて、今回は「読みやすさ」を重視した Jest の書き方をお伝えする。なぜ「読みやすさ」を重視するのか、その背景について説明する。 よいテストとは？ まずはじめに、よいテストとは何か
Replacing Rails ERB template with Vue
I have this bizarre idea that how can we replace the Rails erb templating with vue. I think even the simplest of the sites today are data driven and want to be reactive. For people like me who are boilerplate averse. I can do this with new Rails 5.1 but with the following limitations: The naturally available @variables are not present in js files, so I have to pass them as data attributes, use Gon
How we do Vue: one year later
How we do Vue: one year later How we, at GitLab, write VueJS, one year later. It's been a while since we wrote about Vue. We've been using Vue for over a year now and life has been very good. Thanks @lnoogn for reminding me to write this article! Our situation reminds me of a quote about Scala from "Is Scala slowly dying?" Someone once said: Scala people don't have time for redditing and blogging,
Vue | GitLab
Examples When to add Vue application What are some flags signaling that you might need Vue application? Avoid multiple Vue applications on the page Vue architecture Components and Store An index.js file Bootstrapping Gotchas Providing data from HAML to JavaScript The initSimpleApp helper provide and inject props Providing Rails form fields to Vue applications Accessing the gl object Accessing abil
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
Nuxt.js 公式ドキュメントの翻訳スタイルの紹介 - おいちゃんと呼ばれています
Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワーク。Next.js は React.js をサーバーサイドレンダリングするが、こちらは Vue.js をサーバーサイドレンダリングする。もうすぐバージョン 1.0 がリリースされそう。 Nuxt.js - Universal Vue.js Applications nuxt/nuxt.js: Framework for server-rendered Vue.js applications. その Nuxt.js の公式ドキュメントの翻訳にちょうど 1週間前に着手した。 前回のエントリー で書いたように @kenchan くんさん主催の @t_wada さんを囲む会で相談などしつつ、だいたい翻訳スタイルが固まってきたので、翻訳プロジェクトの一例として参考になればと思い、紹介する。 どのように翻訳して
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
Vue.jsを実案件で使ってみて感じた、いいところとつまったところ（解決策あり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンジニアのまろCです。 実家に帰省するたびに、大体同じメンバーと再会しています。さて、年が明けてから時間が経ってしまいましたが、昨年関わった案件でVue.jsを導入したので、今回はその所感をまとめてみました。 Vue.jsとは まずは、公式サイトでどんな説明がされているのか、確認してみましょう。 モダンな Web インタフェース向けのリアクティブコンポーネント Vue.js公式サイト：http://jp.vuejs.org 非常にシンプルですね！ データバインディングに機能が絞られているため、フルスタックのフレームワークより学習コストは低いです。公式サイトは日本語対応されており、事例コンテンツもあるので、気になった方はのぞいてみてください。 なぜVue.jsだったか Vue.jsを導入した案件の概要が下記のとおり。 案件概要 開発期間が短い フロントエンド、バックエン
Vue.js で 複数のViewModelを連携させる - kitak blog
追記: 2016/04/28 1.xのVueでは、Reactのようにpropsを利用することでコンポーネント間で値の受け渡しを行うことができます。 また2.0では、$dispatch, $broadcastは非推奨になるので、注意してください。 refs: 2.0 features · vuejs/vue Wiki · GitHub こんにちは。りんご と にんじん と 生姜の入ったジュースを飲んでいます、きたけーです。 今日はVue.js で 複数のViewModelの連携について考えてみます。 VueはViewModel間の親子関係を定義することができますが、今回考えるのは(DOMで)親子関係がなく「リストからひとつの項目を選択したときに、その項目の詳細を別の要素で表示する」ようなケースです。 べたに書くと、こんなかんじになります(Coffeeです)。 listVM = new Vue
Vue.jsのビューモデルのテストを書いてみた - kitak blog
こんにちは。明日はウルトラ花金です、きたけーです。 この前かいたVue.jsのコード(Vue.jsでページネーションを実装してみる - きたけーTechブログ, Vue.js で 複数のViewModelを連携させる - きたけーTechブログ)のテストをMocha+Chaiで書いてみた。 (微妙なコードですけど)こんなかんじ。 describe Menus, -> beforeEach -> @menus = new Menus data: menus: [ {name: "ikura", price: 100}, {name: "tako", price: 200}, {name: "maguro", price: 300}, {name: "uni", price: 400}, {name: "toro", price: 500} ] it "はじめのページであること", -> ex
Vue.js on Railsパーフェクトガイド - Qiita
概要 薄いフレームワークとしてVue.jsが有名ですが、規模が大きくなると結局たいへんなことになってしまうので、設計が必要です。また、Railsでアプリケーションをつくる場合、Vue.jsのComponentチックな志向をうまく利用するのが一工夫必要かと思います。 そこで今回は、Vue.js on Railsを、中~大規模開発に耐えうる、かつ、RailsとVue.jsのメリットを両方活かせる設計を考えてみました。 「さくっとフレームワークを導入したい！」という方にはやや面倒かもしれませんが、逆に、この通りに作りさえすれば、あとはVue.jsなので、難解な概念が出てくることはありません（個人的には、少なくともこれくらい設計しないとフレームワークを導入する意味が無いのでは?・・・と感じますが）。最初だけ頑張れば、あとは楽ですし、jQueryもそのまま動きます。 ※SPAなどではない、通常のRa
Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.inouetakuya.info/entry/2017/08/29/010300
https://jp.nuxtjs.org/