Todoアプリを作りながら、React, TypeScript, Tailwind CSSが学べる本です。
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ! 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ! フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ! ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules(以後ESMと表記)がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。 本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。 従来の C
この記事について Zenn では長らく通信処理に Axios を使っていました。 しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。 この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は!!! って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しようと思います。 まず一番良くなったところといえば、ずばりサイト全体のビルドサイズが 10 KB も減りました。( ちなみに、10 KB は圧縮時のサイズで、圧縮しない場合 100 KB になります 😇 ワーオ ) グローバルのビルドサイズが 103.35KB gzip 時
ひさしぶりにblog記事書きます 本エントリはカケハシ Advent Calendar 2023 Part 2の 15日目の記事に入れてもらってます。カケハシ Advent Calendar Part 1 もあり、様々な職種の方が記事を書いているので、ぜひご覧ください。といってもそもそもこのblogでは初出であるカケハシってなんだ?という話からしなければなりません。このAdventが書くきっかけになったのですが、そのあたりの近況報告も兼ねて最近こんなことをやっているというアップデート記事です。 転職していました 実際に新しい所属になったのは今年の10月1日からで、もう2ヶ月半くらい経っているのですが、本当にあっという間でした。Twitterではいろいろ投稿していたので見ていた方はご存知かも知れません。現在は株式会社カケハシというところで、ソフトウェアエンジニアとして新しい事業ドメインを起ち
JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」(Shell)と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に
この記事はタナイ氏によるPython滅ぼす協会に入会したいを読んでから執筆したものです。 この記事の趣旨はPython滅ぼす協会に入会したいに対する反論という形をとりながら、タナイ氏により「バカの言語」と揶揄され、「使ってエンジニアを名乗るというのは」「滑稽」とまで言われたPythonの立場を再考することです。 追記 本記事は「Pythonはこれだけ優れた言語だからみんな使おう!」というものではなく「言うほど酷くないと思うよ」程度のものです。 型アノテーションがあるからと言って静的型付けを軽視しているわけでもなければ、map関数をもってmapメソッドを不要だと言っているわけでもありません。 この記法は嫌い〜この記法が好き〜と表明することは個人の自由ですが、同様に「この記法は実はこういう意味があって〜」という意見があればそれを聞いた上で、物事を判断して欲しいです。もちろん、聞いても意見が変わ
明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。 これからはじめるReact実践入門 目次 目次 かなり網羅性が高い 足りない情報があったら プロを目指す人のためのTypeScript入門 Next.jsについて、次に読む本はありますか? 補足したいところ Create React Appを使わない選択肢もある Recoilさんは開発状況がちょっと心配 React Routerの知識が活きるアプリケーションフレームワークもある まとめ おまけ 2023.9.28 10:36追記 かなり網羅性が高い パラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。 Chapter 1 イントロダクション 1-1 ReactとJavaS
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか?? なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...? ヴァイト...?) この記事では、Vite についての基本的な情報をまとめてみます。 発音? 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite(フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音)は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
はじめに ニコニコ生放送でフロントエンドを担当している misuken です。 今回は関心が分散してしまう理由やその原理、この問題に対する適切な対処法を通して、package by feature の合理性や、そこで重要になってくる関心の単位などについて解説していきます。 規模の大きなものを扱っている方、分類が苦手な方、分類に関して悩みを感じている方には特に有用です。 前提 Reactでコンポーネントを管理する例で説明します 当然React以外の様々なディレクトリ構成でも応用できます BCD Design の概念も覚えておくとより体系的に理解できます 精度の高い明名ができれば、分類の効率も精度も上がります 現実世界で捉える関心の分散 通常、自宅や職場でトイレに行くとき、同じフロアや同じ建物内のトイレに行きます。 もしもトイレだけの建物が隣に建っていて、そこに行かなければならないとなったらと
導入経緯 当社は受注開発のIT企業である。2023年に長らくお世話になったVimの利用を辞め、VSCodeを使い始めた。 当社の実情 当社のエンジニアは2022年時点で全員がVimを使っていた。当時の案件はメインがRuby on Rails関連であったことも相まって、世に出回る便利なエディタ、IDEに関する情報感度が極めて低かった。 Rails案件ではVimを使うことに対して大きな問題はなかった。補完がある程度効けばバックエンドの実装に支障がないからである。エンジニアとしてそれでいいのかという葛藤は当然あったが、当社のエンジニアは日々の業務をこなすことに集中していた。 (設立当初から積み上げられた歴史としてのvimrc) 転機 ついにその時が来てしまった。 そう、Vue、Typescript案件が唐突に現れたのである。 当社のエンジニアは皆狼狽した。 Vimで培われた爆速タイピングは、es
Pythonが教育用途において十分だという話 今話題のPythonを教えている現役の講師です。Pythonを教える際に重視すべきだと考えている機能等について書いておきます。 dataclass / Pydantic 自分は型ヒントよりもdataclassやPydanticを使った型付けを重視しています。いわゆるクラスベースな言語の書き方が大事だと考えています。 dataclass Pythonは動的型付け言語であり、interface相当の機能すらclassの構文で書く変わった言語です。近年Pythonの型ヒントは少しづつ充実してきていますが発展途上であることは否めないですし、何より実行時にその型であることは保証されないので、dataclass等を使った開発スタイルが依然強力だと考えています。 Python+TypeScriptというようなスタックを使う際には両言語の差に混乱するでしょう。
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性(concurrency):Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ(composability):小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理(resource-safety):処理が失敗したとしても、安全にリソースを開放する 型安全性(type-safety):TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理(error handling):構造化された信頼性の高い方法でエラーを処理する 非同期性(asynchronicity
起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ(Next.js & Typescript) アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
はじめに 自己紹介 初めまして、@kakekakemiya と申します。 現在は東京大学大学院学際情報学府の修士 1 年で、フロントエンドエンジニアとして活動しています(25 卒の就活生です)。TypeScript × React × Next.js が主戦場ですが、Flutter でモバイルアプリを開発するときもあります。 今回は自分の TypeScript 力の向上のために、合計 170 問あるType Challenges を全問解いたので、Type Challenges における推し問題を紹介しながら、型パズルを解く上でのエッセンスを述べていく記事を書いてみようと思います。 Zenn での初投稿なので、何かと至らない点があるかもしれませんが、よろしくお願いします。 この記事の想定読者 TypeScript の型システムに興味がある方 Type Challenges が気になっている
この記事は、弁護士ドットコム株式会社の Advent Calendar 2023 の 22 日目の記事です。 前日は @et_tei さんの「FireHOL で公開されているブラックリストからの接続 Akamai でブロックする」でした。 こんにちは。税理士ドットコム事業部の @komtaki です。 数年間 TypeScript を業務で使っていたのですが、型パズルの Type Challenges をやってようやく TypeScript の本質を理解していないことに気づきました。 この記事では Type Challenges を通して、私のような型パズルが難しいと感じる人のために型パズルを理解するための言語機能と使い方を 8 つのポイントでまとめます。 この 8 つのポイントを理解すれば、いろんな型パズルが理解できるようになるはずです。 Type Challenges とは TypeS
こんにちは。デジカルチームの末永(asmsuechan)です。 この記事では、OpenID Connect の ID Provider を標準ライブラリ縛りでフルスクラッチすることで OpenID Connect の仕様を理解することを目指します。実装言語は TypeScript です。 記事のボリュームを減らすため、OpenID Connect の全ての仕様を網羅した実装はせず、よく使われる一部の仕様のみをピックアップして実装します。この記事は全4回中の第1回となります。 なお、ここで実装する ID Provider は弊社内で使われているものではなく、筆者が趣味として作ったものです。ですので本番環境で使用されることを想定したものではありません。なんなら私は ID Provider を運用する仕事もしておりません。 1 OAuth 2.0 と OpenID Connect 1.1 用語の
先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付/時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付/時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsなどがあるが、これらと異なるのは、ネイティブのDateオブジェクトを直接対象としていることである。 従来の日付ライブラリは、独自の日付プリミティブを提供することが一般的であったが、TempoではネイティブのJavaScript Dateオブジェクトと直接連携し、Intl.DateTimeFormatを活用することで、タイムゾーンやロケールのファーストクラスサポートを提供するだけでなく、ライブラリのサイズ削減
モチベーション そもそも TypeScript や JSX に詳しくないのでどう書くのがいいのか悩みたくない ESLint や Prettier の設定を なんとなく 設定して使ってしまっている Formatter / Linter 関連のライブラリの内容を理解せずにアップデートしてしまっている 依存関係は減らしていきたい Rust で書かれた言語向けの高速なツールが好き Rye とか Ruff とか efmt とか Biome Biome は Rust で書かれた Formatter / Linter を含むツール。本当におかしいくらい早い。 全然大きくないが、以下のソースコードに適用したときの速度。 $ pnpm run fmt > biome format --write ./src Formatted 114 file(s) in 11ms $ pnpm run lint > bi
Apps Script in IDE (ASIDE) supports modern, robust and scalable Apps Script development by providing a framework for a local coding environment capable of formatting, linting, testing and much more. Here are the main features: TypeScript Write your code in TypeScript. It will be automatically compiled and bundled when deploying Formatting / Linting Leverage the power of ESLint and Prettier to enfo
Digitization部 Bill One Entry*1グループの秋山です。 はじめに Domain Modeling Made Functionalというスゴ本 補講:Make Illegal States Unrepresentable バックエンドの処理を抽象化する 手続き型プログラミングの典型例 課題1:制約のないエラーハンドリング 課題2:低い可読性 課題3:エラーハンドリングの低い網羅性 Railway Oriented Programming TypeScriptで型安全にエラーハンドリングする ステップ1:サブ関数の出力はResult型で表現する ステップ2:サブ関数にResult型を入力できるようにする ステップ3:サブ関数を連結する ステップ4:網羅的にエラーハンドリングする おわりに 付録 TypeScriptの全文サンプル はじめに エラーハンドリングは重要な処
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信(今回はこれをAPIと呼びます[1])などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
type User = { name: string } type Admin = User & { permissions: string[] } const user: User = { name: "user", } const admin: Admin = { name: "admin", permissions: [], } User は名前だけを持つ型で、Admin は名前と権限を持つ型です。また、それぞれの型の変数も用意しています。 この後のコード例は極力シンプルにするため、やや不自然なコードになっていますがご了承ください[1]。 サブタイプとスーパータイプ Admin 型の変数は name プロパティを持ち、User 型の条件を満たしています。そのため、User 型の変数には Admin 型の変数を代入できます。 その逆は型エラーになります。User 型の変数には perm
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
サバイバルTypeScriptは有志で執筆を進めているTypeScriptのOSSドキュメントです。 今回、サバイバルTypeScriptのドキュメントをベースにTypeScriptに関する質問に答えてくれるGPTsを作成・公開しました✨ この記事ではGPTs公開の背景や作成手順、現状の課題などをまとめています。 GPTs公開の背景 LLMによるドキュメント検索は近い将来(既に?)一般的になると思い、サバイバルTypeScriptでも実験的にチャットボットでの情報アクセスを作成・公開しました。 ドキュメントの情報アクセスの課題 ドキュメントが多くなると、目次やサイトマップ、サイト内検索だけでは必要な情報にアクセスするのが困難になる。 チャットボットのメリット 雑な質問でも意図を汲んで、知りたい情報にアクセスしやすい 内容を要約して説明してくれるので、手軽に情報にアクセスできる 回答の信頼性
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く