2020年7月2週 Weekly Report

📰 Topics

次世代フロントエンドの期待を背負うSvelteを初体験。
GitHub ActionsやCIも強化し、9ヶ月ぶりにOwlMixinをリリースしました。

書いたこと

【TypeScript】リリースノート v2.8

TypeScript v2.8のリリースノートをまとめ終わりました。

Conditional Types周りはかなり勉強になりました。
以下の3つはオススメです。

Conditional Types
Distributive conditional types
Type inference in conditional types

解釈間違っている箇所もあると思いますが..参考程度に😅

【Python】sql-alchemy-sandbox

SQLAlchemyの学習や動作確認のためsandboxを作成しました。

基本的には公式ドキュメントに記載された内容です。

完成したわけではなく作っただけです。ほとんど未完成。

読んだこと/聴いたこと

悲しいほど｢心が弱い人｣に共通する3つの特徴

総合格闘家・朝倉未来さんの記事。
ここで語られるマインドはエンジニアや他の職種にも共通すると思っています。

目的意識をしっかり持つために大切なのは、今取り組んでいることが本当にやりたいことなのかどうかの再確認です。結局、本当にやりたいことでなければ全力をぶつけることはできないでしょう。

そして、取り組んでいることが本当にやりたいことであれば、どんどん成長することができます。やりたいことではないのになんとなくやめることができず、ずるずると続けてしまう、というのも「弱さ」の表れです。もちろん、疲弊したときはしっかり休息をとって、モチベーションを回復させましょう

やりたいことを見つけて取り組めば成長はあとから付いてくる。
やりたくないことを続けてしまうのが『弱さ』であると..なるほどです。

またリアルに視点を変えて客観視することの重要さも大変参考になりました。
詳しくは記事の中で。

ep.53 Vue 3 Study「Vue.js にもやってくる Fragment」

ReactのFragmentのようなものがVueにやってくるようです。
無意味なdivタグや、CSSフレームワークのクラス階層制約から解き放たれると思うと嬉しい！

why does Jetbrains separate their products into multiple IDEs ?

JetBrainsはなぜ言語ごとにIDEを開発しているのか?という質問です。
設定の同期などが面倒なためIntelliJ IDEAを使っていますので気になりました。

中の人が回答されています。
歴史的経緯によるものらしいですが、気になるのは最後の文章。

Only recently Java was refactored into a plug-in and the backend infrastructure for the paid plug-ins marketplace appeared. When this work is finished, we may consider providing a single IDE with several paid plug-ins so that you can build the IDE with the features that you need.

近い将来、単一のIDEベースに必要な言語プラグインを購読する未来がくるかもしれませんね😁

試したこと

Svelte

SvelteはVirtual DOMを使わずコンパイルでコードを最適化する思想のフレームワークです。
TypeScript未対応のため様子見でしたが、対応されたようなので😁

公式のトップページに従います。

npx degit sveltejs/template svelte-sandbox
cd svelte-sandbox
npm install
npm run dev

トップ画面が表示されます。
src/main.jsやsrc/App.svelteを編集するとホットリロードが走ります。

svelte-preprocessを使うと色々できそうです。

現時点では以下に対応しているみたいです。

Sass / Stylus / Less / PostCSS
TypeScript / CoffeeScript
Pug
Babel

TypeScript、Sass、Pugを使ってApp.svelteを書き直してみました。

必要なパッケージをインストールします。

npm i svelte-preprocess typescript pug sass --save-dev

rollup.config.jsにautoPreprocess設定を追加します。

+ import autoPreprocess from 'svelte-preprocess';
.
.
    plugins: [
      svelte({
+       preprocess: autoPreprocess(),
.
.

書き直してみました。

src/App.svelte

<script lang="ts">
  export let id: number;
  export let name: string = 'No name';
</script>

<template lang=pug>
  h1
    | Hello {name} (id: {id})!
  p
    | Visit the 
    a(href="https://svelte.dev/tutorial") Svelte tutorial 
    | to learn how to build Svelte apps.
</template>

<style lang="scss">
  template {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    font-size: 4em;
    font-weight: 100;
  }

  p {
    a {
      font-weight: bold;
      color: green;
    }
  }
</style>

src/main.js

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    id: 123456,
    name: 'Mimizou'
  }
});

export default app;

こんな風に表示されます。LGTM😆

今回は触ってみたかっただけなのでこの辺で..。
TypeScriptをはじめとするエコシステムとの連携は好印象でした👍

sapperという人気フレームワークもあるみたいですし、IDEのサポートが整えば世代交代の可能性はある気がしました。

【Node.js】ECMAScript Modules

今更ですがECMAScript Modulesのimportを試してみました。

Node.jsのバージョンはv12.17.0です。

mkdir esm-test
cd esm-test
npm init -y

最小限のソースコードを作成します。

sub.js

export function sum(x, y) {
  return x + y;
}

main.js

import { sum } from "./sub.js";

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

このまま実行すると以下の警告と共にエラーとなります。

$ node main.js
 Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.                                                                               C:\Users\s

拡張子を.mjsにしない場合はpackage.jsonにtype: moduleを追加する必要があります。
公式ドキュメントにも記載があります。

Regardless of the value of the “type” field, .mjs files are always treated as ES modules and .cjs files are always treated as CommonJS.

つまり、拡張子によって判定方法が変わります。

拡張子	判定
.cjs	CommonJSとする
.mjs	ES modulesとする
.js	typeがmoduleならES modules、それ以外ならCommonJSとする

typeを指定してもう一度実行します。

$ node main.js                                                                                                                                                      07:23:02
(node:14324) ExperimentalWarning: The ESM module loader is experimental.
11

ESM module loaderは試験的機能であると表示されますがきちんと動きます。

実行できない場合..

Node.jsのバージョンが古いとnodeコマンドに--experimental-moduleフラグが必要です。

v12系の場合 12.17.0より前
v13系の場合 13.2.0より前

【正規表現】Regex101.com

正規表現の確認やテストを気軽にできるWebサイトです。

【Slack】サイドバーを隠して集中力を上げる

Ctrl+Shift+dで左側、Ctrl+Shift+mで右側のサイドバーを隠すことができます。
これにより未読通知やリアクションなどが見えなくなるので集中力が上がります。

Slack自体を閉じる方法もありますが、以下2つの理由からサイドバー非表示を採用しました。

Notificationが表示される (一目見て重要なものは確認したい)
Slack自体が作業ログ保存場所として優れている

調べたこと

【GitHub】latestが最新のタグを参照しない

GitHubのlatestが最新ではなく古いタグを指してしまう現象。
Gitのタグを作成してpushするだけでなく、GitHubとして操作が必要です。

ghrを使ってデプロイすればOKです。

# version 4.15.1の場合
ghr v4.15.1

【Python】SQLAlchemyで複合外部キーを指定する方法

今まで複数のColumnにForeignKeyを指定してましたが、ForeignKeyConstraintを使わなければダメでした。
Column単位では単独で2つのカラムに複合キーが付けられていると見なされてそうです。

class HogeEntity(BASE):
    __table_args__ = (
        ForeignKeyConstraint(
            ("column1", "column2"),
            ("other_table.column1", "other_table.column2"),
        ),
    )

【Python】PylintでUnicodeDecodeError

謎のエラーに苦しめられました。。

UnicodeDecodeError: 'cp932' codec can't decode byte 0x87 in position 74: illegal multibyte sequence

デバッグしたら、pyproject.tomlで日本語を使っていたのが問題だったようです。
pyproject.tomlはUTF-8ですが、PylintがWindowsだとcp932を使うようになっていそうです..。

日本語を使うのやめて解決😜

整備したこと

【GitHub】Codecovでカバレッジレポート

1年以上前からCode Climateのカバレッジが上手くとれなくなってしまったため、Codecovに移行しました。

GitHub Actionsの中でレポートを送信するようにしましたが、設定がほぼ不要で感動してます🤣

CodeCovから対象のリポジトリを追加する
GitHub ActionsのYAMLファイルでsteps配下にcodecov/codecov-actionを指定

  - uses: codecov/codecov-action@v1

こんな風に表示されます。

【GitHub】MacOS/Windows/Ubuntuのマトリックスビルド

GitHub ActionsでOSとバージョンのマトリックスビルドに対応しました。
以下のような感じです。

jobs:
  test:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        python: ["3.6", "3.7", "3.8"]
    name: Python ${{ matrix.python }} on ${{ matrix.os }}

カバレッジなどのレポートは特定OS/特定バージョンのみにしています。

  - uses: codecov/codecov-action@v1
    if: matrix.python == 3.8 && matrix.os == 'ubuntu-latest' && success()
    with:
      fail_ci_if_error: true

OS名にはシングルクォートが必要なので注意です。

【PowerShell】ffmpegのよく使うコマンドをエイリアスに設定

正確にはエイリアスではなく関数です。

# mp4のサイズを圧縮
function remp4() { ffmpeg -i $args[0] -vcodec libx264 -crf 20 $args[1] }
# mp4をgifに変換 (画質をキープ)
function togif() { ffmpeg -i $args[0] -filter_complex "[0:v] split [a][b];[a] palettegen [p];[b][p] paletteuse" $args[1] }

【ネットワーク】ネットワークの有線環境整備

WiMaxで利用しているルータW06がノートPCと無線接続できなくなってしまいました。
PC/ルータ共に他の機器同士では接続できるため、面倒なトラブルに遭遇したのかもしれません😭

【訳あり】UQ WiMAX モバイルルーター Speed Wi-Fi 高速通信動画視聴快適 USB接続受信最大1.2Gbps ギガビット級高速Wi-Fi 無線ルーター Wifiルーターモバイルルータータブレットパソコン HWD37SKU インターネットビジネス自宅 W06 白送料無料

楽天で購入

せっかくの機会なので、ルータとPCの接続をUSB-Cに切り替えました。
W06のベストエフォートはUSB接続時のものであるため、有線であることを除けばメリットがあるからです。

ルータをPCの側に持ってくるとアンテナ感度が落ちるため、USB3.0を5M延長できるケーブルを購入しました。

また、USB3.0のクチが足りなかったので以下のハブで拡張しました。

BUFFALO USB3.0 セルフパワー 4ポートハブブラックスタンダードモデル BSH4A125U3BK 【Nintendo Switch/Windows/Mac対応】

楽天で購入

以下のような構成ですが今のところ快適です☺️
BluetoothやIHなどと干渉しないので接続も安定しました。

窓 | ルータ  <-----------(USB type-C 5M)----------------> (USB 3.1ハブ) <---> (EIZO モニタUSB 3.0ハブ) <---> PC

速度も無線接続時より上がった気がします。
筆者の環境では100Mbpsくらいは出ます。

今週のリリース

Togowl v1.16.0 ～ v1.16.2

タスクの期日変更

タスクの期日を任意の日付に変更できるようにしました。
今までは『今日』『明日』だけでしたが、2日後以降にも設定できるようになりました。

OwlMixin v5.6.0

OwlMixinはクラスインスタンスとjson,yamlなどのフォーマットを相互変換したり、メソッドチェーンによる関数型言語の書き方をサポートするMixinです。

for_eachをTListとTIteratorに追加

>> TIterator((1, 2, 3)).for_each(lambda x: print(x*2))
2
4
6
>>> TList([1, 2, 3]).for_each(lambda x: print(x*2))
2
4
6

count_byをTIteratorに追加

TListにのみ実装されていたcount_byメソッドをTIteratorにも実装しました。

>>> TIterator((1, 1, 10, 20, 5, 100)).count_by(lambda x: len(str(x)))
{1: 3, 2: 2, 3: 1}

to_iteratorをTListに追加

TIterator(TList([1, 2, 3]))がメソッドチェーンでも実現できるようになりました。

>>> TList([1, 2, 3]).to_iterator()

その他

Markowlにはじめてレビューがついた

Markowlは今年公開したJetBrains製IDEのMarkdownプラグインです。

Simple but efficient と嬉しいコメントをいただけました😆