サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
log.pocka.io
はじめに Storybook の公式アドオンである Addon Docs は、5.3 から Vue(や Angular や Web Components)におけるコンポーネントドキュメントの自動生成機能がサポートされるようになりました。 これは、コンポーネントを指定するだけでその Props や Events, Slots の型やコメントがドキュメントとして生成できる、というものです。 この記事では、如何にして Vue 版のドキュメントが自動生成されているのか、またその仕組みを Storybook 以外で使うことについて説明します。 コンポーネントの情報抽出 ドキュメントを自動生成するには、まずどうにかしてコンポーネントの(Props 等)を取得、またそれらに対して書かれたコメントを抽出する必要があります(メタ情報の抽出)。 この工程をまるっと行ってくれるのが、Vue Styleguidi
やりたいこと 型A = Promise<B>である際にAからBを導き出したい。 type A = Promise<B> type C = /* AからBを取り出したい */ やりかた inferを使う。 type PromiseType<T extends Promise<any>> = T extends Promise<infer P> ? P : never type A = Promise<B> type C = PromiseType<A> // B 型名の直後のextends Promise...はなくても動くが、使う際にわかりやすくなるため個人的には書くことを推奨。 ちなみにutility-typesというパッケージがこの型を公開しているので、ユーティリティ型を多用する場合はそちらを使ったほうがよい。 また、Bluebird のような似非 Promise を(or も)使いた
package.jsonの中のconfigプロパティ、使っていますか? configとは [公式リンク] JS のプロジェクトを動かす場合にはほぼ必ず作成するpackage.json、その中に設定するプロパティの一つです。 基本的な用途としては名前の通り、設定を保持することとなります。 値にはオブジェクトを指定することができ、その中身については自由に指定することができます。 // package.json { "name": "foo", "config": { "port": 8080, "dev": { "hmr": false }, // 何を書いてもおk "foo": { "bar": ["baz"] } } } また、npm configコマンドや.npmrcファイルによってユーザが値を上書きすることができます。 どういう風に使うの? 基本的な使い方としては、package.js
やりたいこと React でよくあるパターンとして、親コンポーネントの Props の一部 or 全部を子コンポーネントに渡す、というものがあります。 // Fooが受け取ったbaz以外のpropsをBarに渡す const Foo = ({ baz, ...rest }) => <Bar {...rest} /> // Quxが受け取ったbaz以外のpropsをdivに渡す const Qux = ({ baz, ...rest }) => <div {...rest} /> これを TypeScript で書く、というのがこの記事の目的です。 コンポーネントに渡す場合 extendsまたは Intersection Type を使います。 import { SFC } from 'react' interface FooProps { hoge: string fuga: number
概要 普段プライベート/仕事共に React を書くことが多いのですが、その中で得た知見や経験則といったものを、他の人のコードレビュー時や設計時に上手く伝えられないケースが多々ありました。また、他の人がどういった書き方をしているか、ということを知るのは引き出しの幅を広げたり意外な発見ができたりします。 そのため、これまでの自分の経験を元にした自己流ベストプラクティスを共有したいと思います。 なお、メモ的な役割があったり、感覚的な部分もあるのであまりまとまった文章になっていないです。 これらはあくまでも個人的なベストプラクティスであり全ての開発者/プロジェクトに当てはまるとは限りません。 全て TypeScript 導入を前提としています。 スタイリング可能なコンポーネント 原則全てのコンポーネントがclassNameとstyleを受け取り、最も外側にある要素に受け渡すようにします。これによ
はじめに 今の時代、GitHub を使って複数人で開発する場合は、基本的に Pull Request(以降 PR)を使って開発することが殆どだと思います。 GitHub 側もここを重要視しているようで、色々な新しい機能や改善を継続的に投入してくれています。しかし、実際の利用シーンではこれらの機能があまり使われておらず、原始的な PR を見ることが多々あります※1。 エンジニアならば自動化/効率化はして当たり前だよね!※2ということで、PR 周りの便利な機能や運用方法を紹介したいと思います。 ※1 ... 注: 個人の感想です ※2 ... 本音は「レビューめんどいからもっと楽させて」 準備編 PR を建てる前にリポジトリの設定をしておきましょう。 Pull request template 公式の説明ページ(English) PR のテンプレートを設定できる機能です(そのまま)。.gith
まえがき この記事は Webpack を使って単一ファイルコンポーネント(Single File Component)の Vue アプリケーションを作るチュートリアルです。 公式の日本語ドキュメントはかなりしっかりしています。 しかし、vue-cli を使わない通常の開発フローに沿ったチュートリアルや、単一ファイルコンポーネントの使い方等、実際に使うにあたって必要な情報がかなり少ないです。 本記事ではその部分のカバーをすることを目的とします。 対象読者は フロントエンド開発の知識がある(JS や CSS のコンパイル等) npm を用いた開発フローをある程度知っている Vue.js の名前くらいは知っている 最近の Javascript がある程度書ける くらいの人を想定しています。 つくるもの このチュートリアルでは、Vue.js を使ったカウンターアプリを作ります。 JS ファイルのビ
TypeScript には Promise や Symbol といった Javascript 特有のグローバルオブジェクト以外に、型を扱う上で便利になるような組み込みのジェネリックな型関数※1が存在します。これらは非常に便利で様々なプロジェクトで使われているので~すが、公式にリストもなく、説明も主にリリースノート等にしかないため、~使い方等を交えて説明を書いていきたいと思います。 なお、各定義はMicrosoft/TypeScript のsrc/lib/es5.d.tsにあります。 ※1 ... 型を受け取って新しい型を返す型。多分正しい呼び名ではない。 Partial 利用可能バージョン: TypeScript2.1~ リリースノート: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.ht
まえがき この記事はVue.js+Vuexなアプリケーションを、React+Reduxでよく用いられるContainer Componentパターンで設計する手法や、そのメリット/デメリット等について記載したものです。 想定読者 Vue.jsとVuexについて知っている UIのコンポーネント/ロジックのコンポーネント 一般的に、Vue.jsである程度の大きさのアプリケーションを作る際は、Vuexを使って状態管理をすることが多いと思います。その際の書き方や設計として、Vue.js公式では以下のようなものを推奨しており、一般的にもこれが採用されているようです。 <!-- todo-list.vue --> <script> import { mapActions, mapState } from 'vuex' export default { // StateをComponentで扱えるように
このページを最初にブックマークしてみませんか?
『log.pocka.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く