開発覚書はてな版

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

標準化

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

概要 今回はAngular+Storybookのaddon-controlsを使用したサンプルです。(2020/6/21時点ではβ版です) addon-controls は@Input値変更をStorybook上で確認できるようになります。 addon-docsのインストールが必須になります。 Angularでaddon-controlsを使…

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

概要 今回はVue.js+Storybookのaddon-controlsを使用したサンプルです。(2020/6/17時点ではβ版です) addon-controls は addon-knobs と同様に Vue.jsのpropsへの値変更をStorybook上で確認できるようになります。 addon-knobs より設定が簡単になっています…

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

概要 今回はVue.js+Storybookのaddon-knobsを使用したサンプルです。 addon-knobs は Vue.jsのpropsへの値変更をStorybook上で確認できるようになります。 github.com Vue.jsでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatenab…

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

概要 今回はVue.js+Storybookのaddon-actionsを使用したサンプルです。 addon-actions は Vue.jsのemit時の動作をStorybook上で確認できるようになります。 github.com Vue.jsでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatena…

【Vue.js】Vue.jsでStorybookを使ってみた

概要 今回はVue.jsでStorybookを使用したサンプルです。 Storybookの説明やAngularでの適用例は以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com

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

概要 今回はStorybookのaddon-actionsを使用したサンプルです。 addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。 github.com AngularでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatenablo…

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

概要 今回はAngularでStorybookを使用したサンプルです。 Storybookとは Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。 小さく定義したコンポーネントを一覧化して確認が出来ます。 Addonを追加することで、Storybookに様々…

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

- Angularをチーム開発で始める時に知っておくとよいことをまとめます。 - 複数案件でAngularを触ってきて、個人的に参考になったものを記載していきます。

【読書】.NET、Javaでの標準化

概要 .NET FrameworkやJavaなどプロジェクトで標準化を行った際に参考した書籍を紹介。 対象の本 .NETのクラスライブラリ設計 開発チーム直伝の設計原則,コーディング標準,パターン作者: Krzysztof Cwalina,Brad Abrams出版社/メーカー: 日経BP発売日: 2016/…

【TypeScript】生産性・保守性を上げる記事一覧

目次 目次 概要 パスエイリアス index.ts(バレル) 定数クラス 拡張メソッド 自動フォーマット(要VSCode) 概要 TypeScriptで生産性・保守性を上げる記事一覧を記載。 このサイトの過去記事より抜粋。 このあたりが一通り実装されているプロジェクトは自分が…

【VSCode】TSLintを使用してコードを自動フォーマットする

概要 Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com

【TypeScript】パスのエイリアスの設定方法

概要 TypeScript利用時に自作のファイルのディレクトリ階層が深くなっていくと import文を相対パスで記載するのがつらくなってきます。 そういう場合、tsconfig.json の compilerOptions.paths を設定することでパスのエイリアスを設定することができ、impor…

【TypeScript】index.ts(バレル)の使い方

概要 TypeScript利用時に毎回ファイル単位でimportするのは面倒ですね。 そういう場合、index.tsに対象ディレクトリのファイルをまとめて export しておくと便利です。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載すること…

【読書】良いコードを書く技術

概要 保守性の高いコードは何かを考える機会があった時に定期的に読み直す本です。 内容の抜粋や感想等を記載したいと思います。 良いコードを書く技術 ?読みやすく保守しやすいプログラミング作法 (WEB+DB PRESS plus)作者: 縣俊貴出版社/メーカー: 技術評…

【TypeScript】拡張メソッドの実装(基本型)

概要 declare global + interface で追加したいメソッドを追加後、prototypeにメソッドを追加します。 拡張メソッドを利用したい場合は、importをすることで利用できます。 詳細についてはサンプルソースを確認。 ちなみに拡張メソッドは他の開発言語でもあ…