ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
名刺の代わりにCLIアプリを書く - Qiita
ここ1週間自己紹介用のCLIアプリを書くのが流行ってる。 はじまりはいつものSindre Sorhus。 My new business card pic.twitter.com/koVIsUT5np — Sindre Sorhus (@sindresorhus) May 10, 2018 nodeが入っていれば すると自己紹介CLIアプリが起動。 ``` $ npx sindresorhus ```https://t.co/QO3ogKmu1d pic.twitter.com/xZdQSzFLAq — Sindre Sorhus (@sindresorhus) May 9, 2018 基本的には、このレポジトリを適当に書き換えれば簡単にできる。 はじめてのnpmライブラリにちょうどいいかも知れない。 また、使っている技術がちょっとおもしろくて、inkを使っている。 これは何かとCLIのた
メルペイ社で開催されたNuxtMeetup#2でNuxt.js入門してきた - #がみぶろ
こんにちは、しがないラジオのgamiです。 今日は、NuxtMeetup#2にブログ枠で参加してきたので、その模様をお伝えします！ 着席しました！ #nuxtmeetup— gami@しがないラジオ (@jumpei_ikegami) 2018年5月15日 当日は、主催の@kotamatsさんの挨拶で乾杯し、お酒を飲みながらLTを聞きました。 乾杯して始めるので来た方は一人一つ持っていってください！ #nuxtmeetup pic.twitter.com/wgK513X3YI— kotamat Laravue NuxtMeetup (@kotamats) 2018年5月15日 スポンサーLT Welcome to Nuxt Meetup @andoshin11 #nuxtmeetup スポンサーLT! pic.twitter.com/W8T4NTUDxh— kotamat Laravue
【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選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン
イマドキWebフロントエンド環境とReactを触りながらサンプルを10本書いてみた
はじめに Webフロントエンドの知識がjQueryで知識が止まっていたので、モダンなWebフロントエンドに触れてみた。そのメモ。 良かった点 「今はこうなっているのかー」と分かった。今後はナウい記事を読んでもビビらないと思う。 Reactのすごさ 触ってみて下の記事のいうことが理解できた。何がすごいの？と聞かれたら下の記事を掻い摘んで説明したい。 Reactを使うとなぜjQueryが要らなくなるのか 触ってみたもの ES6 Yarn Webpack Babel Sass/SCSS React とりあえずエディタ開いてHTMLを書くぞというタイプの人間だったので、フロントエンド開発にまずはコマンドラインを打って環境を構築する点が新鮮。自動化できるところはツールで共通化してラクできるところはラクをする、というのは分かった。Reactは使うか分からないが、Webpack/Babel/SCSSは絶
イカリング2におけるシングルページアプリケーション
࠾༻ٕज़ w ϑϩϯτΤϯυ41" w 5ZQF4DSJQU w 3FBDU3FEVY w ཪଆʹΦʔέετϨʔγϣϯͱͯ͠ͷ"1*αʔόʔ w 1FSM w %PDLFSͰಈ͍͍ͯΔ
React Express
What is React?React is a library for building user interfaces for the web and other platforms. This guide covers the fundamental aspects of React needed to build great web apps. If you're more interested in building mobile apps, consider checking out React Native Express instead. How to use this guideYou should use this guide as a companion to the official Facebook documentation for getting starte
会社の納会用にクイズアプリを作りました（React / TypeScript） - Opt Technologies Magazine
先日、オプト社内で納会がありました。 その際の出し物の一つとしてクイズ大会があり、技術検証を兼ねてクイズアプリを作成したので中身についてお話します。 （今回はフロントエンド編です） はじめに クイズアプリ仕様 概要 使った技術 画面設計 回答者：ログイン画面 回答者：待機画面 管理者：管理画面 回答者：回答画面 回答者：正誤確認画面 管理者：ランキング画面 技術的な話 アーキテクチャ サーバー通信について WebSocketについて フロントの開発について テストについて まとめ はじめに こんにちは。uryyyyyyyです。 先日（といっても7月あたりですが）、オプトの納会が行われました。 有志による多くの出し物があったのですが、その中の「クイズ大会」コンテンツにて、 問題の回答＆集計をできるアプリを作れないかと頼まれたため、Webアプリを作ってみました。 せっかくなので会社固有の情報を
Go 言語と React で考える「いい感じなURL設計」入門
Description 白ヤギコーポレーションさま主催の「最先端情報吸収研究所（AIAL）」のプレゼンテーションで使用したドキュメントです。 「URL」を軸にして、サーバーサイドを Go 言語、クライアントサイドを React (+ TypeScript) で実装する場合の要点を紹介しました。 - いい感じな URL と わるい感じな URL - RESTful API のおさらい - Echo と REST API と URL - React と SPA と URL - いい感じの URL設計を目指す旅 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. interface FooterProps { company:string } export class FooterComponent extends React.Compo
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
React.jsチュートリアルをcoffee-reactで書いてみる - Qiita
【2016年6月12日更新】0.15.0系になっている64a6dfca72aca4d13ab4cbf23c50eba8b9fabe8a(2016-06-08 23:09)からのフォーク版に差し替えました。それに合わせて古い情報などは更新しています。 React Tutorialのサンプルコードをcoffee-reactで書き直してみました。英語が苦手って方は、優秀な翻訳React.jsチュートリアル【日本語翻訳】をみてみてください。 チュートリアルのコードはgithub:reactjs/react-tutorialから入手できます。まずはそれを入手してください。 index.htmlを書き換える pubilc/index.htmlを次のように書き換えます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React T
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
React.js、やっと使えるようになった - ただのにっき(2015-04-18)
■ React.js、やっと使えるようになった 「使いこなせる」と書くと石が飛んできそうなので。暇な時間にちまちま進めていたので、集中すれば1、2日でできそうなことにこんなに時間をかけてしまった。やっぱり集中力がない……。 とりあえずサーバサイドレンダリングは捨てる前提だったので、検索エンジンに拾ってもらう必要のないネタとしてBookscan Premium Optimizerを使って実装。テストがないとか、Ajaxには引き続きjQueryを使っているとかツッコミどころはあるけど、とりあえずクライアントサイドレンダリングに関しては雰囲気つかめたので良しとしよう。 あー、HerokuのSinatraアプリでJSXのコンパイルをさせる方法がわからんかったので、.jsxだけでなくコンパイル済みの.jsまでコミットしているのはなんとかしたい……。 今回おもに教科書がわりにしたのは一人React.j
Reactに最適化したテンプレートエンジンを作り始めた - Qiita
Reiny, 名前の由来は、一昨日の木曜日に作り始めて、その日雨が降ってたから。 最近react-jadeに不満を持ってて、自分はコンパイラというかプリプロセッサを作るノウハウはあるので、だったら自分で作ればいいじゃん、といった感じで作り始めた。(typed coffee を作り直すためのAST操作の勉強も兼ねてた) 何ができるか 今これが動いてる - let i = () => {}; div(hoge='fuga') { backgroundColor = 'red' } // unicode span( key="--🐑--" ) // ref with & span&foo() // for syntax ul for i in @items li(key=i) = i // if syntax if false a hoge fuga aaa // inline express
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアが React Native を触ってみた話
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
