guijsRun scripts with visual enhancements like a webpack dashboard
ちゃんと理解するCode Splitting - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。 これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。 ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いま
【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた？ - Qiita
Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き」は健康にいいよねって誰でも言うと思うけど、実際に万人がやっているかどうかは別じゃないですか。それと同じで「テストすること」も絶対いいことだと私は思っていますが、やるかどうかはチームの置かれている状況によって決まります。この記事は、その「テストを導入するかどうか」という意思決定の一助にでもなれればいいなと思います。 はじめに こんにちは。ぼくです。 今回はVue.jsでTODOアプリを作ってみよう
Vue.jsのmixinをslotで代用する - Qiita
Vueにはmixinという機能がある。 同一の機能を複数のコンポーネントに適応させるというものだ。 共通の機能を提供する便利なものだが、あまり楽観的に使えるものではない。 例えばReactでも過去には存在していたが、既に廃止されている。 なぜ廃止されたかは理由を読めばmixinのどのような点が危険な点かが見えてくるだろう。 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 ざっくりと要約するとこのへんが上げられている 暗黙の依存関係を導入してしまう 名前の衝突を起こす 複数のmixinがあり、それらがプロパティを上書きす
Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました - チラシ裏日記上等！！新館
Ruby on Rails の 5.1.0.beta1がリリースされましたね！ weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。 今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Vue.js 2016年まとめ & 今後
Vue.js 2016年まとめ & 今後この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。 フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。 そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。 2.0 リリース！一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！ Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO 2016年9月30日今年の4
💓 Vue.js
�bN#�� �J= �� �To#�� �rl#�� � z#�� �r>#�� @ x#�� �|L#�� � z#�� `�R#�� ��4#�� @ P#�� ��~ �� p�y#�� � h#�� �U �� ��y#�� ��x#�� �s#�� �w#�� �{s#�� �y#�� 0�J#�� p�z#�� ��q#�� `�v#�� 0�q#�� p�4#�� �Ch#�� ��h#�� �0#�� ��M#�� @�M#�� ��>#�� ��J#�� ��J#�� �GU#�� �Bx#�� PJx#�� вy#�� �c9#�� �i9#�� ��7#�� p�7#�� �7#�� `�v#�� �is#�� ps#�� ��w#�� `�w#�� ��w#�� �>#�� ��>#�� ��>#�� �qx#�� �ux#�� � x#�� ��>#�� �>#
2015-11-03のJS: Vue.js 1.0.0、Babel 6.0、Node.js 5.0
JSer.info #251 - Vue.js 1.0.0がリリースされました。 0.12.16から1.0.0までの変更はリリースノートに詳しく書かれていますが、テンプレート周りの改善や非推奨のAPIの削除やAPIの整理が行われています Vue.js 1.0.0 Released - vue.js (翻訳) Release 1.0.0 Evangelion · vuejs/vue 同時にVue.jsに再入門するという趣旨の記事が作者によって書かれているので一緒に見てみるといいです。 Vue.js: a (re)introduction JavaScript変換ツールであるBabel 6がリリースされました。 6.0.0 Released · Babel babel/CHANGELOG.md at master · babel/babel NOTE: Not all integrations
Vue.js概要？ - 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 とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
Angularそっちのけで、Vue.jsについて所感
Vue.js 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog を読んで触発されたので、自分も外見的に良いなと思ったポイントだけ書き留めてみます。さすがに実戦投入できていないので、そのあたりの精度は悪しからず。 サンプルコードの雰囲気 サンプルコードとか自分でちょっと触ってみたときの感触からは、以下のポイントが気に入りました。data-bidingsとかは前提として便利です。はい。 覚え切れそうな分量のAPI Class: Vue - vue.js 脳みそちっちゃいので助かります。それに尽きる。 プロパティによる宣言っぽさ Angularだとイベントハンドラ類を書くにも、$scopeに都度ハンドラを仕込んでいくのがあまり好きでないです。工夫で回避できそうですが、与えられたスタートが下記のような状態であることには変わりません。 angu
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まもなくやってくる Vue.js 3
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
Vue.js 続・大規模アプリ開発 - Speaker Deck
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
Vue.js