<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。 Google製のAngularや、そこから分岐した(というと語弊があるけど)Vue.jsと並び、比較的新しい部類の三大フレームワークに数えられ、数あるJavaScriptのフレームワークの中でもよく使われる部類になると思います。 どのフレームワークにも向き不向きがあり適した用途など考察することもできますが、それぞれについて細かくはここでは触れません。 トレンドの移り変わりが激しいといわれるフロントエンドフレームワーク界隈ですが、2016年以降はわりとこの3つに落ち着いている感じもありますね。私はReactが一番気に入ってるので、Reactを使っています。 <h2 id="hbf58b86606">jQueryに代わるフレームワークReact</h2> JavaScriptのフレームワークといえば、jQueryが主流の時代がありました。 というか、jQueryは今でも根強い人気があり、未だに新規案件で採用されるなど注目を集めています。 しかし、問題点や課題が多く、いまどきをうたうプロジェクトなどはReactなど新しいフレームワークの採用事例も増えています。 例えば、<a href="https://qiita.com" target="_blank" rel="noopener noreferrer">Qiita</a>など。 置き換えられるのだから似てるのかな、と思いきやかなり別物です。特にふんわり触っているうちは全く別のものに見えると思います。 jQueryはピュアなJavaScriptを拡張するフレームワークというイメージで、アニメーションが得意分野でした。これがReactに置き換えようという流れは、JavaScriptの歴史の変遷と関連があります。 <h3 id="hbe9ef0117d">jQueryとJavaScriptの歴史</h3> かつてWebサイトといえばサーバからデータをダウンロードしてきて、そのまま表示するだけでした。 時代が変わり、必ずしも静的なWebサイトだけではなくなりました。各ユーザや状態に合わせて動的にWebサイトを書き換える必要が出てきます。 Cookieなどを駆使してサーバサイドでPHPなどを利用する手段もありますが、XMLHttpRequest(Ajax)の登場によってJavaScriptを介してWebサイトがサーバとやりとりすることができるようになりました。これにより、最初のアクセスではWebサイトの中身を受信せず、後からデータを取得する方法も普及していきました。 これを簡単に実装できたのもjQueryが普及した要因の一端だと思います。 <h3 id="hc9c9c46533">jQueryの課題</h3> しかし、Webサイト(Webアプリケーション)をjQueryで実装するには複雑になるほど読みにくくなるという難点があります。 サーバから取得したデータを対象のDOMに反映するのがjQueryの役目ですが、1つのデータについて、書き換える対象のDOM(HTML)とjQueryのスクリプトと、2か所に記述が必要になります。 1件の修正に対して2か所の変更が必要になり、複雑なアプリケーションになるともうわけがわからなくなります。 <h3 id="h248eb0c7f9">Reactの登場</h3> ReactはjQueryとはまったく異なるアプローチで、UIをばらばらの独立したパーツ(コンポーネント)として扱います。細かくコンポーネントを分けることで再利用したり、多層化したりすることができます。なによりReactによりコンポーネントのスクリプトを1か所にまとめることができ、可読性が格段に上がります。仮想DOMにより、データの変更したい部分のみ再レンダリングを行うことで、高速化も実現しました。 <h3 id="hbc784e2cde">Reactの煩雑面</h3> 素晴らしい面が多いReactですが、jQueryに対して面倒な部分もあります。jQueryは基本的にフレームワークのコードを読み込むことで利用可能で、テキストエディタとブラウザさえあれば開発可能です。Reactはnpmを導入したりWebpackやトランスパイラなど周辺環境を揃えるのがまず手間です。 しかもプロジェクトの構成には正解がなく、作っているうちにこれは正しいのかなど疑心暗鬼になります笑 <h3 id="h4d8d357b35">いまどきのReactプロジェクト</h3> 複数のファイルをHTMLで読み込むのではなく、webpackやBabelを使ってひとつのファイルにまとめる方法が主流です。 <h2 id="ha214098e44">まとめ</h2> 何がいいたいのかわからん記事になってしまいました。 とりとめのない記事なので後でまた書き直せるといいな。

Reactを始めてみる

<h1 id="he6c083c2bc">このブログについて</h1>このページはJavaScriptについて日々学んだことを書き留めておこうと思って作りました。アウトプット用のものです。 <h1 id="h04ded3dc1e">自身について</h1>中学の時に、ホームページを作るという授業がありました。文字がmarqueeしたり、音が突然鳴ったり、またgeocitiesなどを使った個人ページが大活躍していた時代でした。授業が面白かった私は、同様にgeocitiesで個人ページを作り、Webで使える素材や音源などを配信していました。(2018/12/5に閉鎖) 高専へ進学し、大学院まで機械を学びましたが、解析に使うプログラムに興味を持ち、卒業研究や修士論文はPCを使った解析系を取り扱いました。Fortranをめちゃくちゃ使いました。 その後、新卒で工作機械メーカーに勤めましたが、趣味のホームページ作りが楽しく、もっと専念したくて辞めてしまいました。 お仕事は機械設計業務でしたが、Web技術を使って業務が楽になるように簡単な調べものツールを作ってました笑これは主にPHPとMySQL、Apacheの組み合わせで動かしていました。同期にも使ってもらって好評でした。 辞めてからはフリーランスプログラマーとして活動(しようと)しています。ホームページの制作が楽しかった延長で、今はWeb技術についてあれこれ調べたり試したりするのが好きです。 昔はHTMLとCSSでベースを作ってから、どうしても動きをつけたい時にJavaScriptを使う、というスタイルでしたが、いま個人製作のアプリはReactをベースにWebpackでJSXとSCSSをまとめちゃってます。サーバサイドにはPHPやNode.jsを使っています。 ちなみに、「あかね」という名前は本名とはなんら関係なく、ドラベースのあかねフライヤーズから取りました笑 <h2 id="h1b8d2f8fd4">そんなこんなで</h2>JavaScriptをちゃんとやろうと思ってからもう二年。いくつかの本やDocumentを読み漁り、いくつかアプリを作ってみましたが、その過程でいくつものエラーに出会い、そのたびに解消していたのですが、何もメモったりしていなかったのでほとんど忘れてしまいました。複雑なエラー解消にはGoogleで調べるのが一番手っ取り早く、たくさんの先人の方々の記録のお世話になりました。今後は私の記録も何かの役に立つかもしれないと思い、ここで公開していけたらなと思います。

ゆったりWeb手帳

気になったことをのんびり書くよ