はてなブックマーク

Nuxt はずっと前から気にはなってて、でも「今回は SSR しないからいいや」とか「今回は静的サイトジェネレーターで作るからいいや」とか思って避けてきたけど、なんか最近 Nuxt 使うって話を 3 回くらい聞いたので、ちょっと使ってみて構成とか眺めてみようと思う 先に使ってみた感想を述べておくと Nuxt の公式ドキュメントがちゃんと作られているので、これだけ見れば大体解決した 後述してますが TypeScript とか Vuex とかとても簡単に導入できるので感動した webpack 周りが隠蔽されてる 前に VueCLI v2 使ってみた時はけっこうビルド周りがむき出しになってた気がする（VueCLI v3 ではこの辺解決されてるっぽい） Vue で SSR する時に Nuxt を使うという印象を持っていたが、SSR モードか SPA モードか選べたので考えが違った フロントエンドチ

今までは EC2 を 1 台立てて、その中で Digdag サーバを立てて、上記全ての機能を担っていたが、それをやめて複数台の冗長構成にしたい REST API Server に関しては 1 台で、それ以外の Task Agent、Workflow Executor、Schedule Executor を行うサーバを冗長構成にする また、EC2 の AutoScalingGroup でオートスケール構成にする 割り込みタスクが即時実行されること（タスクのキュー待ちが発生しない） 現在、Digdag 上で毎時で約 450 タスクを起動するワークフローが実行されている 各々のタスクはすぐ終わるようなものではなく、キューから中々解放されない キューが溜まっている時に、割り込みタスクが入るとキューに残ったまま実行されないので、即時実行されるようにしたい 現在、Digdag サーバの起動オプションで

はじめに 仕事でChatBotを使ってDigdagコマンドを叩きたいっていう案件があって、あまりAWS触ったことなかったので、以下のような構成のものを作りました 案件を満たすだけであれば、ECSとかDockerとか必要なくて、Lambdaで出来そうだったんですけど、勉強のために使いました 今回の記事ではDigdag関連は全て省いてます HubotのDockerfileを用意 FROM node LABEL maintainer="kurosame" RUN npm install -g yo generator-hubot && \ useradd bot && \ mkdir /home/bot && \ chown bot:bot /home/bot USER bot WORKDIR /home/bot RUN yo hubot --defaults && \ npm install

はじめに 1年半前くらいに弊社のVue.jsプロジェクトのユニットテスト環境を「Karma + Mocha + power-assert」で作成し、現在までメンテナンスしながら使っていたが、「Jest + vue-test-utils」が非常に良さそうなので、環境を全て作り直すことにした 作り直したコードですが、弊社のコードは公開できないので、プライベートでメンテナンスしている以下のリポジトリで確認できる https://github.com/kurosame/vuejs-boilerplate Vue.jsとVuexとTypeScriptを使っている テスト対象 今回は以下をテスト対象とした Vuex Action Mutation Getter (State) ⇒ 初期値を設定する時に分岐などのロジックを入れた場合があれば書く Vue.js コンポーネント全て そもそもなぜテスト環境を

フロントエンドのビルド（webpack）に関わる部分でパフォーマンス改善を考える時に、 現状を可視化するため、いくつかプラグインを使ってみましたので、軽く紹介したいと思います 可視化したい対象は以下の2つです ・webpackの速度改善の為、遅いloaderやpluginを知りたい ・バンドルファイルのサイズを減らしたいので、バンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたい 今回分析に使ったコードはこちらです https://github.com/kurosame/vuejs-boilerplate 遅いloaderやpluginを知りたい speed-measure-webpack-plugin

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回初めてJavaScript(Babel)からTypeScriptへ移行したのですが、解決に悩んだ点をいくつかピックアップしてメモしておきます （現在も移行中なので今後もあれば追記していきます） 対象はこちらの環境になります VSCode webpack v3.8 Vue.js v2.5 TypeScript v2.6 ■ awesome-typescript-loaderを使った方が速いみたいだが、.vueだと使えない □ 対応 https://github.com/s-panferov/awesome-typescript-loader/issues/356 このissue見るとたぶん作業中 今は諦めてts-loaderにしてる ■ VSCodeの"prettier.trailingComma": "none"にしてるのに.tsの時だけカンマを付けてくる □ 対応 tslint.js

※今回weex-toolkitのv1.1.0-beta.7を使って環境を作ったのですが、 weex --helpで確認するとinitオプションがcreate a vue project (removed)になってました GitHubを確認すると、チュートリアル上はinitオプションを使っているのですが、 下の方のFAQにinitオプションは削除されたので、createオプションを使ってくださいと書いてあります 今回はinitオプションでも環境は作れたので、このまま進めます （環境を作った後にinitオプションがremovedになっていることに気付きました。。） 以下な感じで環境が作れました . ├── README.md ├── android.config.json ├── config.xml ├── hooks │   └── README.md ├── ios.config.jso

この辺の話 https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム 今の所、createdとmountedぐらいしか使ったことがないが、 予め知っておくと他のライフサイクル関数も使い所が分かってくるかもしれない beforeCreate インスタンスが初期化されるときに同期的に呼ばれる created インスタンスが作成された後に同期的に呼ばれる データの監視とイベントの初期セットアップが完了した状態 サーバーサイドからのデータ取得処理はここで行うのが良さそう createdまでがサーバサイドとクライアントサイドの両方で呼ばれ、 beforeMount以降はクライアントサイドのみで呼ばれる beforeMount インスタンスがマウントされる前に呼ばれる templateオプションがrender関数にコンパイルされた後に実行される

情報収集ツールとして、GoogleRSSリーダーが無くなってから、ずっとFeedlyを使ってきたのですが、1点困ったことが起きました Twitterの自分のタイムラインをFeedlyに登録して見てたのですが、Feedlyの更新間隔が3時間くらいかかる（公式だと1時間らしいが。。）ので、 フォローが増えてくると、追いつかなくなってきました 3時間単位で200くらい一気にFeedlyに送られてきます。。 しかも200超えてたら、全部取れて無い気もする。。 そのうちタイムラインに表示されるのを減らす必要はあると思いますが、 とりあえず、もっと更新間隔が速いRSSリーダーがないか探してみたところ、 「inoreader」が良さそうでした！ http://www.inoreader.com inoreaderだと、無料で特定フィードを10分間隔にできます！ ただし無料枠だと10フィードまでらしいです

const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 社内発表用として作成中の資料です。 （4/14発表しました。） Vue.jsとは [1.x] ・ MVVMという設計思想を用いている ・ 同じMVVMのKnockout.jsより、分かりやすくてシンプルなAPIを提供しているらしい ・ Vue.jsのいくつかのAPIはAngularJSから影響を受けているらしい（ただし設計思想は全く異なる） ・ AngularJSの経験者はVue.jsのディレクティブを見ると、どうゆうものかすぐ分かると思います。 [2.x] ・ 2016年10月に正式版リリースされた新しいライブラリ ・ コンポーネント指向を取り入れている ・ 仮想DOMを採用 ・ React.jsとAngularの良い所を採用して作られたようなライブラリ コンポーネント指向 Vue.jsはReactなどで採用されているコンポーネント指向を取り入れている。 MVVMはModel,

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?