2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/07/14 追記 ディスカウント後の価格みたいな導出項目はselector (reselect)を使うとよいのでは https://redux.js.org/recipes/computing-derived-data - YonmanHasse のブックマーク / はてなブックマーク というコメントを頂き、確かに便利そうだったので導入した。 それに合わせてこの記事の内容もアップデートした。 追記終わり タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアル

2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 Redux Hooks によるラクラク dispatch & states Redux Toolkit とは？ Redux チームが公式にリリースしているReduxを簡潔に記述するためのライブラリです。 ほ

modern_js.md If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation: We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var. We use the class keyword to define JavaScript classes. There are two things worth re

海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H

主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu

フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S

Liam Tung （Special to ZDNET.com） 翻訳校正： 石橋啓一郎 2019-05-17 06:30 Microsoftの最高経営責任者（CEO）がSatya Nadella氏に変わってから、同社のLinuxに対するアプローチは友好的になったが、元CEOであるSteve Ballmer氏の時代から変わっていないことが1つある。それは、とにかく開発者にこだわっているということだ。 先日開催された開発者向けの自社カンファレンス「Build」で、「Windows 10」向けのMicrosoft製Linuxカーネルである「Windows Subsystem for Linux」のバージョン2が発表された。これによって、Windows上で実行されるLinuxディストリビューションのブート時間は短縮される。 また、Microsoftの軽量クロスプラットフォームコードエディタである

1. JSXとは？ JSXはECMAScript（JavaScript）にXML-likeな記述を追加した言語拡張です． 簡単にいうとJSXはJavaScriptのシンタックスシューで，XMLライクにJavaScriptの記述が出来ます． 2. Babelを利用し変換内容を確認 実際にどのような変換が行われるか，Babel(バベル)のサイトを利用し確認出来ます． React NativeのText Componentの利用例として，下記のように記述が出来る．

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

React.jsとは Facebookが提供しているJavascriptライブラリです。 React.jsは2014年に、アメリカのYahoo!Mailなど大手が採用し、注目されるようになりました。 提供元のFacebookはもちろん、InstagramやAirbnbなど多くの採用事例があります。 React.jsは、公式サイトで下記の3つのメリットを提唱しています。 JUST THE UI VIRTUAL DOM DATA FLOW 1.JUST THE UI MVCでいうVIEWを担当し、UIを構成します。 javascriptコードにHTMLタグのような記述ができ、jQueryと共存も可能なんです。 React.jsは、コンポーネントとよばれる機能で表示部分を構成してきます。 MVCとは MVC（Model View Controller モデル・ビュー・コントローラ）は、ユーザーイ

KC3 2015にて発表したスライドです。 written by @spring_rainingRead less

2. 自己紹介 • 名前: 成田 幸紀 (なるた ゆきのり) @ynaruc • 出身: 愛媛 • サイボウズ株式会社 3 年目 • 松山開発部 PG • 使っている言語 • TypeScript, JavaScript, C++, etc. 勉強会やハッカソンなどのイベントが好きで， 愛媛のイベントにたまに出没しています。

You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If

Progateやdotinstall「HTML,CSS,JavaScriptを学んだけど、次どうしようかなー」って人に向けたReact.jsのチュートリアルです。一緒に、Java… もっと読む

React.jsは、JavaScriptのフレームワークとして有名ではありますが、実際はJavaScriptのライブラリです。歴史は比較的浅く、2011年にFacebookのニュースフィードに導入されたことから始まり、2015年3月にオープンソースとして公開されました。そこから短期間で爆発的な人気を得ています。今回は、このReact.jsはどんなものなのか、3つの特徴とインストール方法をご紹介していきます。 React.jsとは、Facebook社が開発し、2015年3月にオープンソースとして公開されたJavaScriptのライブラリです。コミュニティが活発で、現段階の最新バージョンは2017年6月にリリースされたバージョン15.6.0です。15もバージョンが出ているのかと思いがちですが、実際は0.系からいきなり15系のバージョンになっています。その理由は、安定性、安心性がバージョン15に

「なぜ仮想DOMという概念が俺達の魂を震えさせるのか」という記事の学習資料にあるAwesome Reactで、React General Tutorialsの中のReact.js Koansを一通りやったのでメモを残しておきます。リンクばかりですみません。 React.js Koansは問題を解く形式で進めていくReactの学習教材です。日本語でざっくりとした概要を知りたい方は以下の記事あたりを読むといいかと思います。 Reactに慣れるためにReact.js Koansってのをやってみました（React初心者向け） 教材のインストール $ git clone https://github.com/arkency/reactjs_koans.git $ cd reactjs_koans $ npm run setup でセットアップをした後は、npm run startとかnpm run

React(リアクト)とは、Facebookが開発しているJavaScriptのライブラリでありフロントエンドの開発に大きな影響を与えています。 一般的には学習コストが高いと言われているReactですが、順序よく勉強すれば意外とすんなり理解できるのではないかと思ったため、自分がやってきて良かったなと思うReactの勉強方法をまとめてみようと思います。 ちなみに自分もReact関連の記事をいくつか書いているのでよろしければご覧いただけたらと思います。 Reactの基礎知識【初心者向け】 基本的には上から順に学習していくと効率が良いと思います。 ちなみに書籍は「React開発 現場の教科書」がとてもわかりやすかったです。 React開発 現場の教科書 JavaScript Reactを勉強すると言っても結局はJavaScriptで記述するので、基本的なところは押さえておいたほうが学習を進めやす

Reactの勉強メモ。 Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。 「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。 jsstudy.hatenablog.com CodeSandboxとは？ (p.31) 「CodeSandbox」は、オンライン上で直接Reactなどのコードを記述できるエディターアプリケーションです。 ブラウザーでページを開くだけで、Reactを記述する環境が一式揃っており、雛形から書き始めることができます。 codesandbox.io https://codesandbox.io/ ブラウザーでこのURLにアクセスすると、以下のようなWebページが表示されます。 「OPEN REACT」ボタンをクリックすると、エディター画面が表示されます。 これ