KAEDE Hack blog

Vimと可愛いUIを愛する英文学生の技術ブログです. お仕事ください > , <

Make-2ch-log

まずAppの中身をCLEAR

Bootstrap4をnpmで食わせる

npm i bootstrap

4.4.1が入った

npm i react-bootstrap

これも必要?1.01が入った

import 'bootstrap/dist/css/bootstrap.min.css';

これをimportして

import Button from 'react-bootstrap/Button';

btnで試してみる

  <Button variant="primary">Primary</Button>{' '}

Appのrenderにこれを書いたら読み込まれた!

[f:id:kei_s_lifehack:20200507051109p:plain]

[https://react-bootstrap.github.io/components/table/:embed:cite]

Reactだとかなりsimpleにbootstrapがかける

[f:id:kei_s_lifehack:20200507051254p:plain]

しかし2chのUIはこれ

[f:id:kei_s_lifehack:20200507052547p:plain]

tableのUIはこれ

[f:id:kei_s_lifehack:20200507052610p:plain]

次の行にcontentsかけないし,columnの幅も調整できん

grid三つ書くしかないか?

[f:id:kei_s_lifehack:20200507120627p:plain]

思ったよりいい感じになった

import React from 'react';
import Writing from './components/Writing';

function App() {
  return (
    <div>
      <Writing/ >
    </div>
  );
}

export default App;

App側を簡単にかけるの便利だ

Database

まずはconsoleでfirestoreで

Add Firebase to Your AppのところでNick Name

firestoreを書いていく まずは src/Config/config.jsに

Add Firebase to Your AppのところでNick Name

npm i firebase

import firebase from 'firebase/app';

const firebaseConfig = ... {
apiKey = xxxxxx;

const firebaseApp = firebase.initializeApp(config);
export const firestore = firebaseApp.firestore();
.....
}

これをfirestoreとしてWritingでimport

refにuseStateを使ってみよう!!

dev.to

constructor直下に

this.ref = firebase.firestore().collection('notes');

で書いていたのを

const [ref, setRef] = useState[ firebase.firestore().collection('writings')];

に置き換える

useEffectがわからんが,どうやらcomponentWillMountに近いものらしい

[https://qiita.com/keiya01/items/fc5c725fed1ec53c24c5#%E8%89%AF%E3%81%84%E4%BE%8B-3:embed:cite]

この記事によると

useEffect(                                   
    () => {                                  
        const time = setInterval(() => {     
            dispatch({ type: "ADD_COUNT" }); 
        }, state.tick);                      
                                             
        return () => clearInterval(time);    
    },                                       
    [ state.tick ]                           
);                                           

これでstate.tickが変化するたびに「副作用」として処理を追加できるらしい

reactjs.org

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

公式にはこのような記載がある.htmlのtitleも変更できるようだ

このコードでは[]に最後に入れてないから,何も入れてなければbrowser APIで何か 変数が更新されたのを検知してuseEffectをうごかすのだろうか.

TypeError: storeRef.onShapshot is not a function (anonymous function) src/components/Writing.jsx:37 34 | 35 | useEffect( 36 | () => {

37 | let unsub = storeRef.onShapshot( | ^ 38 | update 39 | ); 40 | }

storeRef.onShapShotがuseEffectではとれない....

storeRefの中身は確認してある.hooksでclassのやり方はできないようだ

blog.logrocket.com

全部はわからんがここのコードを使ってみる

export const createWrintings = (writings) => {
  return storeRef.add({
    created: firebase.firestore.FieldValue.serverTimestamp(),
    content: writings,
  });
};

create, addは簡単に作れた.stateは使わないようだ

SHOWができないから

qiita.com

これを使ってみる

github.com

react-firebase-hooks というツールを使う

npm install --save react-firebase-hooks

Writing.jsxにはいつもの

import firebase from 'firebase/app';
import { firestore } from '../Config/config';

の他に

import {useCollectionData} from 'react-firebase-hooks/firestore';

をしてさっきnpm i したのを読んで

  const [values, loading, error,] = useCollectionData(
    ref, {idField: 'id'});

で設定する

  if(loading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div>{`Error: ${error.message}`}</div>
  }

loading, errorではこれらを返し

  return (
    <ul>
      {values.map(value => (
        <li key = {value.id}>{value.content}</li>
      ))}
    </ul>
  )

return ではvalueをmapするだけ doc...とか一切必要がない

これだけでfirestore collectionからDOMに書き込めた

f:id:kei_s_lifehack:20200514012525p:plain

valuesをcllすると

(2) [{…}, {…}]
0: {created_at: t, content: "俺みたいな中3でグロ見てる腐れ野郎、他に、いますかっていねーか、はは", id: "KwONQGM2AyLohkGOTF3u"}
1: {created_at: t, content: "初カキコ,ども...", id: "LIGRzMJJdxM1pJAo5R3L"}
length: 2
__proto__: Array(0)

ちゃんと入っている!!!これをcreated_atでsortすれば行けそうだ.

idFieldでidを取得するところがポイントです。

と書いてある通りに,doc.idがdoc.data()と並列で入っている!!


また,記事のNewTodoの通りに

const Add = () => {
  const [content, setContent] = useState('');
  const [pending, setPending] = useState(false);

  const add = async () => {
    setContent('');
    setPending(true);

    try {
      await ref.add({
        content,
        created_at: firebase.firestore.FieldValue.serverTimestamp(),
      });
    }
    finally {
      setPending(false);
    }
  }

useStateを使ってcontentを空のstr, pendingをfalseでstateとして初期化

そして追加btnが押された時のaddの処理を書く.

asyncを噛ませてcontentを空にし,実行中ということでpendingをtrueに

tryではawaitが使われるのでこちらが先になるのか?

setContent('')が行われていないのでcontentは残っている.これが先に refにcreated_atとともに追加される

そしてtryが終わった後にpendingをfalse, NOに書きかえる

その後async前半が処理されてinput valueのcontentが空になり pendingがfalseになる.

このaddを

  return (
    <div>
      <input 
        value = {content} 
        onChange={e => setContent(e.target.value)}
      />
      <button
        onClick={add}
      >
        Add
      </button>
        {pending && 'Pending...'}
    </div>

returnでinputを作り,valueには常にcontentを置き, onChangeにsetContentをしてe.target.valueをおく.

btnのonClickでaddがfireするように仕込み,

その下にはpendingがtrueの時のみ出るようにする

このComponentをAppで読み込むことによって

追加機能のあるinputとbtnが配備された.

Wesのよりかなりシンプルだ

どのcomponentでもrefは使っているので,Appで呼び出してpropsで渡そうか

しかしありえんほど簡単に


毎回firestoreをconsolelogで使用しているのもおかしいので改善策を感がてみた

config のままexportして,各自のcomponentでinitする作戦は

objのconfigをうまくconfigとしてexportできずにerror

import config from '../Config/config';

firebase.initializeApp(config);

これでうまくいきそうだが,これでもno -usedになってしまう

App側で済ますのも無理だった

これは仕方ないのかもしれない

f:id:kei_s_lifehack:20200514034048p:plain

export const firestore = firebase.initializeApp(config);

をconfig.jsに書いて

import {firestore} from '../Config/config';

をfirestore使う全てのcomponentに書くのは避けられないようだ;;;;;;

kaede-0902ch.web.app

timestamp 出ないけど大まかなレイアウトは下

sort

timestampの値でsortがしたい

[1, 2,3, ] ならarr.sortで簡単だがarrのobjが必要

created_atの中身は

created_at: t
nanoseconds: 964000000
seconds: 1589391378

である

これを普通に出そうとしたらめっちゃ詰まった

kei-s-lifehack.hatenablog.com

まぁ2020.05.21に解決して,例外処理挟んで出せるようになった, UIも書いた

f:id:kei_s_lifehack:20200521213413p:plain

ここで

React使っててなぜXSSが防げてるのかなんもわからん

dangerouslySetInnerHTMLを使うとXSSできるようになりますよ!() やれるもんならやってみて下さいよ! Add関数壊れてるわよ

f:id:kei_s_lifehack:20200521214339p:plain

おもちゃかコレェ!!!!!!!(言いたかっただけ)

www.youtube.com

動かしてなぜ動かないかわからん...

qiita.com

短くかける!!!と思ってここのsetTitleのところを流用してadd関数を作った

import React, { useState } from "react";
import {Col, Row,} from 'react-bootstrap';
import {Form} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import firebase from 'firebase/app';
import { firestore } from '../Config/config';



const ref = firebase.firestore().collection('writings');

const Add = () => {
  const [content, setContent] = useState('');
  const [pending, setPending] = useState(false);

  const add = async () => {
    setContent('');
    setPending(true);

    try {
      await ref.add({ 
        content: content,
        created_at: 
          firebase.firestore.FieldValue.serverTimestamp,
      });
    }
    finally {
      setPending(false);
    }
  }
  return (
    <div>
    <Form>
      <Row>
        <Col md = {7}>
          <Form.Control 
            placeholder='write here' 
            value = {content} 
            onChange={e => setContent(e.target.value)}
          />
        </Col>
        <Col md = {5}>
          <Button variant="primary" 
            type="submit" onClick={add}
            >
            Submit
          </Button>
        </Col>
      </Row>
    </Form>
    {pending && 'Pending...'}
    </div>
  )
};


export default Add;

これを自分のちんちんで...じゃなくて自分で入れてbuttton押すと, 動いているように見えるが中身が入らない

エラーも出ないしわからない....

最初は動いてたもん,自分で自分のちんちん舐めたいって入れないし...

そんなに身体が柔らかくないので...(そういう問題?)

profile-自己紹介

status

神奈川大/外国語/英語英文/ に通ってる大学三年生

神奈川県南部に住んでいる.

history

大学一年から.町の電気屋,工事受付の仕事のバイトをしている そこの仕事内容と大学に入ってPCやインターネットを学業で使う必要性に迫られたのを きっかけとしてソフトウェアの開発者を目指している

lang hisotry

Excel, Java柴田望洋氏の書籍,HTML5, JSでCanvasを使ってシューティング作成,CSSでweb UI作成(headerなど) , Grid Design, Github Pagesでのwebsite作成,アルバイトでC, python, Djangoを使用,インターンcakephp, mysqlを使用,ハッカソンでSlimでチーム開発,独学でのcakeで工事受付アプリLedgers, localで作成, Firebaseでサーバーレス学習,jqとFirebaseで掲示板のようなものを作成し,それがReactで綺麗に書くべきと言われたのでReactを学習中.

f:id:kei_s_lifehack:20200410150928p:plain

教職課程

一年の時は英語の教師を目指して教職課程をとっていたが, 業界の偏見が強く,土日の「業務」である部活動は無給前提, 卒業単位にならない講義で在学中も5限19:00まで残らなければならず, 教職課程を完遂して資格を取っても4,5倍の倍率の採用試験に落ちると, 任期が一年の非正規雇用で働くしかない,そんなコースに入るために 4年で480万の学費,66万の通学定期代を払い毎日平日大学に通うことを 決めたのではないと気づき,2年からはコースを変更した. 大学には1ヶ月で160h, 4年で7680hも投資している,これは最低賃金で働いていても768万になる.もちろん大卒がないと受けられない企業が多いのを知っているので別のこと、ExcelJava, 日経ビジネスの精読などに(最後は無意味だった) 教職をやめた分のリソースを投じることにした.

Software

中古のパソコンを買い,家に回線がないのでwimaxを月に3.8k払って契約し,最初はExcelの本を買ってショートカットを覚え,Javaの本を買って途中まで取り組み, HTML JS(canvas)の本を借りてシューティングゲームを作り,CSSの勉強をし, shell scriptやvimを覚え,webサイト制作のベンチャーに平日無理やり時間を作って joinして,cakephpmysqlをなんとか覚えた.だが放置下での学習速度が遅いと解雇 された.めげずにそこで学んだcakeというフレームワークを学習し続けて

ledgersを作成し,localとはいえ一応の成果物と言えるものを産めた.

part-time-job, panasonic

一年から働いている店はローカルなPANAの店.社員6人パート4人バイト2人.エアコンの取り付けやアンテナの修理,冷蔵庫や洗濯機の点検や取り替えをその日の夕方にできてしまう小回りの良さが特徴.そこでエアコンの取り付けではなく,学生だからと店頭での案件の記録と社員への伝達そして来店したお客さんの求める蛍光灯などの小物を販売するレジ打ち,また社員が稼いできた工事代金の入金,経費のレシートからの出金処理などの「店番」として勤務している.

ビジネスの現場でのソフトウェアの活用の必要性を痛感した。

ヨドバシなどと違う昭和からのままのお客さんとの距離が近いローカルなお店で,シフトなどの管理も融通がきき,大手よりも働きやすいが,業務自体も昭和から変化が少ない.新しいものを覚えるのを毛嫌いしている方が大半な「今までこれでうまくいってるのだから変えるのはおかしい」といった職場なのでいい実務で使うのは不可能だが,実際使えたらいいなぁという思いでledgerを開発した.

aim

人間の苦痛が少ない社会を作りたい,手書きや紙のめくりなど,なんども決まったことを繰り返す事務作業をwebとDBのCRUDなどで容易に,ストレスがかからず働ける環境を作りたい.

勉強中

firebase + React, 基本情報(FE),

成果物,参考サイト

GitHub のレポジトリです https://github.com/kaede0902?tab=repositories

グリッドデザインを勉強しています。

工事受付アプリledgersです。 https://github.com/kaede0902/ledger heroku でエラーが出てるのでローカルでしか 動作しません。

cssのみならこちらでみれます GitHub Pages kaede0902.github.io/css/grid/ledger/

定期的に勉強会に参加して現役のエンジニアさんに詰まってることを助けて貰ったり、そのアウトプットをしています。それと詰まったところやプロジェクトの進捗を記録している技術ブログです

http://kei-s-lifehack.hatenablog.com/

JavaScript で作成したシューティングゲームです https://kaede0902.github.io/KAEDE_GAMES/STG/shooting.html

HTML5 Canvasの勉強で作ったアニメーションです。 animations https://kaede0902.github.io/Canvas/Animation/

自己紹介スライドです,逆求人用. https://docs.google.com/presentation/d/1jCXvSfkIiuQvltk8d6dbUjbVIbgjOZ3-D4alz-W8by8/edit?usp=drivesdk

開発中のfirebaseでの家計簿アプリ firebaseとjsの勉強で作成した家計簿アプリです,誰でも追加できます

https://moneylog-e7c4b.firebaseapp.com/

なぜエンジニアか

エンジニアは勉強を重視する 苦戦したら身内だけに留めず、記事にして共有している。自分もエラーで詰んだら何回も助けられているし、解決策を公開している。やりたいことができる

やりたいこと

自分が仕事で雑な漢字が読めなくて怒られて苦しんだり、相手が自分のカタカナを読み違えて怒られたり、1枚1枚伝票を紙で綴ったり、電卓で在庫管理をしたりする、それをしなくて済むようなツールを制作する

人間のミスを全て吸収する、ミスが起きる確率を極限まで潰すアプリケーションを作る!!

文字に残って確認がしやすいweb firstにしたい

人を楽にするBrowser Serviceを作りたい 不便を撤廃してストレスフルな作業を無くす (y! transfer, gmail , trello, simeji , keep )のように 人間を楽にしたい、自由にしたい 本質的でないところに時間を延々と使い続ける業務フローを一新したい

どういう企業に入りたいか

決断が早く、みんなより便利なものが好き こういう決まりだからって言うのが少ない 各分野のエキスパートと話せる。愛をもって育て続けられる

前例のないことでもどんどんチャレンジしていける環境がある. 「このやり方でうまくいってきたから」といった思考停止がない 新しいツールでも使って見ようという空気がある

Q & A

成長したエピソード(200 char)

大学に入った時から働き続けてる職場で3年間働き続け、最初は間違いが多かったり電話が多く積み重なった時にパニックになりがちだった仕事もサクサクとこなし、ミスがあった時も素早くリカバーできるようになりました。 より効率がよくミスが起きないようにツールを活用し 、常に考え強気で実践し、明るく振る舞いスムーズにコミュニケーションを測り、受付と事務処理の仕事を万全にこなせるようになりました。

結果を出したエピソード

大学一年の時からバイトしている電気屋さんの職場で,商品の価格表をPANAから渡されたエクセルシートから印刷して製本したものをめくって定規を当ててお客様への説明や,実際の決済に使用しており,目視と伝言ゲームゆえにミスが多発していました.そこで自分が強く店長を説得してonedriveにシートを上げて職場の全端末でデスクトップから参照できるようにし,価格検索のスピードと正確性を飛躍的に向上させました.

挑戦したエピソード

2019年08月03日, セレス株式会社の3days インターンハッカソン形式のチーム開発「ユーザーを楽しまサービスをかね」にチャレンジしました。

そこで合計3人のチームでビジネスモデルキャンバスの物理フレームワークでアイデアを出し、学生フリマアプリを与えられたサーバーと指定されたphpフレームワーク(Slim)を使用して、商品追加のControllerとView, 商品画面と購買(取引)履歴、詳細画面のViewを担当しました。

全員チーム開発未経験でslimやtwig(view file形式)の仕様に苦戦し、基本的なことでなんども手戻りをし、merge時の衝突も大変でしたが、3日をフルに使ってより良いものができるよう最善を尽くしました。

反省点としては現場で配布されたチートシートに過度に頼って言語のドキュメントの読み込みが浅かったのと、役割分担が上手く行かなくて手戻りや作っている機能の中止があり、効率が悪く完成度がとても低かったことです。

しかし勇気をだしてチャレンジしたことで自分に足りないやる事の細分化と言語の不理解が身にしみました。

開発経験は?

独学でJava, JavaScript, CSS, CakePHP, SQL, sh, php, Vim, などを学習しています。 最も使えるのはJavaScriptCakePHPで、シューティングゲームや受付台帳を作りました。 (github kaede0902/KAEDE_GAMES/STG/, cake3/ledgers/)

firebaseとjqueryで家計簿アプリを作成しました. https://moneylog-e7c4b.firebaseapp.com/

HTML5 Canvasの勉強で作ったアニメーションです。 animations https://kaede0902.github.io/Canvas/Animation/

現在はReactでcomponentでの開発を学んでいます.

使用可能言語

プログラミング以外の趣味は?

猫カフェ.石川町のれおんに金があればすぐ行く(2h2k). 紐系で猫を跳ばせるのが得意.猫ちゃんの運動不足には喜んで協力いたしますぐへへ 最近太ももに乗ってくれる子がいて幸せ.

Minecraftで,拠点をなるべく近代的にかつ資源生産や装備供給などの拠点と なるように開発していくのにはまっている

また,東京などで「この建物マイクラだったら実装できそうだな」と考えながら写真を取るのが好き.

f:id:kei_s_lifehack:20200227194418p:plain

あとTwitterは色々オープンにコミュニケーションができるので重宝している.

植物も好き.枯らさずに育てて,葉っぱが増えた時に感動した

f:id:kei_s_lifehack:20200226190155j:plain

現状?他の記事を読んでくれ

firebase-usage

メリット

hostingとdbを一括でできる

Netlifyと違ってRouteのblockがない。

デメリット

先にHostingをすると何故か後からfirestoreが追加できなくなる。

公式ドキュメントでCare your eyesが使えない

Project Limit

project作成数の上限が無料では12個。

https://qiita.com/amazon_106/items/080831ac3838ba8197ea

この記事によると

https://console.cloud.google.com/cloud-resource-manager?hl=ja

このLINKでDelete Pendingの物を削除すれば上限解放されるのかもしれない?

というかfirestore なのになぜかGCPとlinkされてしまっている

qiita.com

どうやら30days 経てば完全削除されるらしい

code

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  apiKey: "",
  authDomain: "",
.........
};

export const firestore = firebase.initializeApp(config); 

これでconfig.jsからfirestoreとしてexportしておく.

Show

.........
import firebase from 'firebase/app';
import {firestore} from '../Config/config';
import {useCollectionData} from 'react-firebase-hooks/firestore';

const ref = firebase.firestore().collection('writings');

これで必要なfirebase, config, useCollectionData, DB-Table,

を取得しておいて

const Show = () => {
  const [values, loading, error,] = useCollectionData(
    ref, {idField: 'id'});
  ....

これでvalueにid, content, created_atなどが入る

  return (
        {values.map(value => (
            <div key = {value.id}>
                  {value.content}
            <div>
  ))}
);
export default Show;

これでvaluesの配列から中身がhtmlにかける.

Bootstrap-Card

why

こういうのを複数並べたい

f:id:kei_s_lifehack:20200523143543p:plain

React-BootStrapを採用する

react-bootstrap.github.io

code

min

実際に最小限のsampleを動かしてみる

    <Card style = {{ width: '18rem' }}>
      <Card.Body>
        <Card.Title>
          Card-title1
        </Card.Title>    
        <Card.Text>
          hogehoge
        </Card.Text>
      </Card.Body>
    </Card>
    </div>

f:id:kei_s_lifehack:20200523144232p:plain

でた!!!これのTitleをshop name,Textをshop adress, にすればOK!!

  return (
    <div>
    {ShopCards}
    </div>
  );
  const ShopCards = shops.map((item, key) => 
    <Card 
      style = {{ width: '18rem' }}
      key={item.tel}
    >
      <Card.Body>
        <Card.Title>
          {item.name}店
        </Card.Title>    
        <Card.Text>
          {item.tel}
        </Card.Text>
      </Card.Body>
    </Card>
  );

これで縦に並んだ

horizon

横に並べるために

const ShopCards = shops.map((item, key) =>  
  <Row                                      
    key={item.tel}                          
  >                                         
    <Col md = {4}>                          
      <Card         
        </Card>
      </Col>
    </Row>
  );
                        
.........

を使ったが,GridのCol 6のなかに入れても意味がない

flex classを使ってみるか

[http://www.tohoho-web.com/bootstrap/flex.html:embed:cite]

d-flexだけで横に並ぶのか?
<div
  key={item.tel} className='d-flex flex-row'
>
これに入れても<Card />が横に並ばん!!!!


<CardGroup/>を使った


[https://stackoverflow.com/questions/39031224/how-to-center-cards-in-bootstrap-4:embed:cite]


className='px-4 py-4 align-item-center justify-content-center'

これをぶち込んだら綺麗に並んだ

右側に何かを入れるのがわからん

### link
href = './works' では動かん


[https://codesandbox.io/s/r1mr7r2q2p:embed:cite]

どこを触っても跳べるように組むには

関数組む必要あるらしいね!!!

            <Card.Link
              className = 'text-danger'
              href={ 'tel:'+ item.tel}
            >
              {item.tel}
            </Card.Link>

Card.Linkでいけた

カード全体のクリックはできないがこれでよし


## img
Card に工事用のfont awesomeをしよう

[https://www.npmjs.com/package/@fortawesome/react-fontawesome:embed:cite]

foNtではなくてfoRt.

npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/react-fontawesome

3ついれないといけない

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

これでimport

corporate-site-architect

concept

Reactでcomponentに分ける

index

index.jsにRouterを組み

airconclean, links, shoplist, newinfo, works, partsorder,

のurlにaccessされた時に各Componentが描画されるようにする

stackoverflow.com

全てimportするのは長いのでmapでやってみる.Promise.allが必要?

const pages = [
  'App', 'Works', 'NewInfo', 'ShopList', 
  'PartsOrder', 'AirConClean', 'Links',
];
const loadPages = (pages) => {
  Promise.all(pages.map((page) => {
    import {page} from (`./containers/$page`);
  ))
  }
}

import は top levelでしか使えないとerrorがでた. arrを別fileにして,それもimportすればいけるか?

それでもconstが先に出てきてしまうから無理そうだ....

import全部した後に,そのcomponentとurlを配列にするならいける?

const pages = [ {name: App, link: './App',}, ]; ...

これでpathはいけたが,componentがでない

mae.chab.in

この記事によるとDynamic importというらしい.

import React from 'react';

class App extends React.Component {
  constructor() {
    super();
    // 読み込むコンポーネントをthis.stateに定義する
    this.state = {
      component1: null,
      component2: null,
      component3: null,
    };
  }
  async componentDidMount() {
    // dynamic import()を使ってコンポーネントを動的に読み込む
    const { default: Component1 } = await import('./Component1');
    const { default: Component2 } = await import('./Component2');
    const { default: Component3 } = await import('./Component3');
    // 読み込んだコンポーネントでthis.stateの値を更新する
    this.setState({
      component1: Component1(),
      component2: Component2(),
      component3: Component3(),
    });
  }
  render () {
    return (
      {/* 読み込んだコンポーネントをDOMに反映する */}
      <div>
        { this.state.component1 || <div>...</div> }
        { this.state.component2 || <div>...</div> }
        { this.state.component3 || <div>...</div> }
      </div>
    );
  }
}

export default App;

しかしclass使ってねぇんだよな〜〜〜〜

これ仕込む方がコストかかるし,全部importで並べるか〜

import App from './App';
import Works from './containers/Works';
import ShopList from './containers/ShopList';
import NewInfo from './containers/NewInfo';

import PartsOrder from './containers/PartsOrder';
import AirConClean from './containers/AirConClean';
import Links from './containers/Links';

7 linesあるけど仕方ない

App

最初にアクセスされるAppではHomeにBodyを渡してRenderする.

次にURLからアクセスされるWorks, NewInfo, はsrc/containers/ に置かれていて

どれもHomeにWorksInfoなどを与えて書かせている

HomeではSideBar, Header, FooterとBodyに与えられたものを描画している

系列店の情報を Footer, Body, ShopListで再利用するために

src/shopDataList.jsxで作ってそれをimportする

汎用components

Header

Girdで分厚くしている.

薄い版をAdobeマンに作ってもらったからそれを使ってもう少し一般的な Headerにした方がいいかもしれない

SideBar

goodpatch.com

このMain PainとDetail Painを採用する.

現状いるところがActivateされていないのでuseEffectとTabを使って やる必要がアリそうだ.

Excel-VBA

なぜ

事務の仕事でauto-fillで終わらない繰り返し作業が生じた page, sheet ごとになる.

Target

2019.03.01 to 03.31までのJ1 to J43 これを一つのtableにまとめて重複を簡単に見つけられるようにする

この操作を2019.02.xlsxから2020.03.xlsxまでやる

uxmilk.jp

My Solution

空白せる含めて,売り伝番号があるJ Col 4 Row to 43 Rowを全て取得し

collection.xlsmに並べる

月ごとのfile(book) , 日毎のsheet, 項目ごとのcell,

これを二重ループで取得する

Sub putbook1901sheet01d5toActiveCell()
    Dim book1 As Workbook
    Dim str As String
    Workbooks.Open "C:\Users\mycompany\OneDrive\_日報\1901.xlsx"
    
    Set book1 = Workbooks("1901.xlsx")
    str = book1.Worksheets("1").Range("d5").Value
    
    Workbooks.Open "C:\Users\mycompany\OneDrive\_日報\collection.xlsm"
    ActiveCell.Value = str

End Sub

これで取得はできたが,pageを変数から読み取るのがうまくいかない.

UXMILKの記事を見てみる

uxmilk.jp

Dim page
page = 1
str = book1.WorkSheets(page).Range("d5").Value

これで1 pageのd5が取得できない.

とりあえずloopはこれがわかりやすい

www.excel-easy.com

経理の裏ワザ!Excelでシート名をセル参照する方法

これを読むとINDIRECTを使えば引数に計算結果を使えるらしい

Reactでいう { hoge++ } で計算されるような感じかな?

=INDIRECT( A2 & “!B3” )

これにより、A2セルに「Sheet1」と入力されていれば

らしい!!簡単?

www.contextures.com

これでいけそう

=INDIRECT("'" & A2 & "'!" & B2)

できない

エクセル文字列結合わからん!!!

J忘れてた

=INDIRECT("'" & B5 & "'!J" & C5)

完成

結局VBA使わなかったけど,英語で調べるの強いね

firebase-timestamp-cannot-render

firebase timestamp cannot render

why

単に2chなサービスを作ろうとして,NoSQLなfirestoreにはauto-incrementなidがないから(idはあるけどrandなhex),created_at のtimestampのdataをrenderの時のsortのindexにしようとした.

何をしているか

単純なFirestoreからの読み込みとDOM render.
useCollectionを使ってShow.jsを書いている

import firebase from 'firebase/app';
import {firestore} from '../Config/config';
const ref = firebase.firestore().collection('writings');

これでconfig.jsに書いてあるapikeyなどからこのprojectのwriting tableを持ってきて

import {useCollectionData} from 'react-firebase-hooks/firestore';

const Show = () => {
  const [values, loading, error,] = useCollectionData(
    ref, {idField: 'id'});
  if(loading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div>{`Error: ${error.message}`}</div>
  }
  console.log(values);

  return (
    <Row>
      <Col>
        {values.map(value => (
            <div key = {value.id}>
              <div>
                {++num}:名無しさん:{value.id}:2019.05.17
              </div>
              <div>
                {value.content}type:
              </div>
            </div>
        ))}
      </Col>
    </Row>

.........

これでuseCollectionDataを使ってvaluesにwritingsの配列を渡している.そしてrenderで value.idとvalue.contentを描画している.

これでconsoleを見ると,配列にid, content, そしてcreated_atが入っているのが見える.

f:id:kei_s_lifehack:20200521023938p:plain

ちょっと待っておちんちんナメナメってだれw

Error

timestamp

ここで問題はtimestampになる. consoleをよくみてみると

15:
content: "かえでのちんちん舐め舐め"
created_at: t
    nanoseconds: 786000000
    seconds: 1589720334
  __proto__: Object
  id: "zTBHecvjaaZOtt3kVmIt"

このようにcontentやidのように直接は入っていなくて,

tのobjのように入っているのがわかる.

このtはfirebase consoleをみると

f:id:kei_s_lifehack:20200521024506p:plain

timestampで入っている.timestampのtらしい.

int32とかで書かれている特殊なtype.?

よって単純に value.created_atで出力しても

react-dom.development.js:13413 
Uncaught Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). 
If you meant to render a collection of children, use an array instead.

objと中身が見つかりました,objはrenderできませんってerrorが出る.

try01 .toDate

ここで公式Docの通りに

f:id:kei_s_lifehack:20200521025107p:plain

{value.created_at.toDate}

としても

typeError: Cannot read property 'toDate' of undefined

で読み込めないと出てしまう.()をつけても同様だ.

try02 .get() about milli second

stackoverflow.com

こちらのサイトでも基本的に.toDate使えと書いてある. new Dateのところはdate to tsの方.

qiita.com

これによると

Server側のTimestampはMicro secondだが,JS Dateはmilli second

microseconds = milliseconds * 1000 なのでtsの方が精確.

つまり細かいものから大まかなものにはできるはず.

そしてコードは

const timestamp = snapshot.get('created_at');
const date = timestamp.toDate(); // JS Date 型が欲しい場合

でかけと書いてある

{value.created_at.get().toDate()}

.get()を挟んでみたがダメだった.

try03 servertimestamp

次は

あるとしたらServerTimestampとTimestampの違いかもThinking face

Only after you have synced with Firestore and the data is fetched again, the prop will be changed from serverTimestamp → to Timestamp

stackoverflow.com

However, ... FieldValue.serverTimestamp() gives nothing of value.

とあるので同じコードで同じ症状だ.

Add.jsxで

created_at: firebase.firestore.FieldValue.serverTimestamp.now(),

で書いているからね....

serverTimestamp() itself does not contain any date information, and you can't convert it to a date.

と書いてある.convertできないの辛くね?

ただ前の方に

Only after you have synced with Firestore and the data is fetched again, the prop will be changed from serverTimestamp → to Timestamp

fetchするとtimestampになって.toDateできるよって書いてあった!!これか!!!

f:id:kei_s_lifehack:20200521034411p:plain

本物のtimestampはtではなく,timestampと出るらしい...

serverTimestamp fetchで調べてもserverTimestampを入れる方法しかでなかった

hさんにまた聞きなおそう...

e-words.jp

読み取りに行く,getと同じ処理らしいがどう書くんだろう....

04 firestoreのdata type listから

ここらへんの記事見ると、timestamp 受け取ったときに timestamp オブジェクトが Date に変換する関数をもっているみたいですね

qiita.com

Dateオブジェクトでクライアントのタイマー取得してもしょうがないというケースが多いと思います。サーバ時間をセットする時は下記を使います。

firebase.firestore.FieldValue.serverTimestamp()

私はサーバー(の?)時間をDBにセットしていたんだな

Firestoreから取得したドキュメントにセットされているタイムスタンプ型を扱うときはtoDate()でJSのDate型に変換します。

firebase.firestore().collection('users').doc('123').get().then(function(doc) {
    var timestamp = doc.data().timestamp.toDate();
}

これを真似て

{value.created_at.timestamp.toDate()}

で.timestampを挟んでみたが,どのみち

Show.jsx:31 Uncaught TypeError: Cannot read property 'toDate' of undefined

toDateはないとErrorが出てしまう

try 05 .second

ブログ読みました created_at.seconds で秒がとれそうですね

Show.jsx:31 Uncaught TypeError: Cannot read property 'seconds' of undefined

.t.secondsでも同じだった

new Date(value.created_at.seconds)

でも同じ

{(new Date(value.created_at)).toString()}

で少し進んだ!!!

俺みたいな中3でグロ見てる腐れ野郎、他に、いますかっていねーか、ははtype:Invalid Date

Invalid Dateと出る.

これで(new Date(...))の部分をなくすと

Show.jsx:31 Uncaught TypeError: Cannot read property 'toString' of undefined

となる.value.created_atにstringがない

やはり謎のtが問題だ!!!!

{values.map(value => { console.log(value.created_at); return ""; })}

でsecがでた.

created_atが一つundefになってた

{value.created_at ?                         
  (value.created_at.toDate().toString()) :  
  "NO DATE"                                 
}         

例外処理で解決多分しました,明日テストします

これで綺麗に2ch完成しました.みてくれた方々ほんとうにありがとうございました !

f:id:kei_s_lifehack:20200521050150p:plain

CSS Header align by Bootstarp Grid

md 2: 10 でGridでlogo: textにしている

だがテキストの「お電話はこちら」が

縦方向center 横方向rightにならない

getbootstrap.com

f:id:kei_s_lifehack:20200516142741p:plain

jusify-content-end

だけでは右上になる

align-self-center

をつけても動かない

つまりd-flex- justify-contentで左右は調整できるが,上下がで来てない

align-items-center も効果がない

medium.com

h-100をつけたらできた!!!!!

こちらが全体のコード

        <Col className='py-1 Pink ' 
          xs={8} md={10}>
          <h4 className='
              d-flex 
              justify-content-end 
              align-items-center
              h-100
          '>
            {headerText}</h4>
        </Col>

しかし背景色をつけてみると,高さが目一杯になっていた

実際の電話番号一覧のLINKを貼るのにはこのやり方ではでかすぎる.