TypeScriptのpackegerのtsdxを試してみるよ！

tsdxを試すよ！
0コンフィグらしい。便利そうだね！

どんなライブラリを作るか

試しに、二つの整数を与えて合計を返す関数のライブラリ を tsdxで作成してみるよ！

【結果的にやらなくて良かった】環境を整える

最初は、ライブラリを作成するソースコードを保存しておくために github にリポジトリを作成。

1. githubにリポジトリを作成 → tsdx-sample-sumっていう名前にした
2. ローカルにcloneして移動

~/development
❯ git clone https://github.com/tomatoaiu/tsdx-sample-sum.git
Cloning into 'tsdx-sample-sum'...
warning: You appear to have cloned an empty repository.

~/development
❯ cd tsdx-sample-sum

npm管理下にする

作成したリポジトリをローカルの開発環境に clone したら、cloneしたフォルダを npm の管理下にする。

~/development/tsdx-sample-sum master*
❯ yarn init -y # npm init -y でも可

実装

npm 管理下にしたら npm install tsdx をすればいいのかな？
tsdx の README.md を読むよ！

Just start editing src/index.ts and go!

ってあるからsrc/index.tsがentry point的な感じそう

~/development/tsdx-sample-sum master*
❯ mkdir src

~/development/tsdx-sample-sum master*
❯ touch src/index.ts

っておもったら違った！

【ここからやればOK】tsdxを使ってライブラリを作成

tsdx でフォルダを作らなければならないみたい。
そのために、まずは tsdx をグローバルインストール。

tsdxをglobalにinstall

~/development
❯ npm i -g tsdx

バージョン確認。

~/development 44s
❯ tsdx --version
tsdx, 0.5.7

フォルダ作成

~/development
❯ tsdx create tsdx-sample-sum
✔ Choose a template · basic
✔ Created tsdx-sample-sum
✔ Installed dependecines

  Awesome! You're now ready to start coding.

  I already ran yarn install for you, so your next steps are:
    cd tsdx-sample-sum

  To start developing (rebuilds on changes):
    yarn start

  To build for production:
    yarn build

  To test your library with Jest:
    yarn test

  Questions? Feedback? Please let me know!
  https://github.com/jaredpalmer/tsdx/issues

実装

~/development 28s
❯ code tsdx-sample-sum

さっそくscr/index.tsをみるぞ！

export const sum = (a: number, b: number) => {
  if ('development' === process.env.NODE_ENV) {
    console.log('boop');
  }
  return a + b;
};

うん？あれ？もうsumがあるぞ？？

tsdxでcreateするときにbasicかreact選ぶことができて、basicを選ぶと、 これ がテンプレートとして扱われるみたい。

watchしてみる

yarn start

✔ Compiled successfully

  Watching for changes

index.tsの末尾の行にsum(5, 10);を追加してみるとしっかりとコンパイルしてることが分かる。

~/development/tsdx-sample-sum
❯ node dist/index.js
boop

実行結果は、boopになるみたい。これはyarn startするとdevelopmentモードになるからのよう。

パッケージング

yarn buildでできるみたい。または npm run build 。

~/development/tsdx-sample-sum 3m 28s
❯ yarn build
yarn run v1.9.2
warning package.json: No license field
$ tsdx build
✓ Creating entry file 4 secs
✓ Building modules 2 secs
✨  Done in 7.42s.

コマンドを打つと以下のようにいろんなモジュール方式で、developmentモードとproductionモードでbuildできるみたいだね。

~/development/tsdx-sample-sum 8s
❯ tree dist
dist
├── index.d.ts
├── index.js
├── tsdx-sample-sum.cjs.development.js
├── tsdx-sample-sum.cjs.development.js.map
├── tsdx-sample-sum.cjs.production.js
├── tsdx-sample-sum.cjs.production.js.map
├── tsdx-sample-sum.es.production.js
├── tsdx-sample-sum.es.production.js.map
├── tsdx-sample-sum.umd.development.js
├── tsdx-sample-sum.umd.development.js.map
├── tsdx-sample-sum.umd.production.js
└── tsdx-sample-sum.umd.production.js.map

パッケージングしたライブラリを試す

call-sum.jsというファイルを作成してsumを呼び出して3を表示する。

~/development/tsdx-sample-sum
❯ touch src/call-sum.js

const { sum } = require('../dist/tsdx-sample-sum.cjs.production');

console.log(sum(1, 2));

~/development/tsdx-sample-sum
❯ node src/call-sum.js
3

できた！

参考文献

• palmerhq/tsdx: Zero-config CLI for TypeScript package development，入手先 https://github.com/palmerhq/tsdx

【Vue.js】 SCSS や LESS を使う方法

やりたいこと

Vue.js で scssやless を使ってみたい。ということで Vue.js + scss の環境とVue.js + less の環境を構築してみる。そして、どちらとも少し利用してみる。

Vue.js + SCSS

Vue CLIで簡単にSCSSを入れる

まずは、scssを入れてみる。これはVue CLIで簡単にインストールできる。試してみたところ、scssが2つあった。なんで？

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

以下の二つ。

• node-sass
• dart-sass

sassの実装言語が違うみたい。dart-sassの方が新しいので、せっかくだからdart-sassを使ってみる。

Nesting

ネストしてかけるのがいいよね！template言語ブロックのネストに合わせてstyle言語ブロックでネストできるのが好きな感じ。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="scss">
#app {
  text-align: center;

  li {
    color: red;
  }
}
</style>

Operators

計算ができるようになりみたい。calcとは違うのかな？よくわからない。でも、わざわざcalcと書かなくてもいいのは嬉しい。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="scss">
#app {
  text-align: center;

  li {
    min-height: 10px + 10px + 10px;
  }
}
</style>

browserで見たときのcss。しっかり30pxになってる。

#app li {
    min-height: 30px;
}

インラインで計算したらどうなるの？

できなかった。

Vue.js + LESS

Vue CLI で簡単にLESS入れる

今度は、lessを触ってみる。こちらもVue CLIで簡単にインストールすることができる。

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
❯ Less
  Stylus

Nesting

ネストができる。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="less">
#app {
  text-align: center;

  li {
    color: red;
  }
}
</style>

Operators

計算もできる。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="less">
#app {
  text-align: center;

  li {
    min-height: 10px + 10px + 10px;
  }
}
</style>

scssと何が違うの？

疑問に思った。cssを生成する言語が違うことはなんとなくわかった。lessはnode.jsで、sassはdartかrubyらしい。
google trend で比較してみたけど、sassの方が検索されてるみたい。
要調査。

まとめ

scssとlessは、どちらも簡単にVue CLIでインストールすることができる。それに直感的に扱うことできる。これからは、より良いcssライフを送ることができそう。

参考文献

• Sass: Sass Basics，入手先 https://sass-lang.com/guide
• Getting started | Less.js 入手先，http://lesscss.org/

【Vue.js + Storybook】インストールからVue Component を表示

やりたいこと

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

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

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

つまったところ

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

参考文献

• Storybook: UI component explorer for frontend developers，入手先 https://storybook.js.org/