フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
「なんだろう、無駄なuseState使うのやめてもらっていいですか？」
訳：「適切なuseStateの使い方」について 最初に ※タイトルはあまり気にしないで下さい。 useStateを使用する際に気を付けたいポイント 関連する状態はまとめることを検討する 矛盾した状態の宣言を避ける 冗長な使い方をしない 重複した状態の宣言は避ける 1. 関連する状態はまとめることを検討する 例えば下記のようにOnPointerMoveメソッドを使用しXYの座標を保持したいと思います。 const [x, setX] = useState(0); const [y, setY] = useState(0); const handlePointerMove = (e) => { setX(e.clientX); setY(e.clientY); }; return ( <div onPointerMove={handlePointerMove} style={{ width:
Getting Started - Learn Next.js
To effectively learn Next.js, it helps to be familiar with JavaScript, React, and related web development concepts. But JavaScript and React are vast topics. How do you know when you're ready to start using Next.js? Welcome to the React Foundations course! This beginner-friendly, example-led course will guide you through the prerequisite knowledge for Next.js. You will build a simple project step-
ReactでWebWorkerをサクッと使う
はじめに 業務やちゃんと開発したいものではなく、技術を試したりするときにworker-loader等の導入、TypeScriptでの対応をやるのが面倒だった。 サクッと使いたいだけなのに...という時に使うためだけです。 ※ 業務や複数人の開発、お遊び等ではない個人開発ではちゃんとworker-loaderやcomlinkの導入・TypeScriptで型安全な開発をしましょう。 実装 WebWorkerの用意 まずはWeb Workerの実装から。 適当に受け取った数値分のループを行います。 export default () => { self.onmessage = (event) => { const max = event.data; for (let i = 1; i <= max; i++) { console.log(`${i}回目`); } postMessage('fin
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
React入門！！の前に知っておきたいNode.jsとJavaScriptの知識 - Qiita
対象読者とこの記事から何が得られるのか そろそろReactの勉強をはじめてみたい、勉強したいと思っているけど、以下のようなことを考えて前に進めない方向けの記事です。 JavaScriptの知識レベルはこれくらいで足るのか？ 他に知っておくことはないのかな？ この記事を読むことでReact入門の前に知っておきたいNode.jsとJavaScriptの知識を得ることができると思います。 Node.jsをざっと知る Node.jsを簡単に言うと JavaScriptをブラウザではなくPythonやRubyなどと同じようにターミナル上で動かすことができるようにするための実行環境のことであり、バックエンド言語としてJavaScriptを使うことができ、ファイル操作などのOSの機能にアクセスできます。 公式ページだと以下のように記載されています。 Node.js はスケーラブルなネットワークアプリケー
Reactを自作しよう
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
ReactがわからないというよりJavaScriptがわからなかったのです - Qiita
はじめに Reactはユーザインタフェース構築のためのJavaScriptライブラリです。次のような利点があるため、HTML、CSS、 jQuery を学習し、Web制作者目指しているような方もReactにも興味を持つと良いと思いました。JavaScriptをある程度学習していれば、Reactはそんなに難しくないからです。 コンポーネントベース ブロックを組み立てるようにユーザインタフェースを構築できる 見通しがよく、苦痛が少ない 一度学習すれば応用が効く サーバー上でもレンダーできる モバイルアプリケーションの中でも動く(React Native) Reactを二ヶ月くらい学習し、真似してコードが多少書けるようになった時、私はそのコードにどうにも腑に落ちませんでした🥺。その頃の私はReact以前にJavaScriptがよくわかっていなかったのです。そんな少し前の自分に説明するつもりで書
Reactの身内向けチュートリアル（その１） - Qiita
Vue.全盛の中、社内メンバー向けのReactの簡単なチュートリアル。 本チュートリアルのゴール トップナビゲーションやログイン機能を持った普通のWebページをReactのSPAとして作る方法を知る。 下記のようなサイトを作ります。 内部メンバー的なゴールとしてはFirebaseを利用してバックロジックを作ったり独自ドメインHostingをできるようなることを目指す。 シリーズ その１：create-react-appの簡単な使い方とファイル構成（この記事） その２：簡単なページの作成（共通パーツ化含む）とreact-routernによるルーティング その３：簡易認証機能（ログイン・ログアウト）の追加 その１の概要 ReactでSPAを作成する際の雛形作成ツールであるcraete-react-appのインストールと使い方の習得 雛形の構造や意味の理解。簡単な編集。 前提 node.jsがイ
最近Reactを始めた人向けのReact Hooks入門
ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
React入門 -なぜReactを使うのか- - Qiita
はじめに 私がReactに出会い１年程度経過し、React自体にも大きな変化がありました。今回は、Reactの良さを知ってもらいたいと思い、筆を取りました。 また、改めて自分の中のReactの知識を整理しようというのがサブ目標です。何回かに分けて1つのアプリを作れる程度までを記事にまとめていきたいと思ってます。 筆者のステータスは以下の通りです React・Next.jsを使って簡単なアプリを作ったことがある アルバイトでSpringを使ったwebアプリの開発をしている（フロントはjQueryゴリゴリ） Reactに出会って使用するに至った経緯 概略: jQueryで地獄を見たためReactに救いを求めました。 前述の通りjQueryを良く使用していて基本は問題なかったのですが、画面項目が増え動きがリッチになるにつれ実装難易度やメンテナンス性に限界を感じてきました。 そこでたまたま出会った
I created the exact same app in React and Vue. Here are the differences. [2019 Edition]
Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence — the grass in this scenario being React. Note: there is a new version of this article that can be found here: https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition I’d read the React docs and watched a few
![I created the exact same app in React and Vue. Here are the differences. [2019 Edition]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a229f2668ed6825521466698ba6ff56beed1178d/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AfiKg1ve_EvCP5FIImxXNGQ.png)
なぜ昨今のJavaScriptではイミュータブルであるべきと言えるのか歴史的背景を踏まえて言語化する - Qiita
先日JavaScriptに慣れていない人のコードをレビューする機会があり、constで宣言されたオブジェクト内部に副作用を与えている記述がありました。 その時に「今の動作に問題ないけど、今風のJSならイミュータブルの方が良いかも」と指摘したものの、JSに疎い人からすれば背景が分からないはずで、理由を自分なりに説明したものの案外言語化が難しかったことがありました。 難しい理由として、イミュータブルであることは実利面と同時に、Facebook発祥のトレンドという側面も多分に含んでおり、JavaScript自体の潮流も踏まえておく必要があるからです。 今回は実利面に加えてトレンド面も交えて、なぜイミュータブル性がJavaScriptで重宝されるのかを見ていきましょう。 フロントエンドの世界では状態を持ち、時間やインタラクションと共に変化するから サーバーサイドの世界から見た場合、HTTPはステー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactとは? - React入門