フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
はじめに Vue.jsとTypeScriptでWebサービスを作ってみたいけどアイデア浮かばなかったので昔作ったアプリを作り直しました。 作ったもの Qnow Qiitaで新規投稿された記事のみを取得して表示するサービスです。 タグ名でフィルタリングして表示します。 表示した記事のタグ名をクリックすることでクリックしたタグ名で再検索することができます。 ただ、今の仕様だと日付が変わってすぐだと記事が取得できないので後々変更しようと思います。 使用した技術 Vue.js TypeScript Github ソースコードの管理 CircleCi masterにプッシュされたらビルドとデプロイを実行 Firebase 静的ファイルの配信 Vue Cli3を使用しました。 Vue Cli3ではTypeScriptが正式採用されているのでTypeScriptを使用しました。 でも、TypeScrip
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」JavaScriptVue.js どうしてもレンダリングはサーバーサイドがやっているものを変えたくない。でもフロントは変えろ。そんな要望ありますよね？ え？ありませんって？あったんですよ。 コンテンツの中身は可変なのでSSレンダリングしたいけど、APIを作ってFE側から取ってくるほどの内容でもない。その上で、レンダリングするHTMLにはVueのためのバインディングや条件式が書けない。そんな場合を想定します。 例えばアコーディオン 閉 開 こんなイメージのものを作って行こうと思います。 まずはサーバーサイドにレンダリングしてもらうHTMLです。 コード html <div id="accordion--wrapper"> <div id="accordion--component" c
東京の皆さんこんにちは。ご機嫌いかがでしょうか？ 私は今、旅行に来た新潟のホテルでこの記事を書いています。うまい酒にうまいメシ。なぜ我々は東京に固執するのでしょうか？私は今最高に幸せ（ 忘れてた 時間がなくて終わっていないアドベントカレンダーの原稿書きがなければもっと最高だったのに）です。美味しい日本酒のおかげで捗るこの記事は、きっと 12/2 に公開( 追記: ダメでした )されるでしょう。 さて、表題の「私は jQuery から Vue.js への置き換えで何をやらかしたのか」について語って行きましょう。ちょうどアルコールも入っているし、色々語れそうです。 忙しい人向けまとめ Q. jQuery でがっつり UI 組まれた Rails アプリで脱 jQuery を図るなら、気をつけないといけないところはどこでしょう？ A. 本当に jQuery が問題なのかよく考えましょう jQuer
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2016年7月21日：記事更新。Vue.js 1.0.xをカバーし、コンポーネント部分を追加しました。 Vue.jsは、MVVM（Model-View-ViewModel）アーキテクチャパターンを使用したWebアプリケーションの組み立てを助けてくれるJavaScriptライブラリーです。はじめはAngularJSとよく似ていると思いましたが、一度使ってみるとVue.jsはシンプルで使いやすいだけでなく、フレキシブルであることにも気づきます。 今回は初心者向けの記事として、Vue.jsの基本コンセプトと重要な特徴を含めた全体像を説明します。 Vue.js 1.0.xはいくつかシンタッ
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
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)、が舞台上の役者です、それらを管理する コントローラ
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
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("変更したい内容"); }); イベントを受け取って、色々と処理をし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
