開発覚書はてな版

個人的な開発関連の備忘録

【Vue.js】Vue.jsでStorybookを使ってみた - addon-knobs編

概要

  • 今回はVue.js+Storybookのaddon-knobsを使用したサンプルです。
  • addon-knobs は Vue.jsのpropsへの値変更をStorybook上で確認できるようになります。

github.com

  • Vue.jsでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

続きを読む

【Vue.js】Vue.jsでStorybookを使ってみた - addon-actions編

概要

  • 今回はVue.js+Storybookのaddon-actionsを使用したサンプルです。
  • addon-actions は Vue.jsのemit時の動作をStorybook上で確認できるようになります。

github.com

  • Vue.jsでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

続きを読む

【Angular】AngularでStorybookを使ってみた - addon-actions編

概要

  • 今回はStorybookのaddon-actionsを使用したサンプルです。
  • addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。

github.com

  • AngularでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

続きを読む

【Angular】AngularでStorybookを使ってみた

概要

今回はAngularでStorybookを使用したサンプルです。

Storybookとは

  • Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。
  • 小さく定義したコンポーネントを一覧化して確認が出来ます。
  • Addonを追加することで、Storybookに様々な機能を追加できます。 storybook.js.org
続きを読む

【VSCode・Deno】DenoのテストをVSCodeでデバッグする

概要

Visual Studio Code で Deno のテストをデバッグする設定を記載します。

通常のデバッグ実行の記事は以下を参照してください。 kakkoyakakko2.hatenablog.com

続きを読む

【VSCode】おすすめ拡張機能 - Deno

概要

Visual Studio Code でDeno向けの拡張機能のご紹介です。
複数のDeno向けの拡張機能がありますが、今回は以下の拡張機能を紹介します。

marketplace.visualstudio.com

続きを読む

【VSCode・Deno】拡張機能:Remote - Containers で Deno の開発環境を構築

概要

Visual Studio Code拡張機能「Remote - Containers」で Deno の開発環境を構築してみました。

marketplace.visualstudio.com

Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照してください。 kakkoyakakko2.hatenablog.com

Denoとは

deno.land

  • Node.jsの後継的なもの。
  • TypeScriptベースでの開発。
  • import はURL指定に変更。Go言語チックになっています。
  • ファイルアクセス、ネットアクセスなどの制限が可能
続きを読む

【Angular】Angularをチーム開発で始める時に知っておくとよいこと

目次

  • 目次
  • 概要
  • 標準化全般
    • Angular コーディングスタイルガイド
  • デザインパターン・プログラミング技法
    • Presentational / Container Component の分離
    • Model View ViewModel(MVVM)パターン
    • リアクティブプログラミング
    • Flux
    • オブジェクト指向プログラミング(OOP
    • アスペクト指向プログラミング(AOP
    • 依存性の注入(DI)
  • 開発言語
    • TypeScript
    • TSLint/ESLint
  • テスト
  • おわりに
続きを読む