Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (37,723Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (19,150Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (18,614Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (16,714Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (16,095Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,968Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,565Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,925Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,291Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (11,266Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (11,115Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,732Views)
  • 翻訳機能をWebサイトに埋め込む方法 (10,513Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,333Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,914Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,922Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,896Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,612Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (6,092Views)
  • 【Featherlight.js】テキストをライトボックスに表示できるjQueryプラグイン【jQueryプラグイン】 (5,927Views)
  • React学習メモ 第2回 「Reactのコンポーネントの基本を知る」

    2018年06月14日(木)

    この記事で学ぶこと

    この記事では、Reactにおけるコンポーネントの基本を学習し、単純なコンポーネントを作成し、配置できるようになることを目指します。


    コンポーネントとは

    「コンポーネント」は部品という意味で使われます。
    Reactでは、Webサイト上にて複数のコンポーネントを組み合わせてアプリケーションを構築していきます。
    一度作成したコンポーネントは、JSX内で独自のhtmlタグのように利用できます。

    この記事では、Reactにおけるコンポーネントの作り方と、利用方法を学びます。

    関数を使ったコンポーネントの作り方

    サンプルコード
    h1要素とp要素を含んだdivを出力するコンポーネントを作成し、それをidがrootの要素内に配置するサンプルになります。
    function Hello (props){
    	return <div>
    			<h1>{props.title}</h1>
    			<p>{props.parag}</p>	
    		</div>
    }
    
    引数の連想配列であるpropsのtitleプロパティとparagプロパティに与えた文字列を、h1、およびpに配置し、それらを大きくdivでくくり、それを戻り値(return)とする、というコンポーネントです。
    これに関数名=コンポーネント名として、Helloと名付けます。

    コンポーネントの使い方

    上記で作成したコンポーネントはJSXタグのように使用することができます。
    下記、pタグやh1タグと同じような使用方法でHelloがhtmlタグのように使われていることがわかります。
    const dom = <div>
        <Hello title="タイトル" parag="あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。" />
        </div>
        ReactDOM.render(dom,document.getElementById('root'))
    
    これは、下記のように関数を呼び出しているのと同じ意味になります。
    Hello ({“title”:”タイトル”,”parag”:”あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。”})
    

    コンポーネントを組み合わせる

    上記のh1とpを別々のコンポーネントとして定義し、それを組み合わせるコンポーネントを書いてみます。

    クラスを使ったコンポーネントの作り方

    複雑なコンポーネントを作成するにはECMAScript2015で追加されたclass構文を用います。

    コード解説

    クラス作成 class TitleParag extends React.Component{…}

    TitleParagというクラスを作成します。
    このクラスの継承元をextendsキーワードにて、React.Componentに指定しています。
    言い方を変えると、TitleParagはReact.Componentの機能を引き継いだクラスということです。

    renderメソッドの定義 render(){…}

    renderメソッドは、コンポーネント描画時(コンポーネントがはじめに生成されるタイミングと、コンポーネントが更新されるタイミング)に自動で呼び出されるメソッドです。
    renderメソッドの返り値(return)でコンポーネントの表示内容を指定します。このサンプルだと下記の内容になります。
    <div>
                <h1>{this.props.title}</h1>
                <p>{this.props.parag}</p>
              </div>
    
    「this.props.title」=この(this=TitleParagクラス)インスタンスのpropsオブジェクトのtitleプロパティという意味。

    コンポーネントの使用

    const dom = <TitleParag title="タイトル" parag="パラグラフ" />
        ReactDOM.render(dom,document.getElementById('root'))
    
    関数の時は関数名だったコンポーネント名が、クラス名となります。
    propsで受け渡すオブジェクトが、titleプロパティが”タイトル”という文字列、paragプロパティが”パラグラフ”という文字列になります。
    これを関数の時と同様に、ReactDOMオブジェクトのrenderメソッドによって、指定の箇所、この場合だとid名がrootな要素に配置されます。

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.