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]; //
[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする
はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。 Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d
![[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7c534f99c5939a78ed338eb6285e70b062ec2ee/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--VoVKpVgs--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520%2525E9%252596%25258B%2525E7%252599%2525BA%2525E4%2525B8%2525AD%2525E3%252581%2525AE%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252582%252592%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E8%2525A1%2525A8%2525E7%2525A4%2525BA%2525E3%252581%252597%2525E3%252580%252581%2525E6%25259C%2525AC%2525E7%252595%2525AA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525AE%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252581%2525AB%2525E3%252581%2525AF%2525E5%252590%2525AB%2525E3%252582%252581%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Azomysan%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4Mjg2YmNjMDEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASocialPLUS%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxYTI1OGI3MTQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
