Humanity

Edit the world by your favorite way

Webpack + Vue(SFC) + TypeScript ハマりどころ (2018/05 版)

サクッと Webpack + Vue(SFC) + TypeScript でアプリ作ってみようと思うたび Webpack の設定に時間を溶かしてやる気を無くすシリーズ。今回はこちら!!!

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // この設定は .js ファイルと .vue ファイルの <script> ブロック両方に適用される
      // (JS で書くならこっち)
      // {
      //   test: /\.js$/,
      //   loader: 'babel-loader'
      // },
      // この設定は .ts ファイル、.tsx ファイルと .vue ファイルの <script lang='ts'> ブロック両方に適用される
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      // この設定は .css ファイルと .vue ファイルの <style> ブロック両方に適用される
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 必須
    new VueLoaderPlugin()
  ]
}

github.com

基本はこの手順通りに進めていけば大丈夫だと思ってたけど、上記でハマったので PR 投げよう…と思ったら投げる直前に同じ PR 投げてる人がいたのを見つけた。ぐぬぬ

github.com

VSCodeVim に次送ろうと思ってる PR リスト

tyru.hatenablog.com

送ったものはマージされたものの、まだやり残した事がいくつかあって、

  1. p コマンドのリファクタリング
  2. パフォーマンス改善
  3. 漢字仮名交じり文の上で w, b, e, ge を押した時に漢字、ひらがな、カタカナの区切りで止まるようにする

1 はすでにブランチを作成中だけどテストが通らない状態 2 は Vim の lazyredraw 見たく描画を必要な時にのみ行えばいいんじゃないかと計画中 3 はすでに文字のクラス (種類) を判定する処理を Vimソースコードからちまちまと JavaScript に移植したものをすでに作った (以下参照) ので、あとはこのライブラリを npmjs に publish して、VSCodeVim で使うような PR を送れば OK

github.com

(適当な日本語の文章として一番に思い付いたルイズコピペをノリで選んだけど、割と本気で良いデータだったんじゃないかという気がする…)

もちろん Vimソースコードをそのまま移植した訳じゃない。 例えば Vim は様々な文字コードをサポートしているけど、 今回は JavaScript なので文字クラスの情報を取得する対象として Unicode コードポイント (str.codePointAt(0)) だけを対象とすればいい。 そのため必要なさそうな if 文はざっくり無視したけどまだ何か見落としているんじゃないかという気はする… (テストまだ書いてない) 正直ここら辺は自分一人じゃ日本語と英語しかデータセットがなくてチェックしきれないので、とりあえず日本語で上手くいくことを確認したら VSCodeVim に PR 出して、 各国の人にそれぞれの言語で試してもらうという乱暴な解決策にしようかと思っている (もちろん既存の VSCodeVim のテストコードは全て pass した上で)。

あともう一つ重要なのが、ライセンスの問題。 Vimソースコードをそのまま移植したので、とりあえず今は Vim license をそのまま選択している。 けど Node ライブラリで Vim license はよく分からんって事で回避されそうな気がする… 正直自分も分かってない。とりあえず Vim license 同士なら確実に互換性があるだろうって事で Vim license にしてるだけ。 自分としてもライセンスが曖昧なコードを PR として送るつもりはないので、 できれば Node ライブラリでよく使われてる ISC や GitHub に多い MIT にしたい。 ただ Vim license と互換性があるのかが分からない… これは vim_dev とかで Bram に直接聞くしかない気がする (もし互換性ないって言われたらどうしよう…)。

追記:聞いてみたら、返信返ってきて大丈夫そうです。

SHIROBAKO 好きな人は Artiste 読んでほしい

Artiste が本当に好きで1巻が出た頃から何度も読んでる。 といっても文才がないしレビューなんてほぼ書いた事もないので訳分かんない文章になって削除したりを繰り返したりしてる。

そもそも前にも書いたけど、あんまり自分は作品の事前情報は書きたくない。 ただスッと差し出して「これ…読んで…」って言いたい。けど世の中そうもいかない。

そういえば全然関係ない話だけど、ゴッドタンというお笑いの番組で、売れてない芸人が「〇〇芸人」みたいなキャラじゃなく単純にネタが面白いかどうかで見てほしい、みたいな話があって、 それに劇団ひとりとかおぎやはぎとかインパルスの板倉とかが、いやそれ誰でも思う事だけどそうやってキャラで売り込んでった後で自分こういうのもできますよ、みたいに広げてかないとダメ、 呼ぶ方はあなたが何者か分かってないんだから、みたいに言う回があって、これってエンジニアの場合も似たものがあると思った。 単純に技術力で見てほしいとか思っても、重宝されるのは技術力以外のサブスキルもまんべんなく持ち合わせてる人だったり、 それか本当に得意でなくても「〇〇が得意」って周りに一回思わせられれば勝ちみたいな所がある。 そういう強みを確立してった後で自分実はこういうの趣味でやってて…って繋げられればいいんだろうなーと。


で、これは一応 Artiste のレビュー記事なんだけど、本作品ではタイトルにもある「芸術家 (Artiste)」が沢山出てくる。 舞台はパリで主人公はシェフ (元皿洗い)。華やかそうな舞台設定とは裏腹に戦場のような厨房が彼の職場。 SHIROBAKO をタイトルに絡めたのは仕事がテーマの一つだからです (女の子はあまり出てきません)。 テーマとか一読者が言いたくないのもレビューを書きたくない理由の一つだったりするんだけど…

つい最近まで自分は、仕事というものは「役に立たないといけない」と思っていた。 「役に立つ」というのは単純に多くの量の仕事をこなしたりだとか、先回りして仕事を片付けるとかそういった意味だとしか考えてなかった。 社会に貢献するというのはそういう事なんだろうと。 本作品で言ったら一番近いキャラはリュカ。 リュカみたいに要求に100%応える仕事ぶりがある意味理想だし、今でも憧れて目指してもいる。

もちろんそれも一つの貢献の仕方で、そのような人も仕事も絶対に必要。 だけどそれ以外にも必要とされる事って沢山ある。本当に、本当に沢山ある。 その事に気付かせてくれるのがこれ。続きは本編を読んでほしい (そもそも何も書いてないが)。


まぁこんな感じで書いてしまったけど、この記事は自分のブログだからいいけど、 Amazon のレビューで一回感極まりすぎて自分の小学校の頃の話とか絡めて書いてしまって、一瞬で死にたくなって削除したのがさっきの出来事。 知らねぇよ、クソめんどくせぇこいつ… とか思いつつ、まぁでもそれほど伝えたくなるものがあったんですよ。ぜひ読んでほしい。