ReactとVueの比較 | 完全に同じアプリのコードの書き方の違い - Qiita
はじめに JavaScript フロンエンドフレームワークは 2014 年ごろから本格的に使用され始め、従来のサーバーサイドテンプレートに対し、現代では一般的な Web 技術としてすっかり定着し、シェアとしては React、Vue が 2 強状態になっています。本稿では、最初に過去から現在の状況を俯瞰した後、React と Vue の関数コンポーネントを使用して、同じ画面と機能を持つコードの書き方を比較していきます。 過去から現在の状況 フロントエンド MVC の衰退 10 年前、フロントエンド MVC を標榜していた Angular や Ember は低迷し、以降のフレームワークはもはや M とか V とか MV なんたらなどのレイヤーを言及しなくなり、ビュー + イベント + ステートを 1 つの責務としてまとめた直感的で分かりやすいコンポーネント指向となりました。以下は State
社内UIライブラリを作る
こんにちは、monica です。 今回は弊社で開発している社内 UI ライブラリについて紹介します。 また、このプロジェクトは商用利用不可ですがオープンソースで公開していますので、ぜひご覧ください。 経緯 弊社ではこれまでフロントエンドを Vue2+ElementUI で開発してきました。 しかし Vue3 がリリースされ Vue2 のサポートが 2023 年末に終了することが決まったので、マイグレーションを行う必要がありました。 普通に Element UI を使っていれば、公式が提供している Migrator を使ってそこまで不便なくマイグレーションできます。 ですが勝手な外部からのスタイリングが当たっていたり、依存関係をどんどん増やしてしまった結果、Migrator を使うとアプリ全体が壊れるという状況になっていました。 ただたまに Element UI が直接スタイルを当てるように
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
Vue.js「コンポーネント」入門 - Qiita
はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの
Vue.jsを使ってメンテナンスツールを作ってみた - MicroAd Developers Blog
ご無沙汰しております。 マイクロアドでアプリケーションエンジニアをしているNです。 約1年前「JavaScriptフレームワーク（Vue.js）を導入して」というタイトルでブログを執筆させていただきました。 その時、 興味を示して頂き何らかの反応をいただければ、きっと別の社員がもう一歩踏み込んだVue.jsのお話を書いてくれるんじゃないかと期待しています。 と書いたっきり誰も続いてくれなかったので1年越しではありますが、責任持ってアプリケーションエンジニアの N 動きます。 社内メンテナンスツールをつくってみた 最近WEB開発してないんです。 実は去年の4月ころからだいたいバッチしか作らないチームのリーダーにさせていただきまして、それからずっと趣味以外でWEB開発をしてません。 （実は前回のブログを書いた時にはもう。。。） でもWEB開発したい！JS書きたい。。。 そうだ！バッチのメンテナ
面倒くさがり屋な私でもできた、楽ちんなWebサービスの作り方。 - Qiita
1. はじめに 生まれつき面倒くさがり屋の私は、今まで個人でWebサービスをリリースできたことがありませんでした。 着想した段階で「すごいアイディアが思いついた！」と満足して放置を決め込んだり、少し手を付けただけで作りかけの状態になってしまうといった状態です。 そんな面倒くさがり屋の私が、一週間たらずで個人開発のWebサービスをリリースできたので、そのやり方を共有します。 2. 作ったもの 大人のADHDの診断ができる病院を、地図上から簡単に探すことのできるサービスを個人で作りました。「自分はADHDかもしれない」と感じながらも、診断まで行き着けていない人は是非使ってみてください。https://t.co/ERRCrbOCsQ — igz0 (@igz0) 2019年8月10日 サービスの内容はいたってシンプルです。 大人のADHDを診断できる病院が、日本の地図にマッピングされていて、 マ
ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita
はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
Vue CLI UIを活用して実際にアプリを作ってみた - LiBz Tech Blog
はじめに LiBではフロントエンド勉強会をしており、最近は勉強会の中でVue CLI UIを使ってアプリを作っています。 関連記事 3ヶ月間バックエンドエンジニア向けにフロントエンドを学ぶ勉強会を行った話 フロントエンド初心者がVueUIを使って爆速でVueアプリを立ち上げてみる Vue CLI UIを使いつつの実装がかなり勉強になったので、復習がてら「ユーザ一覧を表示するアプリ」を作ってみたいと思います。 Vue CLI UIでアプリを新規作成 詳しい方法は過去記事をご覧ください。 フロントエンド初心者がVueUIを使って爆速でVueアプリを立ち上げてみる アプリを新規作成してすぐはこのような画面になっています。 ユーザ一覧ページを作る(Vue Router) ユーザ一覧を表示するためのページを作ります。 ルーティングにはVueの公式ルータである Vue Router を使います。 Vu
昔、作ったWebサービスをTypeScriptとVue.jsで作り直した話 - Qiita
はじめに Vue.jsとTypeScriptでWebサービスを作ってみたいけどアイデア浮かばなかったので昔作ったアプリを作り直しました。 作ったもの Qnow Qiitaで新規投稿された記事のみを取得して表示するサービスです。 タグ名でフィルタリングして表示します。 表示した記事のタグ名をクリックすることでクリックしたタグ名で再検索することができます。 ただ、今の仕様だと日付が変わってすぐだと記事が取得できないので後々変更しようと思います。 使用した技術 Vue.js TypeScript Github ソースコードの管理 CircleCi masterにプッシュされたらビルドとデプロイを実行 Firebase 静的ファイルの配信 Vue Cli3を使用しました。 Vue Cli3ではTypeScriptが正式採用されているのでTypeScriptを使用しました。 でも、TypeScrip
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、フロントエンドエンジニアのヒガです。 ここ最近の案件でNuxtを使っていたんですが、とっても素敵なフレームワークで恋に落ちちゃいそうでした。 でも、僕の対応する案件はそれらのフレームワークを使えないことも多く、フレームワークを使ったあとにそういった案件にとりかかると正直めんどうだなと感じることがあります。ですので、一部の機能だけでもいい感じにつかうことはできないかなと思いました。 目をつけたのはステート管理に関する機能です。NuxtでいうとVuexですね。公式サイトを引用するとこのように書いてあります。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 （引用元：https://vuex.
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見 - エムスリーテックブログ
こんにちは、エンジニアリンググループの福林 (@fukubaya) です。 2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。 リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしました*1。 本記事では、Vue.jsがほぼ初心者だけのチームでVue.js製プロジェクトをリリースするまでに得られた知見をまとめます。 すでにバリバリ使いこなしている方には物足りないと思いますが、これからVue.jsを始める方の参考になれば幸いです。 黒部宇奈月温泉駅は富山県黒部市にある北陸新幹線の駅。本文には特に関係ありません。 サービスの概要 開発環境 プロジェクトの管理はVue CLIで Chromeの機能拡張 Vue.js devtoolsは必須 バンドルサイズの確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩
「Vue.js」の開発支援ツール「Vetur」を強化 ～「Visual Studio Code」の2019年4月更新／SSH/Docker/WSLでリモート接続できる「Remote Development」もプレビュー中
Vue.jsでファイルアップロードの実装--ついでにプレビュー機能も実装した話-- - Qiita
