tomatoaiuの日記

やったこと や まなんだこと をまとめたい

VueでStorybookを使ってみたい【02】|vue componentを表示

vue component の .vue ファイルを読み取ってStorybookに表示してみたいので、やってみる。
ここを見ればなんとかなりそう。

ファイル作成

TryStorybookButton.vue

<template>
  <button @click="handler">try storybook</button>
</template>

<script>
export default {
  name: 'TryStorybookButton',
  methods: {
    handler() {
      console.log('clicked!');
    }
  }
}
</script>

index.stories.js

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import TryStorybookButton from '../src/components/TryStorybookButton.vue';

storiesOf('Button', module)
  .add('as a component', () => ({
    components: { TryStorybookButton },
    template: '<try-storybook-button></try-storybook-button>'
  }));

成果

表示できた!

Storybook
Storybook

つまったところ

  • storiesOf.addの第2引数のアロー関数の返り値が()で囲わないといけないこと。これになかなか気づかなかった。
  • storiesOftemplateにはvue componentで作成したhtmlが入ること。

参考文献

VueでStorybookを使ってみたい

storybookって何かと聞くやつを使ってみたい。
vueからでも使えそうな感じなので試してみるよ。

Automatic setup

autoでやってくれるみたい。すごいね!
とりあえずvueプロジェクト作成してみる。

~/development
❯ vue create try-vue-story


Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

作成したフォルダに移動する。

~/development 1m 48s
❯ cd try-vue-story

で、autoでinstallできるっぽいコマンドを入力してみる。

~/development/try-vue-story master
❯ npx -p @storybook/cli sb init --type vue

~~中略~~
success Saved lockfile.
✨  Done in 40.78s.

 • Installing dependencies. ✓

To run your storybook, type:

   yarn storybook

なんとなくできたっぽい。フォルダも作成されてたし。

~/development/try-vue-story master*
❯ tree .storybook
.storybook
├── addons.js
└── config.js

~/development/try-vue-story master*
❯ tree stories
stories
├── MyButton.js
├── Welcome.js
└── index.stories.js

package.jsonにもそれっぽいのが増えるみたい。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

そして、ついに、コマンドを入力してみる。

yarn storybook

出た!

storybook
storybook

今後

  • vue.jsのSFCの状態でcomponentを読み込めるか試してみたい。

参考文献

pythonのmapは添字で参照できない

atcorderをやっていて、なかなかエラーが解消できなかったのでメモ。

書いたコード

listA = map(int, input().split())
listB = map(int, input().split())

for i in range(4):
    if listA[i] - listB[i] > 0:
TypeError: 'map' object is not subscriptable

解決策

listをつけるとokらしい。

listA = list(map(int, input().split()))
listB = list(map(int, input().split()))

for i in range(4):
    if listA[i] - listB[i] > 0:

map

ドキュメントによると

イテレータを返します。

らしい。

イテレータ

調べてみてもよくわからない。
イテレータゲシュタルト崩壊を起こしそう。
で、シーケンス型、特殊なシーケンス型、辞書型等のイテレータオブジェクトがあるみたい。

シーケンス型

list, tuple, rangeの3つがあるだね。

特殊なシーケンス型、辞書型

分からんかった。それぞれ、これって説明がない。 辞書オブジェクトならあった。

terator.iter

これがあると for in が使えるみたい。
つまりmapもこれが実装されているんだね。

iterator, イテレータ型, イテレータオブジェクト?

???

参考文献

"[要素, 要素][真偽値]"で、参考演算子みたいに書けるらしい

不思議な構文

AtCorderのpythonの回答でこんな感じのがあった。

print(["No","Yes"]["1" in ["1", "2", "3", "4", "5", "6"]])

これの出力はYesになるんだって。な〜ぜ?
調べてみると、真偽値が0か1になるから、それを添字として配列から値を取り出せるみたい。すごいね。

JavaScript

これいけるのかな?

console.log(["No","Yes"][["1", "2", "3", "4", "5", "6"].includes("1")]);
undefined

だめだった。trueかfalseで帰ってくるから、includesはできないみたい。

console.log(["No","Yes"][["1", "2", "3", "4", "5", "6"].some(x => x === "2")])
undefined

なので、someも撃沈。0か1を返しくれるようなの思い出せないので、JavaScriptは無理かな。

探してみた

bool to 0 or 1 みたいに検索するとできそうだった!

console.log(["No","Yes"][+ ["1", "2", "3", "4", "5", "6"].includes("1")])
Yes
console.log(["No","Yes"][["1", "2", "3", "4", "5", "6"].includes("1") | 0])
Yes

やったぜ!使う機会があればいいけど。

そもそも

JavaScriptなら普通に三項演算子で。。。

console.log(["1", "2", "3", "4", "5", "6"].includes("1") ? "Yes" : "no")
Yes

参考文献

ReactをCreate React Appから使う

cliをinstall

create-react-appを使ってするのかな?

npm i -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 8.604s

フォルダ作成

~/development
❯ npx create-react-app my-app

Creating a new React app in /Users/tobashunsuke/development/my-app

~~中略~~

~/development 35s
❯ cd my-app

Serve

サーブしてみる。

~/development/my-app master
❯ yarn start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.53.28:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

react
react

できた!

package.json

reactとreact-domは見たことあったけど、react-scriptsは何だろう?

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },

react-scriptsは、Create React Appを動かすためのコマンド集なんだね。@vue/cli-serviceのような感じかな。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

それにしてもejectって何これ???
とりあえずやってみる。

~/development/my-app master
❯ yarn eject help
yarn run v1.9.2
$ react-scripts eject help
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

package.jsonを見てみるとめっちゃ増えてる!!!使うときは気をつけたい。

"dependencies": {
    "@babel/core": "7.4.3",
    "@svgr/webpack": "4.1.0",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-preset-react-app": "^9.0.0",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "2.1.2",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
~~省略~~

参考文献

Google Chrome でログインが必要なサイトにアクセスする度にidとpasswordを求めらるようになった話

問題

Google Chrome でログインが必要なサイトにアクセスする度にidとpasswordを求めらるようになった。

困った

twitterに問題を書いて悲しいと呟いたら、Google Chrome さんからお困りですかって こちらのリンクを教えていただいた。元々呟く前から Google Chrome の設定はonやoffにしてログイン状態が保たれるか確認していたがダメで、教えていただいたところを確認して、試してみてもやっぱりだめでどうしようか。

解決

再起動してみて、Google Chromeの設定を見たら、ONになっていたはずの「パスワードを保存できるようにする」がOFFになっていたので、それをONにしたら正常にパスワードを保存できるようになった。

まとめ

ノートパソコンは定期的にシャットダウンしようね!

スペシャルサンクス

Google Chrome さんありがとうございました!
Google Chrome on Twitter: "ご返信ありがとうございます。問題が解決してよかったです!また Google Chrome についてお困りの際は、当アカウントまでお知らせくださいね。… "

20190511~12で逆求人面談に参加してきたよ

サポーターズさんの逆求人面談に参加してきた!

良かったこと

  • 就職先の候補を考えることができた
  • インターンについての情報を知ることができた
  • 人との縁を繋ぐことができた
  • 自分の思考を成長させることができた

自分の思考を成長させることができた

特には、これが個人的にとても嬉しい。自分の考えを経験ある方々に聞いていただき、真面目に意見を返してくださる。中々真面目な話をする相手が少ない僕にとっては、とても貴重で縋りたくなる。より人間として、エンジニアとして成長できる機会に巡り会うことができた。

問題

面談終了の後日の予定管理がカオス

これやばい。企業さんごとによってインターンの日にちが違うし、決まってないところもあるし、逆にすぐ決まりそうな予定のところもあるし、どうやって管理したらいいのだろうか。これは、早めに就職活動できる企業さんと、3月から就職活動開始できる企業さんとの、就職活動におけるもどかしさと似てる。この状態になると、精神的に不安定になり、満足に生活できなくなる。常に90%以下な作業量しか熟せないような感じ。