こんにちは。
ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズの木村です。
弊社では、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っています。
こちらでは、日々の現場でサポートさせていただいている中での、プロの目線で、エンジニアに役立つお話をしてまいります。
さて、今回はフロントエンドの中でもJavaScriptのライブラリについてお話しします。
ライブラリの中でも、react.jsとriot.jsについて今回は触れていきます。
react.jsとriot.jsというのは、どちらもJavaScriptライブラリです。
なんとなく名前もそっくりでややこしいですよね。そこで今回は、react.jsとriot.jsそれぞれの特徴と違いを確認してみましょう。
ドンピシャ案件の探し方
「案件はたくさんあるはずなのに、なかなか自分の望む案件が見つからない…」
エンジニア市場は売り手市場であるものの、いまだに正しいマッチングノウハウが確立されておらず、多くの方が案件探しに苦労されています。
ですが、現在の市場感や企業側に刺さる経験・スキルを理解し正しく案件探しをすれば、誰でも自身のバリューを活かし単価を伸ばすことができる、というのも事実です。
ITプロパートナーズでは、
・9割がエンド直案件のため、高単価
・約6割が週3-4案件のため、柔軟に働ける
・事業会社の自社開発案件が多い
などの魅力的な案件を数多く保有し、マッチング能力の高い即戦力エージェントが完全サポートします。
初めてのフリーランス、情報収集段階でも大丈夫です。あなたの働き方にマッチし、単価も高く、最もバリューを発揮できる案件を探しませんか？
目次
react.jsとは？
react.jsとはすでに書いた通り、JavaScriptライブラリです。
認知度が非常に高い理由としては、オープンソースソフトウェアですので誰でも使えるからという理由以上に、公開元があのFacebook社だからでしょう。
Facebook社のサービスであるFacebookやInstagramはもちろん、その完成度の高さから、YahooやAirbnbなどの有力IT企業でも採用されています。
Javaを得意としていて、react.jsの名前を聞いたこともないITエンジニアはおそらくいないでしょう。
詳しくは後述しますが、特にWebデザイナーなどのユーザーインターフェイス周りに関わりたいと考えているのであれば、react.jsが使えないと、大きなハンディキャップを抱えることになると言っても過言ではありません。
react.jsの技術的特徴
では改めて、react.jsの技術的な特徴を見ていきます。
JavaScriptライブラリと一言で言っても、様々な性質のものがあります。
レンダリングに特化したD3.jsや、VRのためのWebVRといった、時代の要望に応じて新たなライブラリも登場しています。
そういった様々なライブラリがある中で、react.jsはどういった性質を持つライブラリかと言うと、Webサイトのユーザーインターフェイスのためのライブラリです。
もう少しWebシステムに関わるエンジニアらしい表現をするならば、Model View Controller (MVC)のViewを担うライブラリです。
もう少し具体的な言い方をすれば、react.jsを使えば、FacebookやInstagramのようなデザインを持つWebページを作れるのです。
そのため、フロントエンドエンジニアやWebデザイナーなど、ユーザーインターフェイスに関係するITエンジニアの方の場合、利用シーンが多いというよりも、利用できるのが前提になってきているのです。
幸いにして、その話題性から日本語情報も多く、Javaについて基礎的な知識があればインターネットを使った独学での習得も十分可能です。
ちなみに、react.jsのreactとは「反応する」という意味ですが、ユーザーの入力に対してアクションするためのライブラリだからこそ、このような名前になったのかもしれません。
riot.jsとは？
reactとriotはスペルだけ見ると、rで始まりtで終わることもあってか似た印象を与えますが、意味はかなり違います。
reactが“反応する”という意味なのに対し、riotは「反乱」という意味です。
react.jsはFacebookやInstagramの構築例もあるように確かに素晴らしいライブラリです。
しかし、いくつかの理由で不満を持っていたエンジニアたちが「反乱」し、react.jsと似た操作性を持ちながら、react.jsの不満点を改善したJavaScriptライブラリがriot.jsです。
riot.jsはベースになったreact.js同様、ユーザーインターフェイスに関係するライブラリ。
実装例としては、ニッケイこと日本経済新聞社のコンテンツ検索ページや2018年にリリースされたばかりの新進気鋭のイラストSNS「Raiot」が挙げられます。
react.jsよりも登場時期が遅く、またFacebook社のような大企業のスポンサーがついていないためコミュニティが小さいですが、公式ページに日本語が用意されており(多少機械翻訳な感じはありますが、普通に読めます)、react.jsからriot.jsへと乗り換えを検討するエンジニアも多いです。
react.jsとriot.jsの違いとそれぞれできること
react.jsとriot.jsの関係について理解できたところで、それぞれの違いとメリット・デメリットを見ていきたいと思います。
react.jsとriot.jsで共通するメリットとは？
共通するメリットとしては、JavaScriptライブラリのデファクトスタンダードとも称されるjQueryとの比較で、より直観的にソースコードが書ける点が挙げられます。
特にriot.jsはjQueryやreact.jsと異なりDocument Object Model (DOM)やセレクタ、トラバース、イベントといった仕組みを意識する必要はありません。
riot.jsはそれらの仕組みを意識しなくても良いように作られています。
もっとも、状況によってはそれらの仕組みを利用した方が良い場面もあります。
そういった場合は、riot.js はjQueryと共用することが可能なので、必要になったときは適宜jQueryを利用するのも可能です。
また、そうした仕組みを意識する必要があるかどうかの差はソースコードの記述の差にも表れています。
react.jsと比較したときのriot.jsのメリット
①シンプルに記述できる
react.jsとriot.js比較すると、riot.jsの方がよりシンプルに記述できます。
riot.jsの公式サイト(http://riotjs.com/ja/compare/)にて、react.jsとriot.jsのソースコードの比較があるので、興味のある方は覗いてみてください。
react.jsのソースコードに対して、riot.jsがいかにシンプルなのか一目見ただけで分かるかと思います。
単純な扱いやすさという意味では、riot.jsの方が初学者にも理解しやすいのかもしれません。
ちなみにですが、一部のエンジニアがreact.jsを捨ててriot.jsへと移行した理由として、react.jsがバージョンアップを重ねるたびに、より「プロ仕様」へと進化する中で、jQueryに寄ってきて、DOMやセレクタ、トラバース、イベントを強く意識させるようになってきた点を挙げています。
伝統的なjQueryはjQuery、直観的なriot.jsはriot.jsと、最初から違うモノとして扱ってある点がriot.jsのreact.jsに対する特徴の一つと言えそうです。
②数多くあるJavaScriptライブラリの中でも処理速度に優れている
面白いのはriot.jsが直観的でDOMやセレクタなどの仕組みを意識させない、もっと言うとそもそも仕組みを持っていない点は、JavaScriptライブラリとしての動きの軽快さにも影響を与えています。
react.js に比べてriot.jsの方がより軽快に動作し、数多くあるJavaScriptライブラリの中でも処理速度に優れています。
では、react.jsはriot.jsに劣るのか？
これらだけの情報を見るとriot.jsの方がreact.js より優れているように感じる方も少ないと思いますが、react.jsの方が勝っている点も少なくないです。
すでにお伝えした通り、react.jsはFacebook社が提供しているJavaScriptライブラリです。
有力IT企業謹製のJavaScriptライブラリということもあり、非常に話題になりました。
FacebookやInstagramの開発に使われているJavaScriptライブラリと言われると、なんだかとても良いモノに聞こえてきますよね。
実際、トップIT企業が開発に使うに相応しい高い信頼性があり、採用を検討する企業が増えています。
そして、react.jsで開発したいと思う企業が増えれば、当然ながら、react.jsを使いたいと思うエンジニア、react.jsを使いこなせるエンジニアも増えます。
非常にreact.jsのコミュニティは活発です。react.jsに関する日本語情報も簡単に手に入ります。
一方のriot.jsはreact.jsに「反乱」した有志のITエンジニアたちによって形成されたJavaScriptライブラリです。
バックに有名なIT企業がいるわけではありません。資金力も話題性もreact.jsに勝てそうにないですよね。実際、負けています。
日本では日本経済新聞社のコンテンツ検索ページや、自動翻訳サービスのExcite翻訳でお馴染みのエキサイトなどの有名企業の採用例もありますが、react.jsに比べるとriot.jsで構築されたサイトは圧倒的に少数派です。
利用する会社が少ないとなると、riot.jsのスキルを利用とするITエンジニアもおのずと減ってしまいます。
コミュニティの活動もreact.jsより低調で、日本語情報も少ないです。
そういった意味では、現状を見る限りでは、react.jsの方が勉強しやすいですしクライアントへの売りになる可能性も高いと言えそうです。
まとめ
今回はreact.jsとriot.jsというユーザーインターフェイス作成に関連するJavaScriptライブラリについて見てきました。
この二つの成り立ちを考えると、react.jsとriot.jsは兄弟のような関係にあたるのかもしれません。
「時代の寵児に生み出され、プロユーズに進化していくreact.jsとreact.jsの原点に立ち戻ろうとするriot.js」と表現するとドラマティックすぎるのかもしれませんが、どちらも長らく絶対王者だったjQueryの地位を脅かしている注目のJavaScriptライブラリなのは間違いありません。
- 高額案件を定期的に紹介してもらいたい
- 週2日、リモートワークなど自由な働き方をしてみたい
- 面倒な契約周りはまかせて仕事に集中したい
そのような方はぜひ、ITプロパートナーズをご利用ください！
まずは会員登録をして案件をチェック！
