2020/11/6 Flutter for React Native developersの訳パート1

このドキュメントは、既存のRN知識を適用してFlutterを使用してモバイルアプリを構築しようとしているReact Native(RN)開発者を対象としています。 RNフレームワークの基本を理解している場合は、このドキュメントをFlutter開発の学習を開始する方法として使用できます。

このドキュメントは、ジャンプしてニーズに最も関連する質問を見つけることにより、クックブックとして使用できます。


Introduction to Dart for JavaScript Developers

JavaScript開発者向けのDartの紹介

React Nativeと同様に、Flutterはリアクティブスタイルのビューを使用します。 ただし、RNはネイティブウィジェットに変換されますが、Flutterはネイティブコードまでコンパイルされます。 Flutterは画面上の各ピクセルを制御し、JavaScriptブリッジの必要性によって引き起こされるパフォーマンスの問題を回避します。

Dartは習得が容易な言語であり、次の機能を提供します。

  • Web、サーバー、およびモバイルアプリを構築するためのオープンソースのスケーラブルなプログラミング言語を提供します。
  • ネイティブにAOTコンパイルされたCスタイルの構文を使用するオブジェクト指向の単一継承言語を提供します。
  • オプションでJavaScriptにトランスコンパイルします。
  • インターフェイスと抽象クラスをサポートします。

JavaScriptとDartの違いのいくつかの例を以下に説明します。



Entry point

JavaScriptには、事前定義されたエントリ関数はありません。エントリポイントを定義します。

// JavaScript
function startHere() {
  // Can be used as entry point
}

Dartでは、すべてのアプリに、アプリへのエントリポイントとして機能するトップレベルのmain()関数が必要です。

// 

2019/5/9 react,コンポーネントへのプロパティの渡し方まとめ

①基本

渡される側(コンポーネント側)

export default class MyType extends Component{
  render(){
    console.log(this.props.value);
    return <p>結果はコンソールを確認</p>;
  }
}

渡す側(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MyType from './MyHello';

ReactDOM.render(){
  <MyType value={'鈴木'}/>
  ,document.getElementById('root')
}

2018/8/27 Arrayまとめ javascript

old_arrayの一番最後にvalue1,value2,・・・を配列要素として結合させた新しい配列を返す。(old_array自体はそのまま。)

var myArray = new Array(‘1’, ‘2’, ‘3’);
newArray = myArray.concat(‘a’, ‘b’, ‘c’);

console.log(myArray);  //[“1”, “2”, “3”] console.log(newArray);     //[“1”, “2”, “3”, “a”, “b”, “c”]


配列arrの各要素を繋げた文字列を返す。separator(区切り記号)を指定すればその記号で繋げる。実行しても配列arrはそのまま


配列arrayの末尾にelement1, …, elementNをarrayの要素として追加する。

配列arrayが要素追加後の配列に変化する

返り値は要素追加後の配列の要素数。

var myArray …