Web フロントエンドの実装において本来の機能を損なってはいけない
Web フロントエンドの実装において本来の機能を損なってはいけない データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO
OSSとしてリリースされたばかりのReactベースのフルスタックWebフレームワークであるRemixをためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Next.js v12やReact Router v6、新しいRoutingライブラリReact Locationのリリースなどなど注目のリリースラッシュが続いているようです。そんな中Reactをベースにした新しいフレームワークであるRemixが本日（2021/11/23日本時間）リリースされました。 Remixとは RemixはReactRouterの作者でもあるMichael Jackson氏（@mjackson）とRyan Florence氏（@ryan
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにした
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
Vanilla JSのメリット フレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。 それは動作が速いことです。 今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。 どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。 この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。 仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ
React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ
エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで
フロントエンドのコンポーネント設計に立ち向かう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
Reactを使って本気でアンケートシステムをつくった - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用してい
JetBrainsのWeb UIコンポーネントをオープンソース化 | Post Blog
Ring UIを発表します。Ring UIはオープンソースのWeb UIコンポーネントです！ JetBrainsは何年にも渡ってRing UI ライブラリを開発してきており、複雑なUIコントロールを提供します。Ring UIは50を超えるReactコントロールからなり、シンプルなリンクやボタンに始まり、デートピッカーやデータリストといった洗練されたコントロールまで揃っています。 このライブラリはYouTrak、Hub、Upsourceをはじめとする製品でフル活用されています。そしてJetBrainsはこのライブラリを今後も引き続きメンテナンスしていくことにコミットします。 Ring UIライブラリを使う場面として一つあげられるのがHubのダッシュボードに組み込みカスタムウィジェットの開発です。Ring UIを使うことでお馴染みのJetBrainsのインターフェースに馴染みます。是非クイック
redux-thunkなのかredux-promiseなのかredux-sagaなのか、それともredux#bindActionCreatorsをやめるのか - Qiita
前提 ここで書くのはあくまで個人的な意見です。 react, reduxはどちらも使い方次第でフレームワークっぽくも使えるし、ただのツールとしても使える。だからreact, reduxを使ったフロントアーキテクチャはいくらでもあっていいと思う。 これはそのうちの一つを提案するものです。 とはいえ特別な実装方式を編み出したわけでは全然なくて、むしろ１周して出戻りしたかんじ。 結論 非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。 今は、非同期処理をするためのredux middlewareを使ってないです。 過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。 どうやるのか red
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook
Home | nivo
Reactの最新動向とベストプラクティス
How to style React components
物理サーバを選定する際のポイント – Eureka Engineering – Medium
React.js app.js file size