トップ > React基礎 > React.jsの欠点を理解する 基礎

React.jsの欠点を理解する 基礎

React基礎 ライブラリ フレームワーク
See More

reactのデメリット

React.jsは、モバイルアプリとウェブアプリのビューレイヤーを担当するJavaScriptライブラリです。

Reactには多くの利点がありますが、考慮すべきいくつかの欠点があります。

React.jsの使用を開始する前に、Reactの全体像を把握するために簡単に触れておきましょう。

※メリットに関しては別途記事に致します。

本日はReact.jsでの欠点を重点的に解説していきます。

ドキュメントに関する欠如

教育に関する文書とリソースは、最新の更新と変更をカバーするのにまばらになる可能性があったりします。

これはアップデートや新しいリリースの数が多いため、完全なドキュメントを作成するのに十分な時間がありません。

開発者はドキュメントをReact.js/React Nativeの欠点と見なしています。

つまりドキュメントはReactテクノロジーの更新と加速が非常に速すぎる為、適切なドキュメントを作成する時間がないので、これらを克服するために開発者は、現在のプロジェクトで新しいリリースとツールを進化させながら、独自に作成しています。

React.jsはオープンソースであるため、開発者は独自のサポートドキュメントを作成できますが、誰でもこれらのリソースを作成できる為、ほとんど役に立たない貧弱なリソースに出くわす可能性があります。

ですので開発者はReactのドキュメントを好ましく思っておらず、またドキュメントでは初心者が理解するのが難しいです。

そのためReact.jsのドキュメントが不足していることがよくあります。

プラットフォーム関連

Reactではプラットフォームに関連するいくつかの欠点があります。

それはライブラリのサイズとなります。

これは非常に複雑となっており、開発者の間で多くの混乱を引き起こし、またJSXやインラインテンプレートを嫌う開発者は世界中にたくさんいらっしゃいます。

これに加えて、React.jsには別の大きな制限があります。

それはアプリとビューの1つのレイヤーのみをカバーします。

ですので開発を管理するには、開発者は時間を消費する他のいくつかのテクノロジーに依存していく必要があります。

もう少し具体的に説明しますと、ReactはUIのみを担当するライブラリです。

つまりビュー部分のみを処理します、そうなりますと機能的なアプリケーションを作成するには、バックエンドやデータストレージなどの他の重要な部分をカバーするライブラリとツールをさらに適用する必要があります。

Reactの場合ではフル機能のフレームワークではないため、ユーザーインターフェイスの無料ライブラリをMVC(Model View Controller)フレームワークに統合するための深い知識が必要となります。

ビュー指向性がReact.jsにとっての短所の１つとなります。

実際のアプリケーションで作業する場合、以下のツールの知識がReactの開発を構成します

• 状態管理用ライブラリ(例えばRedux)

• Axios / Fetch / Superagentなど、API呼び出しを実行するためのライブラリ

• Webpack / Grunt(コードをバンドルするため用)

Reactを学ぶときに上記のツールを考慮しないと、時間の無駄になります。

それら上記のすべてをReactと組み合わせると本格的なフレームワークとして得られます。

プログラミング画像

開発ペース

React.jsは常に進化し、変化し続けます。

最近でもReactはv18にアップグレードされました。

開発のペースが速いことには、長所と短所どちらも含まれます。

不利な場合は開発者はReactが絶えず改善され、作業が容易になっていくと主張しますが、この急速なペースについていくのは非常に困難です。

それは環境が絶えず急速に変化するためとなります。

これによって起こる事はReact開発者にとって最も一般的な懸念とされるのは、アプリ開発の速度がReactライブラリの頻繁な変更によって大きく影響を受けることです。

しかし近年ReactのコアAPIはより安定してきています。まだ開発に反対している開発者は、新しいものに本当に満足していない開発者かもしれません。

開発者のスキルは、変更とともに常に新しいスキルを更新していく方法を学ぶ必要があります。

複雑なJSX構文

ReactのJSXはJavaScriptの拡張機能であり、コードをより読みやすくクリーンなものにすることができます。

この拡張構文により、一部の開発者には簡単ですが他のWeb開発者・設計者・初学者はJSXコードが複雑すぎて理解するのが難しいと感じている方が多く、学習曲線の複雑さに不満を持っている方もいます。

それはHTMLのようなテキストをJavaScriptのReactコードと共存させることができます、この複雑さな不満をReact.jsの制限と見なしています。

マークアップ言語をスクリプト言語に埋め込むのが本当に厄介であるという事実です。

一緒に存在するだけでなく、一緒に機能する2つの完全に異なるタイプの構文があります。

それを紛らわしくしております。

ですがJSXは、Reactのパフォーマンスやユーザーインターフェイス機能に悪影響を及ぼす事はありません。

このJSX構文さえ理解すれば、その先の学習は比較的簡単で学習は容易なものです。

学習における問題

新しい開発者にとって、React.jsの学習は、React Nativeと比較するとはるかに時間がかかる場合があります。

これは、React.jsを使用しアプリを構築しようとしている新しい開発者にとって問題になる可能性があります。

ですが他のフレームワーク例えば、Angular.jsやReact.jsと比較すると、Vue.jsを習得するのは簡単となります。

Vue.jsは純粋なJavaScriptを使用しますが、そのテンプレートはHTMLで記述されております。

ですので開発者はVue.jsを使用するときに、JavaScript以外の他のプログラミング言語を学ぶ必要はありません。

しかしReactではUIのみを対象としているため、完全なアプリケーションを作成するには他の言語を使用する必要があります。

JavaScriptの基本的な基礎知識を身に付けたら、Vue.jsを使用するのは良いことでもあります。

Angular.jsはReact.jsよりもはるかに深いことは間違いありません。

これはある程度の経験豊富な開発者に最も適したフレームワークになります。

開発スピードもCLIを使用すると、開発手順全体が比較的スムーズになります、問題を修正するための組み込みツールもありますので開発者にとって非常に便利です。

ほとんどのコンポーネントは事前に開発されているのでそのためインフラ全体が非常に洗練されており、すべてが使いやすく統合もさらに簡単となっております。

便利さなら正直Angular.jsのが便利です。

Angular.jsは、オープンソースライブラリではなくフル機能のフレームワークを好む人に最適なものとなっております。

React.jsはAngular.jsよりも習得が簡単ですが、Vue.jsと比較するとさらに複雑となっております。

ReactでもVue.js同様にJavaScriptとHTMLの基本的な知識があれば習得が容易となります。

それがReactが持つ最大の利点でもあり人気を博している理由でもあります。

しかしJSXは完全なHTMLではありません、異なるものですHTMLに似た構文である為、別途新たに学習する必要があります、前述したように豊富なドキュメントが少ないため学習が困難になります。

他のフレームワークやライブラリに比べると学習環境は決して良いとは言えません。

Reactを理解しやすくする方法は、JSXでReactを使用するときに、開発者がコードをより細かく制御できるようにすること、そしてReactを希望どおりに機能させるにはJavaScriptとそのコア動作をかなり深く理解する事が重要となります。

そしてReact.jsだけを学ぶのに時間を無駄にしないよにして下さい、常に他のすべてのライブラリをカバーするチュートリアルも始めてください。

まとめ

React.jsには賛否両論がありますが、React.jsに関連する短所の多くは急速な変化を好まない人々によるものだと私は思っています。

この急速な変化の開発はReactの最大の利点でもありテクノロジーにおける次世代の未来に向けた大きな1ステップです。

今回、当ブログで取り上げたReact.jsのこれら欠点は、開発者及び人間の好みの問題となります。

もちろん好みの問題はこれらも同じです、React.js・Angular.js・Vue.jsどれを学べば良いのか？特定のプロジェクトに最適なのは？

この質問に的確に一言であなたに答えることは不可能となります。

すべてはプロジェクト・目的・あなたの経験、そしてあなたの好みによって違います。

JSに精通している方であれば学習効率はさて置き、難易度は習得が容易なのでReact開発者がこれから先、増えていってほしいと思っております。

ですが最終的にはプロジェクトを注意深くチェックし、すべての詳細と要件を分析してから、あなたにとって最も最適な便利なのを選択するようにして下さい。

Reactを選択した際は、Reactの長所と短所を理解することが重要です。

これら長所と短所は、Webフレームワークをよりよく理解するのに役立ちます。

JSライブラリは軽量で柔軟性があり、簡単に統合でき同時レンダリングが含まれております。

非常に優れたパフォーマンスを発揮致します。

小さな欠点はそれぞれ沢山抱えておりますがJavaScriptフレームワーク/ライブラリを使用することの大きな欠点はありません。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].

'); $entries_archive.insertBefore(sections[0]); for(var i=0; i < view_sec_num; i++) { $(sections[i]).appendTo($entries_archive); page_index += 1; } archive_num += 1; for(var i=view_sec_num; i < sections.length; i++) { if(page_index==view_sec_num) { var $read_more_link = $('

もっと表示する

'); $read_more_link.on('click',{archive_num: archive_num},function(e){ $(e.target).hide(); $('#entries-archive-' + e.data.archive_num).fadeIn("slow"); }); var $before_archive = $('#entries-archive-' + (archive_num-1)); $before_archive.append($read_more_link); $entries_archive = $('
'); $entries_archive.hide(); $entries_archive.insertAfter($before_archive); page_index = 0; archive_num += 1; } $(sections[i]).appendTo($entries_archive); page_index += 1; } $entries_archive.hide(); } }); // ページトップ処理 $(function () { var pagetop = $('#pagetop'); // スクロールした場合 $(window).scroll(function() { // スクロール位置が200を超えた場合 if ($(this).scrollTop() > 200) { pagetop.fadeIn("slow"); } else { // ページトップへをフェードアウト pagetop.fadeOut("slow"); } }); // クリックした場合 pagetop.click(function() { // ページトップへスクロール $('html, body').animate({ scrollTop: 0 },"slow"); return false; }); });