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

 

<<前のページへ

Project structure and resources

Where do I start writing the code?

lib /main.dartファイルから始めます。 Flutterアプリを作成すると自動生成されます。

// Dart
//lib/main.dart
void main(){
 print('Hello, this is the main function.');
}

Flutterでは、エントリポイントファイルは「projectname」/lib/main.dartであり、実行はmain関数から開始されます。


How are files structured in a

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/9/25 HTML_QuickFormのバリデートのjavascript関数について、引数としてthisを渡す

pearのHTML_QuickFormを使っていて、addRuleメソッドで引数としてclientを指定するとjavascriptでバリデートを行う。そのソースコードを見たところ、


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Typecontent=”text/html; charset=UTF-8“>
<title>Testing PEAR HTML_QuickForm</title>
</head>
<body>
<script type=”text/javascript“>
//<![CDATA[
function validate_frmTest(frm) {
var value = ”;

2018/9/8 コメントまとめ html,javascript,php

<script type="text/javascript">
<!-- JacaScript未対応ブラウザ対策
// 実際には入力チェックなどするでしょ
var today = new Date();
var month = today.getMonth() + 1;
var day = today.getDate();
document.write("今日は" + month + "月"+ day + "日です。");
// JacaScript未対応ブラウザ対策 -->
</script>

javascript未対応ブラウザの場合htmlコメントが無いと赤文字部分がそのまま表示されてしまうが、上記のようにhtmlコメントアウトすると赤文字部分は表示されない、ということですね、はい。

2018/9/6 プリミティブ・数値リテラル・メソッドについて javascript

十一章第六回 プリミティブについて2

特になし。ほとんど定義なので理解するだけ。

<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>

<script type=”text/javascript”>

console.log(“3/0= “+3/0); // Infinity
console.log(“-3/0= “+(-3/0));
console.log(“Infinityの型は “+(typeof (1/0))); // “number”
console.log(“Infinity-Infinity= “+(Infinity-Infinity)); // NaN
console.log(“Infinity/Infinity= “+(Infinity/Infinity));
console.log(“0/0= “+(0/0));
console.log(“”);

console.log(‘parseInt(“123px”)= ‘+(parseInt(“123px”))); // 123

console.log(‘Number(“123px=”)= ‘+(Number(“123px”))); // NaN…

2018/9/5 Rangeについて javascript

<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>

<p id=”one”>1abcdefghi</p>
<p id=”two”>
2abc
<strong>
強い
</strong>
gh
</p>
<p id=”three”>3abcdefgh</p>
<br><br><br>

<p id=”vanish”>消えろ!!</p>

<script type=”text/javascript”>
var rng1=document.createRange();
var rng2=document.createRange();
var rng3=document.createRange();
var rngs=document.createRange();
var p1=document.getElementById(“one”);
var p2=document.getElementById(“two”);
var p3=document.getElementById(“three”);
var ps=document.getElementsByTagName(“strong”)[0];…

2018/9/3 css関連とイベント関連 その組み合わせ javascript

五章第二回 CSSの構造

5章自体特に問題はない。こうすればこんなことできますね、的な話。それはそれでいいんですが、イベントを組み合わせて、「クリックしたらスタイルが変わりますね、おもしろいですね」みたいなのを作る。

イベントについては3章を参照。

三章第一回 イベントプロパティ


<html>
<head>
<title>test</title>
<style type=”text/css” id=”divsheet”>

div {
background-color: black;
}
p {
background-color: yellow;
}
</style>
<style type=”text/css” id=”bodysheet”>
body {
background-color: pink;
}
</style>
</head>

<body>
<p>testtest</p>
<br>
<br>
<p onmouseover=”mywrite2();” onclick=”reset2();”>真ん中のp</p>…

2018/9/2 ゲッターとセッターについて javascript

ゲッターとセッター(プロパティ)を定義するには?[JavaScript]

アクセサプロパティ(getterとsetter)

上記ページは具体的なゲッタ・セッタの使用例があるのでそれを理解するところから始める。

具体例でゲッタ・セッタを使うこと自体はできるが、なぜそれを使う必要があるのか?どこで使うべきなのか?がさっぱりわからない。というのも、別にゲッタ・セッタを使わなくても、

obj.prop のように書けばアクセスして値を変更することができるのだが、なぜそれではなく、「ゲッタ・セッタ」を使うのか?


たかがsetter、されどgetter。JavaSciprtでsetterとgetterを実装する4通りの方法

ここで新たな疑問。上記ページの最初にあるのがこのコード。

function A() {
    var a;
    this.getA = function () {
        return "a is " + a;
    };
    this.setA = function (val) {
        a = val;
    };
}

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 …

2018/08/26 mapとreduceについて javascript

すこし脱線するがmapとreduceについて。

JavaScriptプログラマーならMap()とReduce()で関数型プログラミングを始めてみない?

【JavaScript入門】配列でmapを使う方法(Mapオブジェクトも解説)

とりあえず侍エンジニア塾でmapを調べる。

基本

元の配列( [‘a’,’b’,’c’] )の各要素に対してコールバック関数で定義した処理を適用し、適用後の各要素を持つ配列を返す。

for文、forEach文を使えば同じ処理をできるが、コードがシンプル、宣言する変数の数が少なくて済む(名前衝突が起きる可能性が減る)のがメリット。

map()を実行しても元の配列(上記例なら[‘a’,’b’,’c’])はそのまま(変わらない)。コールバック関数の第三引数を使えば元の配列を操作することも可能。詳しくは侍エンジニア塾