JavaScriptのOptional ChainingとNullish Coalescing Operatorでnullやundefinedと戦う
JavaScriptとの戦いの大部分は、undefinedとの戦いです。undefinedはあなたのプログラムに素早く忍び込み、全てを壊していくでしょう。 これはTypeScriptでも避けられません。undefinedになりうる値があれば、繊細なガラス細工に触れるときのように慎重に扱わなければなりません。 そんなundefinedとの戦いの中、ほんのちょっぴり役に立つ文法がJavaScriptに導入されたので、紹介したいと思います。 Optionalな値 コードを書いていると、「入力してもしなくても良い」値を扱いたくなる場合があります。例えば外部からデータをフェッチしてくる関数を作るときには、trueかfalseか未指定（undefined）を指定する「disableCache（キャッシュ無効化）」フラグが欲しくなるかもしれません。 そういったoptional（任意入力）の値を実現しよう
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
gts で TypeScirpt をすぐ書き始める - ぽ靴な缶
gts は Google の TypeScirpt style guide と Linter 設定が入った npm package。 googleapis 以下などの Google が公開している各種 TypeScirpt プロジェクトで使われている。 github.com TypeScript は大変気に入っているけど、新たにプロジェクトを作ってストレスなく開発するまで少し手間がある。 tsc --init して tsconfig.json を書き換えたり以前のプロジェクトからコピペしたり npm run build でコンパイルするように package.json の scripts を追加したり Linter や Formatter の設定も面倒くさい gts ならこれだけで十分設定されたプロジェクトができあがる。 $ npm init $ npm install --save-de
TypeScriptで関数型プログラミングしたい勢に推したいPipeline operatorの良さ - タオルケット体操
前置き Rubyで一瞬だけ湧いて出てきて消えたPipeline風演算子については忘れてください。あれはメソッド呼び出しの演算子であって今回取り上げるPipeline operatorとは似て非なるものです。 JavaScripterでも、Ramda.jsやRxJSを普段から使っている人には既知の内容だと思うのでこの記事は読まなくて大丈夫です。 ちなみに僕のステータスは関数型にわか勢なので認識に間違いがあったらなんらかの訂正もらえるとうれしいです。 Pipeline operatorとは 古くはML系の言語で定義されてF#やElixirの流行で一般に有名になった演算子こと |> です。 f a を a |> f と書けるようになります。 詳しくはこちらで: https://mametter.hatenablog.com/entry/2019/06/15/192311 覚えた方がいい理由 Ty
TypeScript Tutorial For Beginners: Your Friendly Guide
What is TypeScript and why you may want to use it? Learn more with this TypeScript tutorial for beginners and start adding types to your JavaScript code! TypeScript tutorial for beginners: who this guide is for The following guide is a TypeScript tutorial for JavaScript developers interested in learning more about TypeScript. That means a decent knowledge of "vanilla" JavaScript is appreciated, ev
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
【TypeScript】thisの使い方にハマった！thisを保持する3つの方法
photo by Brendio C#erが、それほど勉強せずにTypeScriptに足を踏み入れたせいで、thisの使い方にハマってしまった。 JavaScriptはちょっと勉強していたので、「thisは今の親オブジェクトを参照する」ということだけは知っていた。しかし、それだけでは認識が甘かったようだ。 サンプル用HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> <script src="app.js"></script> </head> <body> <h1>TypeScript HTML App</h1> <div id="content"></div> <button type="button" id="count-up">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
