<p>Flutterを触り始めました。</p>
<p>めっちゃいいです。１週間でアプリ出して、AppStoreとPlayStore両方申請出して、もちろんAppStoreにリジェクトされ、PlayStoreに無事リリースできました。</p>
<p>個人的な感想:</p>
<h3 id="1-dartが使いやすい。">1. Dartが使いやすい。</h3>
<p>Dartはecma標準で、typescriptの経験あれば、すぐなれる。vscodeの補完でサクサク書ける。JavaScriptと違って、nullしかない。typescriptを書くとき、null, undefined, unknown, never。。。もう死にたい。</p>
<h3 id="2-react-nativeより、揺れがなく、レンダリングが安心">2. React Nativeより、揺れがなく、レンダリングが安心</h3>
<p>React Nativeでアプリ開発したことあります。</p>
<p>けどめっちゃ大変で、なぜか言うと、web側の知識を流用するけど、微妙に違う。たとえばstylesheetの書き方、unitなどだいたいいけるけど細かいところはダメとか。</p>
<p>またandroidとiOSそれぞれのapi、もう地獄。</p>
<p>Flutterなら、完全に新しい王朝で、webの知識は覚えなくて良い。Flutterを書き始めると、頭の中のスイッチをオンにすれば、もうややこしくない。　それでlow level apiから作ってきたヤツで、AndroidとiOSのAPIがそれぞれになるのはもうない。これは最高。</p>
<p>自分はAndroid アプリをexportしただけ、完璧に大丈夫。</p>
<h3 id="3-flutter-webがもうちょいできたら、パーフェクト">3. Flutter Webがもうちょいできたら、パーフェクト</h3>
<p>Flutter Web今開発中だが、もしできたら、もうReact いらん！</p>


旧mac浸水しちゃって　充電できなくなった

しばらくしたらなおるとおもいきや　全然ダメ

アップルにもっていったら　修理には完全にだめで少なくても15万かかるって諦める

なので新品買いました　m1 

まあ来年新しい出るけど　流石に作業道具なので
1日でも早く使いたい

m1さすが　どんなソフトを開いても音が出ない　13インチちょっと小さいけど使い慣れたら全然平気

よかった

新しいMac M1を入手！

前回の記事で useStateはどうやって働いているのか、わかりやすく説明しました。今回はuseEffectを説明します。

https://zanp.life/js/544

まだ読んでいない方は、↑の記事をご覧になってください。

### 下準備

個人的には、hooksはCache見たいなもの。key-value的なcacheじゃなくて、実行順序に基づいてのcache システム。

では、`useEffect`はどう動いているのか、まずuseEffectのtypeを見ましょう。

```js
function useEffect(effect: EffectCallback, deps?: readonly any[]): void
```

要するに、depsが変わったら、実行される。

### show me the code

前回のuseStateのコードを見よう。

```js
const React = {
  data: [],
  currentIndex: 0,
  useState(initValue) {
    const index = this.currentIndex;
    // dataないなら、引数の初期値を挿入
    if (this.data.length <= index) {
      this.data.push(initValue);
    }

    this.currentIndex = index + 1;

    //値とsetterを返す
    return [
      this.data[index],
      newValue => {
        this.data.splice(index, 1, newValue);
      }
    ];
  },
  // indexをreset
  resetIndex() {
    this.currentIndex = 0;
  }
};
```

そちらに各hookにはdataあり、そのdataにdepsを保存すれば、useEffectが作れます。コードは大体こんな感じ

```js
useEffect(callback, deps) {
    const index = this.currentIndex;
    // depsが変わったら、callbackを実行する
    const prevDep = this.data[index];
    if (!prevDep || deps.some((val, index) => val !== prevDep[index])) {
      callback();
    }
    this.data[index] = deps;
    this.currentIndex = index + 1;
  }
```

コードがシンプルで、テストしてみましょう. Counterに`useEffect`を追加する。

```js
const Counter = () => {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("useEffect is called");
  }, [count]);
  return {
    // click をmockする
    click() {
      setCount(count + 1);
    },
    render() {
      return count;
    }
  };
};
```

これでrenderをシミュレーションする
```js
console.log("1st");
let counter1 = Counter();
counter1.render();

console.log("2st");
React.resetIndex();
counter1 = Counter();

console.log("3st");
React.resetIndex();
counter1.click();
counter1 = Counter();
```

1回目ではcallback実行されて、2回目はcountが変わらなくて、callbackが実行されない。3回目ではcountが変わったので、callbackはもう一回実行される。

以上は予想だけだが、consoleを見ると、確かにこうなっている。

![](https://cdn.zanp.life/img/s/origin/ickzZ5o8Tnwo1Z1OPeD9v72c73zxP6Z5_890x212_1570635862449.jpg)

これでuseEffectも理解できました、次回はuseContextをみましょう。お楽しみに

React useEffectの働き方

Reactでプロジェクトを開発するため、Component単位でソースを分けるのはすごくいいです。

でもその時、ドキュメンテーションはどうやっていますか？エンジニア以外のメンバーに見せるために、コンポーネント一覧の画面を用意しないとですね。例えばそれぞれの属性とか、色々データーのヴァリエーションとか。

これは、結構、めんどくさい。でも[storybook](https://github.com/storybooks/storybook)が助けてくれるので、見てみましょう

[snippet:adinarticle]

## install storybook

例えReact プロジェクトで、`components/Button.js`にはこんなコードとしよう：

```js
import React from 'react';
import PropTypes from 'prop-types';

function Button(props) {
    const {children, ...other} = props;
    return <button {...other}>{props.children}</button>;
}

Button.propTypes = {
    size: PropTypes.oneOf(['small', 'big'])
};

export default Button;

```

[公式ドキュメント](https://storybook.js.org/basics/guide-react/)にしたがってインストールする:

```
npm i --save-dev @storybook/react
```

package.jsonにコマンドを追加する。
```
{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

```

## storybookをコンフィグ

まず`.storybook/config.js`を追加する：

```js
import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);
```

`stories`にある全てのstoryを全部loadする意味。

## storyを追加

`strories/`の下に`index.js`を追加する

```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
storiesOf('Button', module)
  .add('with text', () => {
    return <Button >Arunoda Susiripala</Button>
  })
  .add('with some emoji', () => (
    <Button ><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));   
```

```
> npm run storybook
```


![](https://cdn.zanp.life/img/s/origin/YsKdV8WYljZSnmK6zGUZNycYtf46BS6y_3008x1892_1536423086411.jpg)

見ればわかるが：

1. サイドバーにstory一覧がみれる
2. 右側にstoryの中身を表示する

## knobs
knobは引き手の意味、つまり表示内容を操作できるのね
直接コンポーネントを弄りたい場合は、プラグインを使ったらいい

```
npm install @storybook/addon-knobs --save-dev
```

`.storybook/addons.js`にプラグインを入れる:
```
import '@storybook/addon-knobs/register';
```

最後にstoryの中にプラグインを使う。
```js
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with text', () => {
    const name = text('Name', 'Arunoda Susiripala');
    return <Button onClick={action('clicked')}>{name}</Button>
  })
```

![](https://cdn.zanp.life/img/s/origin/F73NdsQhkumWqDknXKnNTLDMwFQOmxCl_1912x1188_1536423310084.jpg)


knobs panelが追加されるのがわかりました

## PropType

react componentのpropsはどう処理する？まずButtonのpropsを定義しましょう

```js
import React from 'react';
import PropTypes from 'prop-types';

const fontSize = {
    small: '12px',
    big: '16px'
};

function Button(props) {
    const {children, ...other} = props;
    return <button {...other} style={{fontSize: fontSize[props.size]}}>{props.children}</button>;
}

Button.propTypes = {
    size: PropTypes.oneOf(['large', 'big']),
    color: PropTypes.string
};

export default Button;
```

storyにも変更を入れる
```js
import { withKnobs, text, select } from '@storybook/addon-knobs';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with text', () => {
    const name = text('Name', 'Arunoda Susiripala');
    const size = select('size', ['large', 'small']);
    const color = text('color', 'green')
    return <Button onClick={action('clicked')} size={size} color={color}>{name}</Button>
  })
```

これで、`size`, `color`, `name`は全部編集できるようになりました。


## snapshot test

まず普通にunit testをやる時:

1. jest enzymeを使って、unit testを書く
2. jestで[snapshot test](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html)をやる

まずstorybookがない時のsnapshotのやり方をみてみましょう
```
npm install --save-dev jest react-test-renderer babel-preset-env babel-preset-react
```

packae.json
```
"scripts": {
    "test": "jest --no-watchman",
    "storybook": "start-storybook -p 9001 -c .storybook"
},
```


test spec, `__test__/Button.test.js`を追加する

```js
import React from 'react';
import Button from '../components/Button';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Button size="large" color="green">sunderls</Button>)
    .toJSON();
    expect(tree).toMatchSnapshot();
});

```

presetをbabelrcに追加しないと、jestがtest specをtranspileしてくれない。
```
{
    "presets": ["env", "react"]
}

```

`npm run test`を実行すると、`__test__`の下に`__snapshots__`が追加される。中にはbookのtest snapshotがある。


![](https://cdn.zanp.life/img/s/origin/nEkNRcRRyM91ur9rtpQNAsadziWXqumj_2606x854_1536423577310.jpg)


もう一回`npm run test`を実行すると、↑のsnapshotを比べることになる。たとえばButtonの`20px`をうっかりと`21px`にしちゃった場合、run testでエラーが吐かれる。とっても便利。（dynamic testingするときは別の話ですが)

![](https://cdn.zanp.life/img/s/origin/Gtc7O3VafXWiUiTyOt6fA3vwqchjtFFT_1476x436_1536423723186.jpg)

storybookに戻ります。storybookの書き方はtest spec に似てるのはお気づきでしょうか。同じくcomponentに必要なpropsをいれてinstance化としてる。そうであれば、ロジックが共有できそう。

`storyshots`ってプラグインをインストール
```
npm i -D @storybook/addon-storyshots
```

`storyshots.test.js`を追加
```js
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({});
```

![](https://cdn.zanp.life/img/s/origin/yuMTCgvNbAT6CBBsI23ICMtbvZ2t8MfW_1814x786_1536423839949.jpg)

`npm run test`を実行するsnapshotが2個追加される。Buttonの`20px`を`21px`にすると、エラーが2個吐かれる。

![](https://cdn.zanp.life/img/s/origin/eYNHPq1tyxomwgpOB0o6UMbIwLKnUwjc_1438x1408_1536423923217.jpg)

snapshotを更新するときもあるので、package.jsonでコマンドを追加すれば
```
 "update-snapshot": "jest --updateSnapshot --no-watchman"
```

うん、便利ですね。

## サマリー

以上storybookの紹介でした。いかがでしょうか。自分のプロジェクトは結構使っていい感じでしたので、よければぜひ試してみてください。

react + storybookを試してみた

面白かった

行ったらすぐおにぎりとお酒が提供されて、良かった

メルカリに行ったのは初めて、すごくいいところだった

@uhyo_ さんの発表面白かった、全体的に受けが良かったね。

あんまり知っている方居なかったが、v8にコントリビュートしている方と雑談していた

もっともっと参加したらいいね。なんか技術より、人脈が大事だと感じて始めた

TypeScript meetup #3に参加に行ってきた　六本木ヒルズにあるメルカリで

If you are preparing for a FrontEnd interview, you might find it hard to prepare because there are scattered information across the Internet.

Now comes the rescue, https://bigfrontend.dev

## Coding Problems with online judge

Yeah. just like LeetCode, BigFrontEnd focuses on Front End problems.

## Interview questions

We collect the frequently asked questions for you to prepare

## System Design / Product Design

These kind of question play more and more import role in your acessment.


Hope you can get your dream off! Let's start coding https://bigfrontend.dev



BigFrontEnd.dev - a good place to practice FrontEnd skills

ようやく hooks を始めた、ちょっと慣れに時間がかかりそうけどね。
今まで component 思考が強すぎで、まだ変えられない。

これはから useState はどう動くのか見てみよう

> この記事はすごくいいです。おすすめ　https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/

### 1. data -> ui

簡単な counter を作ろう。これは Component とします。

```js
const Counter = () => {
  let count = 0;
  return count;
};
```

シミュレーションなので、count を返す。まあ、実際 React が色々やっているが、この場では気にしない。
OK、ここの Counter は確実に 0 を render する、毎回毎回 0 を出力する。じゃどうやって動的にする？

### 2. closure

無論、Counter の中に`let count`をするとダメですね。実行されるたびに 0 と初期化されて、gc される。

Counter の外へ出さないといけない。以下のように？

```js
let count = 0;
const Counter = () => {
  return count;
};
```

これもダメですね。複数の Counter があると、唯一の count になるので。

欲しいのは、違う Counter ではそれぞれの変更可の count を持つこと。

なので、count は必ず Counter の外、しかも唯一ではない。なんか Cache みたいな？function を作りましょう。

この function で満たす条件は

「同じとこから呼ばれたら、前回の値を返す。初回だったら初期値を返す」

こんな感じ

```js
const giveMeACount = () => {
  // 呼ばれたことあるかどうか？
};

const Counter = () => {
  let count = giveMeACount();
  return count;
};
```

### 3. でも、呼ばれたかどうかはどう判断する？

これは無理ですね。Counter はただの計算をやっているので、this がない。
なので、giveMeACount がわかるのは、「誰が読んだのかではなくて、何回め呼ばれただけ」。

UI に対しては、ただの計算になるので、どこに giveMeACount が呼ばれるのは stable のはず(大体はね、実際は絶対色々やっているが、一旦これで行きましょう、時間あったらまた調べます。)

OK，コードを変えよう。呼ばれる順番に基づいて cache する。

```js
const Cache = {
  data: [],
  currentIndex: 0,
  giveMeACount(initValue) {
    const index = this.currentIndex;
    // dataないなら、引数の初期値を挿入
    if (this.data.length <= index) {
      this.data.push(initValue);
    }

    this.currentIndex = index + 1;

    //値とsetterを返す
    return [
      this.data[index],
      newValue => {
        this.data.splice(index, 1, newValue);
      }
    ];
  },
  // indexをreset
  resetIndex() {
    this.currentIndex = 0;
  }
};
```

Counter も更新する

```js
const Counter = () => {
  const [count, setCount] = Cache.giveMeACount(0);
  return {
    // click をmockする
    click() {
      setCount(count + 1);
    },
    render() {
      return count;
    }
  };
};
```

これで、複数の Counter の render をシミュレートしましょう

```js
let counter1 = Counter();
let counter2 = Counter();

counter1.render(); // 0
counter2.render(); // 0

counter1.click(); // clickを発火

Cache.resetIndex(); // render終わったら、rerenderを準備するため indexをreset

Counter().render(); // 1 !!!!!
Counter().render(); // 0
```

これで、呼ぶ順番に動的な値が cache できるようになりましたね。

### 4. `useState`に変名

見るとわかるが、`Cache.giveMeACount`は共通の util として使え回せる

名前を変えよう

```js
const React = {
  data: [],
  currentIndex: 0,
  useState(initValue) {
    const index = this.currentIndex;
    // dataないなら、引数の初期値を挿入
    if (this.data.length <= index) {
      this.data.push(initValue);
    }

    this.currentIndex = index + 1;

    //値とsetterを返す
    return [
      this.data[index],
      newValue => {
        this.data.splice(index, 1, newValue);
      }
    ];
  },
  // indexをreset
  resetIndex() {
    this.currentIndex = 0;
  }
};

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return {
    // click をmockする
    click() {
      setCount(count + 1);
    },
    render() {
      return count;
    }
  };
};
```

oh yeah、useState の誕生！

### 5. まだまだ全然足りないけど

これで useState の仕組みはなんとか理解できましたかもね。React ではもっと複雑のロジックをやっているともうけど、例えば resetIndex のタイミング、setter で rerender の trigger, reconsile する時の index と data の処理など。

まあ、前より`useState`への理解が深まったかなと思います。いかがでしょうか。


React Hooks - useStateはどうやって動いているのか、中身をざっくり解説する

Searched on the internet, and here is a memo, so that anyone could do interview preparation based onti.

1. run time for search algorithms
2. prototype inheritance
3. 'this'
4. closure
5. var vs const vs let
6. DOM tree
7. graph algorithm
8. system design -> edge case, performance issues, 
9. behavorial -> "10 STAR questions to answer"
10. map, forEach, apply, call, 
11. Array vs Object
12. Flatten Array, Create Emitter
13. Observable
14. optimize a function
15. Explain the concept of ES6 Promises to a 5-year-old
16. What are the advantages of using ES6 maps over objects? What about using ES6 sets over arrays?  
17. studying JS's built in data structures and their associated functions (i.e. map, forEach, reduce for an array).
18. 
  ```
  Given input:
  // could be potentially more than 3 keys in the object above
  items = [
  {color: 'red', type: 'tv', age: 18},
  {color: 'silver', type: 'phone', age: 20}
  ...
  ]
  excludes = [
  {k: 'color', v: 'silver'},
  {k: 'type', v: 'tv'},
  ....
  ]
  function excludeItems(items, excludes) {
    excludes.forEach(pair => {
        items = items.filter(item => item[pair.k] === item[pair.v]);
    });
    return items;
  }
  1. Describe what this function is doing...
  2. What is wrong with that function ?
  3. How would you optimize it ?  
  ```
19. Why Facebook? Why Front End? Tell about a project you had and how you solved it? Tell about a conflict you had at work and how you dealt with it?
20.  Given two identical DOM tree structures, A and B, and a node from A, find the corresponding node in B.  
21. Given a picture, how would you hide/show a child picture on hovering on this parent?  
22. How would you ensure clicking on this picture would go to a specific link?  
23. How would you ensure the child is positioned in the top right of the parent picture?  
24. Given an array, return it's flattened structure(skip objects)  
25. If you have 500 revisions of a program, write a program that will find and return the FIRST bad revision given a isBad(revision i) function.  
26. difference between == and ===
27. difference between block and inline 
28. 
   ```
   Given a grid of characters output a decoded message. The message for the following would be     IROCKA. (diagonally down right and diagonally up right if you can't go further .. you continue doing        this)
    
    I B C A L K A
    D R F C A E A
    G H O E L A D  
    ```
29. just know your positioning, relative, static etc know the differences inside out
30. If you were building a search tool and wanted search results to pop up as you typed but the server call was taxing, write a function that gets called on every key down but calls the server when the user stops typing for 400ms.  


Facebook FrontEnd Interview Questions

カルビーのうすしお味のポテチはオレのイチオシだ、
そのカルビーが出しているそら豆にも最近ハマっている。

塩味で、ちょうどいい食感あと豆の幸福感。

最高。

ミーノ　そら豆　美味しい！！

初めていちご淡雪を食べる。

見た目はめっちゃ可愛い、食べたくなる。

味は思った通り浅いけど。

淡雪 味も浅いが見た目が可愛い

初心者としてテクニカルの入門映像をみたら、試しにUSD/jpyの分析をする

## 長期トレンドはドル安

![](https://cdn.zanp.life/img/s/origin/Xv1KvCRJG8NyWdavi0hnPyltBH1ofK1d_2068x1348_1613913863695.jpg)

101を目標に、今105からまだ4パーセントのさがりがありそう

106.1付近に支持線あり　さらに108の支持線あり

### 直近1年もさがりトレンド


![](https://cdn.zanp.life/img/s/origin/cddOqUpGu8oV2yEbtwc52jOGqzImGEHr_2052x1294_1613914704867.jpg)

支持線は106， 突破さらたら107に

104.4付近は目指すところ、行けたら103.2

## 六ヶ月


![](https://cdn.zanp.life/img/s/origin/NyaKlqd6QOlXnH4i6EHYwWk1QVWfcf2x_2000x1338_1613915076540.jpg)

2021年に入ってから、ドル円が下がっている、まだ止まっていない

105.40は支持線、もし破れたら、104.6台が見えてくる

上がっても106台の上にいられるか様子見

## 五日間　さがりトレンド

![](https://cdn.zanp.life/img/s/origin/IXKrQnOHGZTowshmibFLGUcY28Sfppm3_2078x1144_1613915378996.jpg)

19日の回復は一時的なもので、20日の高値もさがりトレンを壊していない

なのでまだ下がる 105.2を下回ったら、下がるだろう 次は105台に戦う

105を下回ったら、六ヶ月の上がりトレンドもなくなるかも

## 1日も下がる一方

![](https://cdn.zanp.life/img/s/origin/PQDEXEzHPbcxrGISmQ6SXcOTrOocaMfC_1996x1346_1613915618607.jpg)











## 



FX再挑戦　テクニカル分析試し　USDJPY

安易に動かないのはまだ証明された

まあ、要はあるので先日色々ポジションを減らしたけど

1309の分もう5万円を超えたものの、20万の儲けがなくなった

CFDかけたくてGMO申請したけど、なんと入力に不注意で取引停止された fuck

まだ、CFDかけられると信じて持っている香港株を円決済したけど

受け渡しになるのは明日になる。

つまり、今日何もできないひ。

最悪だ。

まあ、FOMOにならないように、これからの戦略を考えていこう

1. 1309はいいのが、取引量が少ないので、信用かけて200万くらいで良い
2. A50の日本株も信用で入れよう



くそGMO

第一夜

Papa legbaは返事をしてくれなかった。

逆に捉えるなら、これは私が取った行動への黙認なのかもしれないーー私はくる場所を謝らなかったのだ。

お高く留まっている愚かな人間らに、papa legbaの神通力を理解できるはずもない。

過去の人間と再開する術があることを知った彼らは、愛する者がいれば私に縋り、恐れる者がいれば私を除け者にした。


しかし、たとえどんな言い訳で取り繕おうとも、いかなる卑劣な装いで偽ろうとも、彼らはいずれ己の罪に直面するだろう。

善悪からではなく、人の心から生まれる罪・・・疚しさを感じた時点で自覚する罪があるのだと、母さんはそう言っていた。

でも、この日記に彼らの秘密を漏らすような手掛かりを残すつもりはない。彼らの秘密は、彼らのものだから。

契約を全うする施呪者はただ手段を尽くし、罪を背負い魂を十字路まで導くのみ。その先は案内人の仕事だ。

この日記は誰でも好きに読んでくれて構わない。ただ、もっとも有意義な情報を覚えてほしい：

私が来た。

【第五人格】呪術師パトリシア・ドーヴァルの誕生日日記

くるみよりピーカンナッツの方が好き。なぜなら、皮が薄いし、渋みも薄い。
殻つきの場合も剥きやすい！



ピーカンナッツ最高！

尊敬なるライリー様、

先週、奥様に３時間に亘たるカウンセリングを受けていただきました。心理学的な判断によれば、彼女が患っているのは軽度の不安障害です。

妊娠して間もない頃ではよくあるケースなため、過剰な心配は必要ないでしょう。

充分に休ませると当時に適当な補助用薬を与えれば、症状は大きく改善されるかと思います。

薬は袋に同封しましたので、説明に従ってご服用ください。

それと、奥様の再診の際に、あなた様も同行いただけたら幸いです。この間お話しした、「例の病院」への投資について相談がございますので。

医師　メスマー

弁護士 ライリー 誕生日 1通の診断報告書

ゆっくりと散歩する姿で現れ。

大人しくて可愛くて。

飼い主に聞いたら6歳だと。あと何百年で生きていけるのかな、羨ましい

お台場で散歩する亀が！

尊敬なるXXX様、

年が明ける一日目は、どんなに絶望している人でも、多少の希望が生まれてくるものではないでしょうか。

私もそう信じてきました。

その日、私はいつもより早く目が覚め、ベッドに座って待ち構えていました。

ベティは朝食を、ピットブルは昼ご飯を、クララは晩餐を運んできてくれました。

「外に出かけないの？」

これが新年の初日だからか、皆がそう問いかけてきました。

誰を待っているのかは、誰にも話していません。

ですがもちろん、皆がその答えを知っている様子でした。私はその眼差しが嫌いでした。まるで、猫や子犬を眺めるような、あの眼差しが。

ただ、マックスだけは、他の人に向けるものと同じような視線で、私を見つめてくれました。

他の人が陰で彼をどう言っているのかはわかっていました。マックスは俗に言う「良い人」なのかと聞かれれば、否定するしかないでしょう。

ですが、私はようやく彼の元で、他の人と変わらない物を得ることができました。皆は悪く思うかもしれませんが、私にとっては必要な物でした。

当然ですが、その年の初日は、彼に会えませんでした。

マックスは翌朝に帰ってきました。アルコールに浸ったかのような匂いを帯びながら。

「ハッピーニューイヤー！」彼はダークグレーのメンズウールジャージーを私に投げてきました。

マックスは同情心の欠片もなければ、私の事など気にもしていないと、クララは酷く怒りました。

私が本当に必要としているものが何なのか、彼女は永遠に理解できないでしょう。

何はともあれ、私はこの日を忘れません。

この「プレゼント」のためでも、マックスのためでもない自分が本当に欲する物を、ようやく自覚ができたからです。

ハッピーニューイヤー。

敬具

ヴィオレッタ



第五人格- 結魂者(ヴィオレッタ)記念日手紙 2019/1/2

ライフでアヒージョ味のラスクに目を止めた
美味しそうでワンパック買った
食べてみると　美味しい
そもそもアヒージョの大好きな私
パンからつくったラスクにぴったりだ
あとはジンジャーハイボールだけ！

エビアヒージョ味のラスク　合う！

いつの間にline musicのおすすめがすごくいい感じになった
あれ？全部好きじゃんって驚いた

たくさんユーザーのプレイ履歴をみて、さすがに興味ある曲を選出するのができる　ビッグデータだな

すごくいいです

LINE MUSIC の weekly mix すごい、自分のテイストだ

銀座のお寿司。
職人は全員坊主👨‍🦲でプロ精神がわかった！
お寿司は一流！

お寿司 銀座 鰤門

Flutterを触り始めました。

めっちゃいいです。１週間でアプリ出して、AppStoreとPlayStore両方申請出して、もちろんAppStoreにリジェクトされ、PlayStoreに無事リリースできました。

個人的な感想:

1. DARTが使いやすい。
Dartはecma標準で、typescriptの経験あれば、すぐなれる。vscodeの補完でサクサク書ける。JavaScriptと違って、nullしかない。typescriptを書くとき、null,
undefined, unknown, never。。。もう死にたい。

2. REACT NATIVEより、揺れがなく、レンダリングが安心
React Nativeでアプリ開発したことあります。

けどめっちゃ大変で、なぜか言うと、web側の知識を流用するけど、微妙に違う。たとえばstylesheetの書き方、unitなどだいたいいけるけど細かいところはダメとか。

またandroidとiOSそれぞれのapi、もう地獄。

Flutterなら、完全に新しい王朝で、webの知識は覚えなくて良い。Flutterを書き始めると、頭の中のスイッチをオンにすれば、もうややこしくない。
それでlow level apiから作ってきたヤツで、AndroidとiOSのAPIがそれぞれになるのはもうない。これは最高。

自分はAndroid アプリをexportしただけ、完璧に大丈夫。

3. FLUTTER WEBがもうちょいできたら、パーフェクト
Flutter Web今開発中だが、もしできたら、もうReact いらん！

Flutter - めっちゃ使いやすい、サクサクアプリ作れちゃう

1. Dartが使いやすい。

2. React Nativeより、揺れがなく、レンダリングが安心

3. Flutter Webがもうちょいできたら、パーフェクト

コメント

関連記事

最新記事