未分類

React

投稿日:

もう気がついたら1月の半ばで働くまで二週間となっていました。哲学の本を読んでいる場合ではないので明日返しに行ってきます。これからは基本的に勉強した内容をアウトプットすることにします。

Reactとは

Reactはjavascriptのライブラリです。javascriptというのはブラウザが実行するWebページに動的な動きをつけるために記述するプログラミング言語です。最近ではブラウザが実行するクライアント側専用の言語からサーバーとアクセスしてデータベースを使ってやりとりすることができるサーバー側と従来のフロント側の両方をjavascriptで記述することができます。このreactはフロント側に特化したライブラリでより効率的に、素早く処理を行うことができます。Reactの特徴としては指定したhtmlのDOMに新たに記述した仮想DOMの内容をそのままページに反映させることができます。通常のWebページの読み込みはサーバーにページの問い合わせをしてデータを変更してページを1から作り直します。しかしReactの場合は変更したデータの内容に関わっている部分だけを変更することができ、さらにデータの受け渡しをReactの中で完結させることができるのでとても高速にページを変更させることができます。

DOMとは

DOMはhtmlを階層的に取り扱う仕組みのことを言います。ブラウザがhtmlで記述された文字を読み取って文字列としてページに反映させるのですが、DOMを採用することによってどの部分がタイトルでどの部分が中身の部分でユーザーが入力する部分はどこで行われるかなどが瞬時にわかります。このDOMの仕組みを利用して検索エンジンはSEOを行っています。さらにcssでhtmlの文字に装飾する場合もDOMツリーの要素を選択することによって簡単に実現できます。javascriptはそのツリーの要素を指定して動的な動きをつけるのです。

Reactの設計

Reactはコンポーネントを使って変更する内容を記述した要素を作り、そのコンポーネントを組み合わせてDOMツリーに組み込みます。この時に一つのコンポーネントは一つの要素を返すように記述するのですが、その時に使われるのが仮想DOMツリーです。

仮想DOMツリーとは

React独自の概念で、htmlで記述するDOMツリーの内容に限りなく近い記述で要素を書くことができます。javascriptでもjqueryというライブラリを使って簡単にhtmlの要素にjavascriptで記述した新しい要素を組み込むことができるのですが、Reactはもっと簡単でわかりやすいです。facebook,instagram,twitterなどモダンなアプリケーションにはほとんどReactが登場します。

まとめ

Reactの外観はなんとなく掴めてきたのであとは自分で考えてアプリケーションを作成できるようになりたいです。最近は参考書をそのまま書くだけだと全く見にならないことがわかったので参考書をそのまま写すことはやめ、自分でやりたい実装を考えてそれに必要なものを参考書から参考にするということをしていきます。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

サージェントペッパーロンリーハーツクラブバンド

ビートルズ8作目のアルバムです。名盤ランキングでは必ず上位にランクインする名盤なのですが、久しぶりに聴いてやっぱり良かったので少しそれについて書きます。今回で5回目くらいだと思うのですが、聴くたびに好 …

no image

歌舞伎3

 今日は歌舞伎の動画を見ました。20分くらいでしたが、ちゃんと見たことがなかったので面白い体験で、心がゾクっと震える場面がありました。歌舞伎の本も読んでみたのでなお楽しめたのかも分かりません。どこの場 …

no image

砂漠と文明

 今日は脳味噌がなぜかパンパンだったのでダラダラしていました。新しい本を読み始めたのですが、これが「砂漠と文明」という本でして優しい感じの本かなと思っていたのですが、内容が哲学チックで読むのが大変です …

no image

最近よく寝ています

 東京から帰ってからというもの睡眠時間が多くなってきました。私の平均睡眠時間は八時間程度なのですが、東京から帰ってきてから毎日10時間寝ています。もうすぐ冬眠するかもわかりません。さて今日は朝起きて「 …

no image

css

今日はcssのデザインに苦戦していました。今までcssを使ったデザインの設計をしてこなかったのでどのように見本のようにデザインを作ればいいのかあたふたしていました。午前中はモチベーションが上がらずまず …