React is wildly popular and thus widely supported. TypeScript is increasingly popular, and thus increasingly supported. Over the past few years, the two have been increasingly used together. But this combination changes quickly, which makes it difficult to find accurate up-to-date learning materials. Finding learning materials for them with test-driven development (TDD)? Harder still. This series

The New TypeScript Handbook has some real gems in it. Here's what it has to say about generics: Writing generic functions is fun, and it can be easy to get carried away with type parameters. Having too many type parameters or using constraints where they aren't needed can make inference less successful, frustrating callers of your function. It goes on to offer a few specific pieces of advice about

プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da

DenoとNode.jsは両方ともV8をバックエンドにしたサーバーサイドJavaScriptランタイムだが、そこには大きな違いが存在するkeroxp.icon

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、

結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。

この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ

（TypeScriptに限らずJavaScriptでもだいたいこのような感じだと思いますが） 例えば以下のようなコードを書くと，出力としては {"body":{}} が得られます． const body = new Map<string, string>().set("foo", "bar"); console.log(JSON.stringify({body})); 本当は {"body": {"foo": "bar"}} のような構造がほしいところにこれでは困るわけですね． そこでどうするかと言うと Object.fromEntries() を利用すると良い: developer.mozilla.org 2019年11月現在だと比較的新しい機能ですね． const body = new Map<string, string>().set("foo", "bar"); console.l

Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up A 100% compliant, self-hosted typescript parser that emits an ESTree-compatible AST https://buntis.github.io/buntis/

(this blog has a Korean translation here) In the many projects I have maintained so far, sooner or later I always run into the same issue: circular module dependencies. Although there are many strategies and best practices on how to avoid circular dependencies. There is very little on how to fix them in a consistent and predictable way. Usually, people move import statements or blocks of code rand

We’re pleased to announce TypeScript 3.7 Beta, a feature-complete version of TypeScript 3.7. Between now and the final release, we’ll be fixing bugs and further improving performance and stability. To get started using the beta, you can get it through NuGet, or use npm with the following command: You can also get editor support by Downloading for Visual Studio 2019/2017 Following directions for Vi

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

前回の続き。 nomusiclife.hatenablog.jp 作成したGraphQLサーバをモニタリング可能な状態にする。 Apollo Engine Apollo Engine | The GraphQL Gateway with essential features like caching and performance tracing. GraphQL caching Query execution tracing Error tracking Trends などの機能を備える モニタリングしたいだけなのでcachingは今回使わない アラートは有償版でのみ有効 有償版は$99/mo~(割と高い) プラン一覧 導入 最初にGraphQLのスキーマをアップロードする npm i -g apollo apollo schema:publish --endpoint=<your gr

前回の続き nomusiclife.hatenablog.jp ZEIT Nowにデプロイする Deploying Node.js Apps - ZEIT Documentation 詳しい方法は公式ドキュメントに譲るとして... 一般的なnode appは特に設定をしなくてもプロジェクトディレクトリで now コマンドを実行すればデプロイされ、利用可能な状態になる。 npm scriptsの "start" がエントリーポイントになるので、以下のように設定しておく。 "scripts": { "start": "ts-node src/index.ts" }, now.json また、設定なしでデプロイした場合URLにプロジェクトディレクトリ名が勝手に入ってしまうため、 now.jsonの "name" で明示的にプロジェクト名を設定しておくとよい。 { "name": "graphql

モックサーバの実装 前回 nomusiclife.hatenablog.jp 1. 型の定義を行う import { ApolloServer, gql } from 'apollo-server' const typeDefs = gql` type Person { id: ID name: String phone: String } type Query { people: [Person] } ` const mocks = { Query: () => ({ people: () => new MockList([2, 5]), // 2~5件の[Person]が返る }), } const server = new ApolloServer({ typeDefs, mocks, playground: true, }) const port = 4004 server.lis

GraphQLのモックサーバを作る際に使うものをメモ 使うもの TypeScript ts-node, ts-node-dev apollo-server, apollo-engine Zeit Now TypeScript 型があったほうが書きやすい 最近はクライアント(React)も全てTypeScriptで書いてるし... apollo-serverのパッケージには型情報が含まれている ts-nodeとts-node-dev 本番はともかく、パフォーマンスを必要としないdevでいちいちコンパイルしてから実行するのはめんどくさい ts-nodeを使えば.tsをそのまま実行できる とある案件のdev環境でしばらく使っているが安定稼働している ローカルで開発を行う際にはts-node-devを使う --respawn オプション付きで起動するとファイルの更新を検知して再起動する Apoll

If you come from traditional, strongly typed languages you might be familiar with the concept of void: A type telling you that functions and methods return nothing when called. void exists in both JavaScript as an operator and in TypeScript as a primitive type. And in both worlds void works a little bit different than most people are used to. void in JavaScript # void in JavaScript is an operator

こんにちは。バックエンドエンジニアの西尾です。 スペースマーケットではAPIサイドは主にRailsを利用していますが、最近は一部サービスでNode.js+Typescriptを使い始めました。 個人的にはまだ触れていなかった領域であったのでお勉強がてら簡単なコードを書いてみたいと思っていました。 また、Node.jsの他にもう一つ最近気になり始めていたものにClean Architectureという設計思想があり、Clean Architecture 達人に学ぶソフトウェアの構造と設計を読んでいます。 本の概要は、アプリケーションが成長するに従い徐々に改修コストが上がってしまう、これを防ぐためにはうまい方法、つまり良い設計を知っている方法があるという導入から始まり、設計の歴史、原則とそれを実現するための１手段としてClean Architectureという設計思想について語られています。