タグ: javascript

投稿日:

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 …

投稿日:

javascript、コンストラクタ、new、thisについてまとめ

1.コンストラクタなしでのthis

ソース例

var jikoshokai=function(){
console.log(“My name is”+this.name+”!!”);
}

//勇者オブジェクトのインスタンスbraveman1作成
//勇者オブジェクトのインスタンスのnameプロパティに代入
//勇者オブジェクトのインスタンスのjikoshokaiメソッドに上で
//作った関数オブジェクトを代入
var braveman1=new Object();
braveman1.name=” 勇者no1 “;
braveman1.jikoshokai=jikoshokai;

//勇者インスタンスのjikoshokaiメソッドを呼び出し。
//この中のthisは勇者インスタンスbraveman1を指す。
braveman1.jikoshokai();

オブジェクトのメソッドが呼び出されたときに、thisはそのオブジェクト自体を表す。

 

2.コンストラクタの中のthis

参照(https://www.sejuku.net/blog/25328)

ソース例

//コンストラクタPersonを定義↓

function Person(name, age) {
  this.name =
…