おすすめ書籍はじめにこんにちはnukkyです。Nativeの入門として必要そうなことをおさらいがてらまとめました。Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、Reactを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。Nativeは、プログラミング言語として主にJavaScriptでコーディングをしていきます。そのため、JavaScriptの知識が必要です。JSXとはJSXはJavaScriptにXMLライクのシンタックスを追加する言語拡張です。JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。Nativeでは機能をコンポーネント単位で管理しますが、コンポーネントを使う場合はJSXを使って書きます。いうコンポーネントの中にTextというコンポーネントを置いています。Viewは要素を描画するためのコンポーネントで、HTMLで言うところのdivやspanにあたります。world!</Text></View>JSXに値を埋め込むJSXはタグをそのまま表示するだけではなく、JSXの中にJavaScriptの値を埋め込むことも出来ます。以下のような形で記述します。}このように{}の中に変数などを記述することで、その変数の値をJSXの中に埋め込むことができるようになります。実際の記述は以下のようになります。(<div><h2>{title}</h2><p>{message}</p></div>);}ここで一つ注意して欲しいのが上記JSXをdivタグで囲っていることです。理由としては、renderメソッドは1つのエレメントのみという制約があります。divタグを外してしまうとエレメントが2つになってしまいエラーになってしまいます。属性の値を設定する{}による埋め込みは、テキストコンテンツのみだけではなく他の箇所にも使用することができます。タグの属性の値にも使用することができます。link</a></p></div>);}このようにaタグのhref属性に{}で変数を設定することができます。関数でJSXを作るJSXの値は、変数などに代入して使用するだけではなく、普通の値として様々なところに利用することができます。計算の式や関数、オブジェクトのメソッドなどの中にもJSXは利用できます。関数の戻り値でJSXをreturnすれば、様々なタグを生成する関数を用意することができます。上記のサンプルコードを以下のようにすることもできます。(<div><h2>{title}</h2>{this.returnLinkJsx}</div>);}コンポーネントとはコンポーネントとは、画面に表示される部品のようなものです。表示の内容やデータ、処理などを一つのオブジェクトにまとめたものです。Nativeでは、このように自分で作ったコンポーネントや、もともとあるTextなどのコンポーネントを組み合わせて、画面のUIを組み立てていきます。Nativeのコンポーネントの大きな特徴として、再利用可能であることが挙げられます。アプリにはどの画面にも共通のパーツがあると思いますが、そのパーツをコンポーネントとして一箇所で実装し、他のところから参照することで、同じコードを繰り返して書かずに済みます。新規コンポーネントの作成プロジェクトのsrc/components/sample.jsを作成し以下のコードを記述します。Component</Text></View>);}}これでコンポーネントができました。defaultで宣言したことにより他のモジュールからimportできるようになります。classそのclassがimportされるときにdefaultで呼ばれるクラスになります。'./src/components/sample'defaultをつけない場合クラスを指定してimportします。WorldにSampleクラスをimportして呼び出したいと思います。Sampleのコンポーネントをimportする。App内にSampleタグを追加する。Sampleのコンポーネントをimportする。App内にSampleタグを追加する。/>これだけでコンポーネントの呼び出しが可能になります。Nativeではアプリをコンポーネント単位で管理しますが、Propsとはコンポーネントと外部とのインターフェースであり、コンポーネントに必要な値を受け取ることができます。状態によって値が変わるようなものはStateに任せるため、Propsはimmutableで変更してはいけません。Nativeの標準として提供されるコンポーネントにもPropsは定義されているので、コンポーネントの使用時にカスタマイズできます。自分でコンポーネントを作る際にも、Propsを定義することでカスタマイズ可能な状態にすることができます。{props.name}!</p>;}StatePropsはimmutableでコンポーネントの属性を保管しておくものでしたが、それに対してStateはコンポーネントの状態を表す値を保管するものになります。これは、コンポーネントの現在の状態を扱うためのものです、つまりStateの値を操作することでコンポーネントの状態を操作します。コンポーネントの表示の変更など必須とも言える機能になります。Stateを用意するStateはコンポーネントに「state」というプロパティとして用意されます。この中にStateの値がまとめて保管されます。constructorで値を初期化します。],};}Stateの値を表示する初期化したStateは「this.state.〜」で扱うことができます。</h1></div>);}Stateの値を更新するここからがStateのキモの部分である状態の変更・更新になります。Stateの更新は「this.setState」で行います。Stateの状態を変える時には必ずsetStateメソッドを使って変える必要があります、setStateメソッドを呼ぶとrenderメソッドが必ず呼ばれるので画面の表示の更新もそのまま行ってくれます。</h1></div>);}イベントハンドリング上記のようなコードの場合onClickからメソッドを呼び出したいと思います。その場合は明示的にクラスメソッドをバインドする必要があります。上記のコードを元にconstructorでdoActionメソッドをバインドしonClickで呼び出したいと思います。</h1></div>);}さいごに自分も基礎的な部分の理解がおろそかだったので入門として復習がてら記事にさせてもらいました。Nativeの勉強を続けていき記事にするのでよろしくお願いします。助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。今回は、トリミングなど画像加工を簡単に行えるimage_cropperを使ってみたいと思います。こんにちはsuzukiです。...[C#]Genericsの使い方をまとめてみた。こんにちはsuzukiです。私たちは無料アプリもリリースしています、ぜひご覧ください。下記のアイコンから無料でダウンロードできます。