2019-07-11

【メモ】Vueコンポーネントのwatchがwatchしない

Vue.js

こういうやつ

// NG
  watch: {
    config: (val, oldVal) => {
      console.log(val)
      console.log(oldVal)
    }
  }

functionにする必要があります。

// OK
  watch: {
    config: function(val, oldVal) { // functionにする
      console.log(val)
      console.log(oldVal)
    }
  }

ウォッチャを定義するためにアロー関数を使用すべきではない

と、ドキュメントにちゃんと、しかも太字で書いてありました。。サーセン

jp.vuejs.org

2019-07-02

【メモ】Vueコンポーネントで再帰的に$emitしたいときの引数

Vue.js

Vueコンポーネントの中で自身のコンポーネントを呼び出してツリー表示をしたいときがあると思います。

今回やりたかったのは以下のこと。

1) 初期表示で最上位の階層(親のいない階層)を表示

2) 子要素があれば hasChild 属性が true。「＋」ボタンを表示する。

f:id:easy-breezy:20190702155637p:plain

3)「＋」ボタンを押したら、 loadChildren　メソッドを $emit 。自身の children 属性に子要素リストを読み込んで表示する。

f:id:easy-breezy:20190702155641p:plain

4) 2-4を繰り返す。

というもの。再帰のところで $emit の引数に何を渡すんだろう？とひるみましたが、 $event を渡せばよいんだそうです。

<!-- Tree.vue -->
<template>
  <div class="tree">
    <ul v-for="item in items" :key="item.id">
      <li>
        {{ item.name }}
        <Tree
          v-if="item.children !== null" // 子要素があるときだけ機能する
          :items="item.children"
          @loadChildren="$emit('loadChildren', $event)"  // 引数に $event を指定する
        />
        <a v-else-if="item.hasChild" @click="$emit('loadChildren', item)">  // 引数に item を指定する
          +
        </a>
      </li>
    </ul>
  </div>
</template>

ここに例がありました。

vuejs.org

2019-05-21

【メモ】Nuxt.js で「Uncaught Error: [nuxt] store/index.js should export a method that returns a Vuex instance.」

Nuxt.js Vue.js Vuex

storeの中に new Vuex.Store を返す index.js を作成したらエラー

ファイル名を store/index.js から store/store.js に変えたら直った。

store/index.js はNuxtの中では特別な意味があるファイルなのか。

ja.nuxtjs.org

2019-05-17

【メモ】openapi-generatorでたくさん出るエラーを無かったことにする

OpenAPI Swagger CLI

その場しのぎメモ

swagger.json から openapi-generator generate でエラーがたくさん出てしまう、おろかなわたしの swagger.json 。。。

openapi-generator generate -i http://localhost:3000/docs/swagger.json -o static/api -g html

…
Errors: #こういうエラーがモリモリ出てgenerateされない。pathパラメータの定義を$refでしてるからなのかなーわからん
        -attribute paths.'/api/users/{id}'. Declared path parameter id needs to be defined as a path parameter in path or operation level

コンソールのメッセージにあるのですが、 --skip-validate-spec オプションをつけるとエラーを無視してgenerateしてくれます。

openapi-generator generate --skip-validate-spec -i http://localhost:3000/docs/swagger.json -o static/api -g html

DSLから生成した swagger.json　の構文エラーは直すのが大変なので、その場しのぎ大変助かります。

2019-04-11

【メモ】VSCode x Vue.js: html(template)のフォーマッターでPrettierがエラー

メモ Nuxt.js VSCode Vue.js

直したいこと

サンプルで入ってるvueファイルにVSCodeのフォーマッターをかけただけで怒涛のエラー⚡️

Prettierエラー

解決策

Vetur というプラグインを入れて

Vetur

VSCodeの設定ファイル settings.json に以下の1行を追記したら治ります👍

//settings.json
{
  "vetur.format.defaultFormatter.html": "prettier"  
}

2019-04-04

【雑メモ】 create-nuxt-app で yarn run dev したら DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

メモ webpack Nuxt.js

ぐぐると extract-text-webpack-plugin を devDependencies に追加すると治るよとか書いてあるけど治らなくて、

セットアップオプションの「PWA」を外したらエラーしなくなった。

今回はPWA使わない予定だから良いのだけども、なんだかきもちわるい。

でも同じことでお困りの人のためにメモのこしておきます。

2019-03-28

【箇条書きメモ】2019/03/27 AWS Startup Day 2019 Tokyo に参加してきました

メモ

https://aws.amazon.com/jp/startup-day/tokyo/ に参加してきたのでメモ

仕事があったため冒頭と終盤の内容が薄くなってしまった

10:00～12:00 基調講演

『防犯カメラ×行動解析AIで目指すゆたかな社会』

株式会社VAAK 代表取締役田中遼氏

https://vaak.co/

田中氏は学生時代から起業しており現在3社目

VAAKEYE https://vaak.co/news/2018-3-2/

店舗の防犯カメラのデータをKinesis Video Streamにアップロードし"Gメンの目を防犯カメラに入れる"

万引き被害は小売の売上の1%

VAAKEYE導入で、万引被害額の削減77% 万引対策の業務削減96% 逮捕件数 7件

事故・事件を未然に防ぐ社会にしたい

『スタートアップを成長させるプロダクト開発』

Sansan株式会社執行役員/CTO 藤倉成太氏

https://jp.corp-sansan.com/

リソースが限られていたので、出来ることを　1.簡単に名刺をスキャン 2.正確にデータ化 3.検索できるに絞った

プロダクトコンセプトを大事にするためにデータの正確さを大事にした

プロダクトができる前から営業をかけた。当初は1ID月額1万円で提供していた

2012年頃は従業員50人規模

100人のオペレーターが名刺を手入力していたが遂に限界

クラウドソーシングを活用。名刺をピースに分割して個人情報保護をした

結果、無料化に成功

インフラをオンプレからawsに移行。DB20-30台で運用

sansanが大事にしたこと

プロダクトコンセプト
足元の課題を解決するソリューション

これを同時にできたことが、今のSansanの理由。

「大きなビジョン」か「顕在化した課題の解決」のどちらかしか考えてないケースがあると思う。でも、同時に両立することが大事。

テーマが大きすぎるとすぐに多くの人には使ってもらえない

エンジニアにビジネスマインドを持つことで早く決断が進む

13:00～13:45 [AWS Startup ゼミ] よくある課題を一気に解説！

アマゾンウェブサービスジャパン株式会社　松田和樹氏, 塚田朗弘氏, 中武優樹氏

データストアどれをつかえばよい？

当初と仕様が変わってきてRDBMSでやるのがつらくなる

・マネージドサービスを利用しよう

・データストアの特性をしろう

　検証大事

　負荷エミュレーションでパフォーマンスがどれだけ出るか確認しておく

認証基盤を統一したい

IDPASSを保存するためにDBを用意したくない

Cognitoを使う。複雑な部分はLambda

Client-Cognito-Lambda

ログをちゃんと扱いたい

DataLakeという考え方。多様なデータを一元的に保存できる

無制限に保存できるので、ログの他にセンサーデータ、モビリティデータなどもDataLakeへ

AwsのDataLake＝S3

AWSのサービスが吐いたClowdWatchLogをS3へ保存する

自前のDBに貯めたログもS3に定期出力が可能

Kinesis Data Firefoseを経由してS3に書き出す

FirehoseがLambdaをコールすることもできる

AWS Glueでログ出力ファイルフォーマットを変更することができる

14:00～14:45 国内外ヘルステック・スタートアップのクラウド活用最新動向

アマゾンウェブサービスジャパン株式会社　佐近康隆氏

インキュベイトファンド株式会社村田祐介氏

レントゲン画像などから個人情報(名前、年齢等)を検出して削除する。純粋な医療データとして医療機関で共有できるようになる。( Amazon Comprehend Medical https://aws.amazon.com/jp/blogs/news/amazon-comprehend-medical-jp/ )

ヘルステックはオバマケア(医療保険の加入義務化)がきっかけとなりアメリカで盛り上がっている

アメリカのスタートアップ資金調達の2割はヘルスケア

新しい医療機関をつくるスタートアップOneMedicalは米国内に72カ所の診療所を持つ( https://forbesjapan.com/articles/detail/22911 )

アメリカでは医療機関を株式会社で運営している

医療画像のクラウド解析。診療中に診断結果を受け取れる

日本では2019年以降ようやく資金調達できる段階になった領域。医療知識がなくても活躍できる可能性がある

服薬管理。いつ飲んだか・飲んだ時の表情なども記録し、以後の処方に役立てる( AICare https://aicare.co/ )

15:00～15:45 エンジニアのためVC活用術

インキュベイトファンド株式会社General Partner村田祐介氏

グロービスキャピタルパートナーズプリンシパル湯浅エムレ秀和氏

マネックスベンチャーズ株式会社代表取締役和田誠一郎氏

出資以前に、作りたいものがあったらとりあえずMVPで公開してみる。
VCは表に出てこないイケてるスタートアップの情報を大量に持っている。ぜひお話ししましょう！
給与をストックオプションでもらったほうがメリットが大きい(こともある)

16:00～16:45 今すぐアイデアを形にするたった1つの方法

アマゾンウェブサービスジャパン株式会社　西谷圭介氏

Amplifyのライブコーディング&デモ。

流れるようにチャットアプリを作っていましたが、作業をしていたのでしっかり見られず。Amplify覚えると便利そう。

17:00～19:00 Networking hour

LT大会第1部: スタートアップ新プロダクト紹介LT祭り
LT大会第2部: AWS Loft Tokyo の達人による、「オレ流 Loft 活用術」

メンチカツ

ロースカツが好きです