Vue.jsの生みの親 Evan氏が箱根でみんなの質問に答えてくれた【動画有り】 - アシアルブログ
こんにちは、生形です。 先般開催されましたVue Fes Japan 2018のために、JavaScriptフレームワーク「Vue.js」の生みの親であるEvan Youさんが来日されました。 この機会を逃す手はない！ということで、Evanさんへの質問をTwitterで公募し、インタビューした様子をライブ配信しました。インタビュアー兼通訳を担当したのは、Vue Fes Japanのスタッフでもある、弊社代表の田中です。 左：Evan Youさん／右：アシアル 田中正裕 当日、Evanさんは温泉で日本を堪能していたようです。なんとライブ配信は箱根の旅館から！浴衣がお似合いですね。 はじめはSublime Textをずっと使っていて、次にAtomに切り替えましたが最近はもっぱらVS Codeを使っています。 VS CodeはTypeScriptのサポートが強力なので便利ですね。ちなみに、VS
サーバレスアプリ開発をjQueryでがんばらないためのVue.js - Qiita
サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。 これまでのWebアプリ開発 JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。 サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。 よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。 jQueryのDOM操作は辛いよ jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。 JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。 また、Jav
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
WebデザイナーのためのVue.js事始め
WebデザイナーのためのVue.js事始めVue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ Vue.js の使い方Vue.js は公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScript で定義したテキストを HTML に表示させる」というスーパ
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。 - Qiita
フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。 Reactは小さく、シンプル。 Reactは、ちょっとしたReactとの対
フロントエンド開発に Babel も Webpack も必要ない ※ - KAYAC Engineers' Blog
できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom
Hyperapp, React, Vue.jsで同じサンプルアプリを作ってサイズを比較してみた - Qiita
私は脱jQuery(脱DOM操作)したい系の者で、 React, Vue.js, Hyperapp については初心者です。サンプルコードは公開しておりますが、正確さは保証いたしません。この記事は参考程度に読んで頂ければと思います。 作ったもの 以前に React, Vue.js で製作したRaspberry Piの無線LANをmicroSDで簡単に設定するためのツールを Hyperapp でも作ってみました ツールへのリンク: https://mascii.github.io/wpa-supplicant-conf-tool/ このツールはブラウザ上でSSIDとパスフレーズを入力してリストに追加するだけで簡単にRaspberry Piの無線LAN設定ファイル(wpa_supplicant.conf)を作成でき、これをPCでRaspbianの入ったMicroSDに書き込んでおくことでRasp
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC Engineers' Blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
Vue.jsでD3.jsを使わずにグラフを実装する - Qiita
Vue.jsでグラフ を実装するサンプルコードを探すとD3.jsを用いている例が結構見つかります。 しかし本当にD3.jsが必要なのでしょうか？ この記事ではD3.jsやその他グラフライブラリを用いずにVue.jsのみで実装したグラフについて解説します。 TL;DR SVGでおｋ グラフコンポーネントにSVGのテンプレートを書く テンプレートに必要な値を computed でじゃんじゃん作る デモとリポジトリ デモ： https://haribote.github.io/vue-graph-demo/ リポジトリ: https://github.com/haribote/vue-graph-demo 折れ線グラフ、棒グラフ、円グラフ、の3つのグラフを実装してみました。 データの内容はプロ野球における直近5シーズンの年間入場者数です。 NPBが公開している統計データからJSONを用意しました
How we do Vue: 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, they're busy getting crap done. Which is exactly what we've been doing. Like
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート MOONGIFT
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
Vue.jsを教えるまでの道のり - sushitecture
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）
Vue.jsでJavaScript式を使う 【JavaScript フレームワーク入門】 - JavaScript勉強会
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-7 JavaScript式を使う HTML CSS JavaScript 実行結果 createdフック まとめ 4-2-7 JavaScript式を使う (p.129) Mustacheタグには、dataの値を指定するだけでなく、もっと複雑な内容を記述することもできます。 それは「JavaScriptの式」です。 式といっても、四則演算のような式だけではありません。 要するに「結果を値として返すことのできる文」と考えておけばよいでしょう。 値として得られないようなものは設定できません。 HTML index.html <!DOCTYPE html> <html> <head> <title>Hello</title> <meta ch
Vue.js入門その３〜簡単にTODOアプリを作ってみたよ〜 | RE:ENGINES
はじめに 7/12 修正 記事下部にて、 filter メソッドを使用している箇所がありましたが、 forEach の方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事ですが、こちらにも投稿します。 少しご指摘もいただいたので、FIX版になります！ Vue.jsの勉強で超簡単なタスク管理アプリを作ってみる 今まで、Vue.jsの記事として下記を投稿してきました。 Vue.js入門その１〜基本文法〜 Vue.js入門その２〜Vueインスタンスってなんぞ？〜 ただ、今ひとつピンとこなかったため、よくあるTODOアプリを作成してみました。 サンプルはこちらです。 https://jsfiddle.net/naoki85/fo26rmr0/12/ 準備 Bootstrapを読み込み CSSは面倒なので、Bootstrapを使用したいと思います。 JS Fidd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新版のチートシート！Vue.jsのよく使用するイベントや構文がまとめられたフロントエンド制作者用チートシート
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
やわらかVue.js