TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
TypeScript - 'true'や'false'の文字列をboolean型に変換する
// Boolean('true') -> true console.log("Boolean('true')"); console.log(Boolean('true')); // Boolean('false') -> true console.log("Boolean('false')"); console.log(Boolean('false')); // Boolean('1') -> true console.log("Boolean('1')"); console.log(Boolean('1')); // Boolean('0') -> true console.log("Boolean('0')"); console.log(Boolean('0')); サンプルプログラムの実行結果 正しい方法 文字列が 'true' か判定し、一致すれば true とします。 'TRU
TypeScriptで書いたプログラムをPython等で動かす魔法の「jsii」を紹介 - Qiita
まず結論から書くと、下記の図のような事ができます。 上側に表示しているTypeScriptで書いたプログラムを、下側のPythonプログラムから実行している例です。 これは、jsiiというライブラリを使って、TypeScriptプログラムをPythonで実行可能なライブラリに変換しています。公式ドキュメントにthe magic happensと書いてあるとおり、魔法のような技術です。 jsiiはPythonの他にもJavaなどの言語で利用できますが、本稿ではTypeScriptで書いたプログラムをPythonで実行します。 実際にやってみましょう。 本稿の実行環境 TypeScript 3.6.4 Python 3.7.5 Node.js 13.1.0 jsiiを使ってみる jsiiは大まかに、下記のような流れで利用できます。 TypeScriptでプログラムを記述 jsiiを使って他言語
AWS CDKの学習方法 ドキュメントや学習コンテンツをまとめてみる | DevelopersIO
「AWS CDK？学習コスト高そう。。」 AWS CDKは、プログラミング言語でインフラを定義できる便利なツールです。 反面、プログラミングに慣れていない人には学習コストが高そうに感じるかもしれません。 AWS CDKを使ったことがない方が学習を進めるのに役立つドキュメントや学習コンテンツをまとめてみました。 以下のような方の、参考になると嬉しいです。 AWS CDK何から始めればいいのかわからない 概要は知っているけど触ったことはない プログラミング言語を使うことにハードルを感じる 入門 とりあえず動かす とりあえず、動かしてみましょう。 CDK入門には「CDK Workshop」が有名ですが、以下の方がボリュームは少ないのでファーストステップにおすすめです。(所要時間 25分) AWS Cloud Development Kit (CDK) の開始方法 | はじめに こちらのガイドでは
流行りのBFFアーキテクチャとは？｜Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。2022 年 2 月入社でそこまで日が経っていないので、今回は社内の技術スタックではなく、今後社内でも検討されるかもしれない「BFF」について触れていきたいと思います。BFF（Backend For Frontend）導入することで得られるメリット/デメリット、GraphQL を用いた技術スタック事例など紹介していますので、ぜひ参考にしてもらえればと思います。 BFF とは？ BFF とは、Backend For Frontendの略称で、「フロントエンドとバックエンドの中間に配置され双方の複雑な処理を緩和させる責務を持つアーキテクチャ設計パターン」のことです。これだけだと分かりづらいので簡単にまとめると、「バックエンドの API
2021年のまとめ・反省 - mizchi's blog
年内に間に合わなかった… 2021年に主にお世話になった言語・ライブラリ TypeScript React chakra-ui dnd-kit Node Vite esbuild Docker(=> lima) とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。 サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コン
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
TypeScriptの型: 辞書型を定義する (Dictionary)
辞書オブジェクトを作成するJavaScript の配列は、もともと「キー＆値」を扱う連想配列として使用することができますが、TypeScript のタイプアノテーションを使うと、キーの型と値の型 を明示した辞書 (Dictionary) オブジェクトを作成することができます。 次の例では、文字列のキーと、数値の値を持つ辞書オブジェクトを作成しています。 // 辞書オブジェクトを作成する const userAges: { [name: string]: number } = {}; // 辞書オブジェクトを使用する userAges['maku'] = 14; userAges['hemu'] = 6; console.log(userAges['maku']); //=> 14 console.log(userAges['hemu']); //=> 6
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-no
TypeScript学習ロードマップ - Qiita
TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ
2019年前半の「JavaScriptをちゃんとやるための地図」（追記あり）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
Notable - 添付ファイルも使えるMarkdown記法のメモ
メモを取るソフトウェアは何を使っていますか。テキストエディタをそのまま使っている人もいるでしょうし、ブログエディタを利用する人もいるでしょう。個人的にはこれまでBoostnoteを使ってきました。 そこにきて強力なライバルの登場です。今回紹介するのはNotable、Markdownベースのメモソフトウェアです。 Notableの使い方 メイン画面です。3カラムの構成になっています。 編集モードです。 添付ファイルが追加できます。 スターを付けてお気に入りに登録したり、ピン止めすることもできます。 タグも自由に設定できます。 Notableの作者は類似のソフトウェア（Boostnoteを含む）を多数比べた上で、自分の気に入ったものがなかったために作成したようです。特にタグのネスト、柔軟な検索、添付ファイルなどが他と比べて特徴的になっています。 NotableはTypeScript製のオープン
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS/TS Import/Export Sorter - Visual Studio Marketplace
type-challenges/README.ja.md at main · type-challenges/type-challenges