夜間飛行

「DX(デジタル・トランスフォーメーション)」というキーワードを目にすることが大変多くなった。

この5年間の間のだけでもIndustry 4.0, Society 5.0, ディープラーニング, AIといった様々なキーワードが入れ替わり立ち替わり似たようなメッセージを発し続けている。それらの描く美しい未来像に触れ技術の要素の習得に力を入れつつも、思い通りにならない会社組織を恨めしく思ったり、社会の重鈍さに腹を立てたりしてきたエンジニアは少なくないと思う。あるいは一歩進んで、そういった現状を言語化・図示した資料に出会い、社内でのICT介護のやりとりを思い浮かべながら、「よくぞ言ってくれた、これを檄文にみんなを決起させよう」と気持ちを高ぶらせているところなのかもしれない。

私自身そんなエンジニアの一人なのかもしれない。

だが、これは「無敵の『DX』でなんとかしてくださいよォーー」の前兆ではないのか？

「『DX』は手段です」と、したり顔で公演する識者の講演に首がもげそうなくらい頷くモブへと一直線に舗装された道の入り口に立っているのではないか？

そんな未来に到達する前に少しだけ悪あがきをしてみたい。

DX担当者に任命されたら…

ある時、あなたは上司に呼び出されたとしよう。

なんと「社長から『DX』を推進するように指示があった。『DX』は何やらパソコンを活用する話で若い人の柔軟な考え方が大事だそうだから君に任せたい。」という。

なんとも危ない匂いのする話だ。どこかでダメと書いてあった始まりそのものではないか。

社長の頭の中

さて、よくわかりもしないDXをまるっと若手のあなたに押し付けた社長は全くのアホで要高度ICT介護の上司なのだろうか。

だが、特に一部上場企業などのサラリーマン社長であれば、実績を積み、類まれな何らかの才能を発揮してその立場についていると考えるのが妥当だろうし、その立場から様々な形で一流の指南役も社内外についていると見るのが良いと思う。

私自身もしがないサラリーマンで、社長の経験もなくなったこともない立場の人間の経験は想像でしか語れないが、幸い、"CEO Job Description"とググるとCEO(≒社長)の役割についていくつもの記事があり、ドラッカーなど著名な経営研究家が色々な名言を残してくれている。

また、CEOの直面する「課題」などもアンケートが取られていたりする。

そういった情報をまとめると

(サラリーマン)社長の最も重要なミッションは「会社を永続させること」

であり、そのために会社に関するメッセージを顧客・社員・投資家・政府などあらゆる方面とやりとりし、それらをまとめ上げながら実行に移していく(指示を出す)といった役割を担っているようだ。

会社が永続できなくなる落とし穴は山ほどある。

もっとも当たり前のものは既存事業のシェアを落とすなどしてコストが売上より大きくなり赤字転落後そのまま運転資金が枯渇すること。「永続」すれば良いと言ってゾンビ飛行ギリギリとなってしまえば、成長が期待できない会社として投資家に愛想をつかされ、これもまた資金調達が苦しくなる。

だが、現在においては、人種や性別などの多様性対応を誤り、顧客離れ、製品の生産やサービスの提供が止まってしまったり、温暖化などの環境対策を狙いとした政策への対応に失敗し厳しい罰則を受けたり、品質検査の不正行為で賠償に発展したり、昨今コロナ禍で顕在化したように市場が蒸発したりしてしまうこともある。

全部優秀なスタッフに任せることができれば良いが、意外と社長によるきめ細かなマニュアル運転が必要になってしまっている企業は多いと思う。

そんな中、投資家、つきあいのある政治家(官庁/政治団体)、社外取締役から「御社のDXはどうなっていますか？」とくると、何かしらの回答準備が必要になってくる。

社長は思う。

「Industry 4.0, Society 5.0, AI, 自分がポジションに付く前に似たような話はたくさんあったじゃないか。なんで今また夏休みの宿題を最後の1日でこなさないとならないような状況に…。とはいえ、なんとか形にしていかないと。」

デジタルネイティブな会社であれば、社長になったあとでデジタル技術に対する意識が急激に高まるという間抜けな話にはならないだろう。だが、生産や営業といった役割分化した組織の中で上がってくると、いくらゼネラリスト養成学校のJTCといえども壁の向こうを本当の本気で見るのは社長になったときくらいだ。

DX担当者として…

過小評価かもしれないがこうやって社長の頭の中を仮定すると、DX担当者として最初に着手することは「会社の永続」と「DX」を結びつけることだ。

そして、その方向性としては大きく分けると

既存事業のExploit(売上増加[アップセル]/コスト削減)
新規事業のExplore

の2つになる。

幸い、この方向でまとめている記事を見つけたので紹介する。

デジタル大国を目指す中国がDX（デジタルトランスフォーメーション）関連特許で急伸中！　～各国のDX動向調査レポートを公開～｜アスタミューゼ株式会社のプレスリリース

この記事と重複する部分もでてくるが、次回は、ここからさらに具体的な打ち手の選択肢へと掘り下げたい。

メモ

A Contribution to Marketing Theory Concerning the Development of the Resource-Based View

メモの要略

vue-cliで作ったSingle Page Webアプリのプロジェクト設定でつまづいたところのメモ

環境変数(.envファイル)をvueのプロジェクトで読み込んで使う
Vueファイルに対してESlintとPrettierを設定し、vscodeで使う

前提環境

vue
- vue/cli: 4.5.9
- vue: 2.6.12
eslint: 7.16.0
prettier: 2.2.1

1. 環境変数の読み込みをできるようにする

公式ドキュメント(Modes and Environment Variables | Vue CLI)によると、vue-cliでは.envファイルで定義した環境変数をプロジェクトやpublic/index.html内の埋め込み変数として使えるとのこと。しかし、何が悪いのかはっきりしなかったが、デフォルトでは.envファイルを読み込まなかったので注意として記しておく。

解決策

プロジェクトにdotenv-webpackを追加すること

yarn add -D dotenv-webpack

.envファイルの作り方での注意

公式ドキュメント通り

.envファイル内で定義する変数名はPREFIXとしてVUE_APP_を与え、VUE_APP_SOMETHINGという名前にすること
.envファイルはpackage.jsonと同じ、プロジェクトのルートに置くこと
.envファイルを更新したら開発サーバ(yarn serve)を再起動すること

環境変数の使い方

.envファイルでVUE_APP_SOMETHINGという変数を定義したとして

.js/.vueではprocess.env.VUE_APP_SOMETHINGで参照する
public/index.htmlでは<%= VUE_APP_SOMETHING %>で参照する

参考

vue.js - Vue-cli 3 Environment Variables all undefined - Stack Overflow: 同じような症状にあった方がいる様子。Dylan Nguyenさんがdotenv-webpackのインストールが必要だった旨に言及。

2. Vueファイルに対してESlintとPrettierを設定

2020年11月頃にPrettierのLintとの併用における公式設定が変ったらしいとのことで、Qiitaなどに転がっていた2020年6月頃の情報が古くなっていたことから試行錯誤。

これを読んでいるあなたも一旦公式ドキュメントを確認したほうが良いかも。情報古くなるの早すぎ…。

必要なパッケージ

プロジェクトに追加するものとして

yarn add -D eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

eslint: 7.16.0
prettier: 2.2.1
eslint-plugin-vue: 7.3.0
eslint-config-prettier: 7.1.0
eslint-plugin-prettier: 3.3.0

VSCodeに追加するものとして

設定ファイル

prettierrcは作らずにeslintrcに含めてしまいました

vscodeのsetting.json

veturを入れている多いのでvalidationを無効にする設定とeslintの有効対象設定. 心を込めた手作業にするためautosaveなどはonにしてない。

{
  "vetur.validation.template": false,
  "eslint.workingDirectories": ["./"],
  "eslint.validate": ["vue", "javascript", "html"]
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  plugins: ['prettier'],
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier',
    'prettier/vue',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
        singleQuote: true,
        semi: false,
      },
    ],
  },
  parserOptions: { parser: 'babel-eslint' },
}