はてなブックマーク

useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri

GraphQL を使ったプロダクション開発では、GraphQL API とフロントエンド間の疎通に関しては型安全な状態を実現できる。しかし、GraphAPI の Resolver が叩く API のレスポンスについては当然ながら GraphQL の管理対象ではないため、この部分の型安全は保証されない。では GraphQL が型安全を担保してくれるわけではない Resolver 内で実行する API からのフェッチについて、型安全を保つためには、何が必要か。 様々な手法があると思われるが、今回は自分の実案件で導入した io-ts を用いる動的な型チェックを紹介する。これは通常 TypeScript がコンパイル時に行う静的型チェックではなく、実行時に行うことができる型チェックである。 https://codesandbox.io/s/admiring-edison-0j9qq?fontsiz

<template> <h2>My name is Nakanishi.</h2> </template> <script></script> <style></style> <template> <div class="wrapper"> <Name /> <h2 class="title"> Vue + Vuex<br /> 入門コース </h2> <p class="body">わかりやすいと評判！！</p> </div> </template> <script> import Name from "./components/Name"; export default { components: { Name } }; </script>

Valid TypeScript ごとのページ

参考コード props を直接変更してはいけない。なぜなら、あくまで受け取っているものだから。 変更する場合には、大元の状態を変更しなければいけない。 今回は、状態を変更する changeHeight メソッドを作って、これを Props として子コンポーネントに渡していった。 普通の値だけではなく、関数も Props として渡すことができる。 changeHeight は変化量を引数として受け取ることができるので、これをつかって +1/-1 を切り替えている。 状態は一番上のコンポーネントだけで管理し、これを変更するメソッドを Props として渡していく手法は一般的なものなので身につけて欲しい。 <template> <div> <Member :changeHeight="changeHeight" :data="member" :teamName="teamName"/> </di

先の章において type system の概念を説明しましたが、そもそも type が何を意味するのかについて明確に定義をしませんでした。 Type 型とは：型とは、値の集合であり、その集合に対して実行できることの集合である。 少しわかりにくいと思うのでいくつか例を示しましょう。 boolean type は、全ての boolean 値（といっても二つしかないが。true と false の二つである）の集合であり、この集合に対して実行できる操作の集合である。 number type は全ての数値の集合であり、この集合に対して実行できる操作の集合である(例えば +, -, *, /, %, ||, &&, ?)である。これらの集合に対して実行できる操作には、.toFixed,　.toPrecision, .toString といったものも含まれる。 string type は全ての文字列の

合法な TypeScript の使い方の説明です。

さて、あなたはこの TypeScript の本を開くことに決めたわけですが、それは一体全体なぜでしょうか？当ててみせましょう。 多分、JavaScript のエラーメッセージが表示する「undefined には blah というプロパティは存在しません」というわけのわからない警告に嫌気がさしたからでしょう？そうじゃないなら、どこかで　TypeScript を使うことによってアプリケーションが大きくなってもうまく code をスケールさせることができると聞いたけれど、でも本当にそんなことできるのか？と疑心暗鬼だからですね。もしくはあなたは C# のエンジニアで、JavaScript 自体を使ったことがないので TypeScript から JavaScript を始めてみようと考えている。そうでもないなら、あなたは関数型のプログラミングを実践していて、その技術を TypeScript によって

これからの何章かは、TypeScript という言語そのものの紹介をしていきます。TypeScript Compiler(TSC) がどのように機能するのか、それからTypeScript の各機能の紹介、さらにこれらの機能を使ってどのような開発をすることができるのかといったことです。まずはコンパイラーから始めることにしましょう。 The Compiler これまでどんな言語を使ってきたかによって、プログラムがどのように機能するのかということについてあなたが持っている概念は異なるはずです。TypeScript は、JavaScript や Java といった一般的で主流な言語とはそれが異なるので、まずこれを理解していきましょう。 ざっくりいうと、プログラムはプログラマーが書いた大量のテキストを保持するファイルです。テキストは、compiler とよばれるプログラムによって parse = 品

v-model は汎用性が低い v-model は一見便利そうに見えますし、Vuetify のコード例にもたくさん出てきますが、v-model は汎用性が低いので、大型アプリケーションにおいては使う機会が非常に少ないと思います。特に Vuex 等の state 管理用のライブラリを使用している場合にこれは顕著です。 v-model を使わない方法は？ v-model は一般的には :value="something" @input="handler" のシュガーシンタックスだと言われています。ただ、ドキュメントでもあまりはっきりしないのですが、実際には必ずしもそうではありません。 Vuetify の checkbox の場合は？ https://vuetifyjs.com/en/components/selection-controls Veutify の checkbox は :valu

CodeSandbox で Vue プロジェクトを始めよう CodeSandbox で Vue プロジェクトを始めよう main.js が Vue のアプリケーションを始めるためのエントリーポイントになっている App.vue を変更してみよう Style 機能を使って見た目を変えてみよう Scoped CSS を使って、メンテナブルな CSS を書こう 初めての Vue Component の import と使用 普通の Web Page を Vue の Component を活かしながら作成する main.js における new Vew() の設定項目詳細 Scoped CSS の例外的挙動について 宣言的レンダリングと Reactive Data 値の変化に追従する UI を作成するのに便利 Vue の template から参照できるのは Reactive Data のみ DOM

Context は「状態」と「状態を変更するメソッド」を、アプリケーション全体で取り回せるようにさせるために用いる Context.Provider を用いて値を渡す Contect.Consumer を用いて値を受け取る Hooks.useContext を用いれば、Contect.Consumer 相当の役割を果たすことができる 原理的には恐らく、Functional Component が持ち得ない、もしくは持ってはいけない、副作用を差し込む = Hook させるためにある 主要なユースケースとしては、Class Component にしかなく、Functional Component にはなかった state, lifecycleMethod といった機能を Functional Component に持たせるために用いる（useState, useEffect） Context

JavaScript の本、何を読めばいい？ 本屋さんにいくと JavaScript の本がたくさんあります。どれを買えばいいか悩むと思います。 私は書籍フリークなので、他人が見たら引く頻度で本屋さんに通っており、JavaScript コーナーの本はだいたい目を通しました。 そんな私の個人的なオススメの書籍を紹介します。 プログラミング経験が無の人 全くプログラミングをしたことのない人にオススメです。 以下の人にはオススメしません。なぜならこの本はかなり初歩的な概念しか扱わないため、経験者にとっては得られる知識がほとんどないからです。 他の言語をやったことがある 変数、配列、関数、条件分岐と言われてなんのことかわかる 簡単なものであっても仕事で JavaScript を書いたことがある 次に紹介する三冊が難しいと思う人向け 次の項で三冊紹介するのですが、その三冊を軽く読んでみて、全然わから

Gatsby で CSS を扱う方法は様々ありますが、伝統的な Sass を使ったコーディングをすることもできます。 https://www.gatsbyjs.org/packages/gatsby-plugin-sass/ まず必要なプラグインを二つインストールします。

Apollo 公式キュメントを翻訳しました https://apollographql-jp.com/ GraphQL を始める 社内の新しいプロジェクトで GraphQL を使用することにしたので、資料を読んで実装し始めました。それにあたって、有用だった資料と、実装の tips をここにまとめます。 Gatsby で GraphQL の問い合わせに慣れる 本サイトは Gatsby という React ベースの静的サイトを作成するために最適なアプリケーションを使用していますが、Gatsby はデータを取得するために GraphQL を標準で使用します。そのためのチュートリアルも丁寧に用意されており、この過程を通じで私は GraphQL のクエリを書いてデータを取得するという流れに慣れました。 この時点での私の理解は「API を Axios 等で叩く代わりに、GraphQL というシステムが

JavaScript の宝石箱や！！JavaScript の初心者から、職業エンジニアまで、幅広く役立つプログラミング情報を、JavaScript おじさんこと中西が提供します。

JavaScript の初心者から、職業エンジニアまで、幅広く役立つプログラミング情報を、JavaScript おじさんこと中西が提供します。