本セッションでは、TypeScriptの型安全性と柔軟なモジュール設計を活かし、Web（Next.js）とCLI（inquirer.js）の両方から操作できるスクラム管理アプリをサンプルとした実践例を紹介します。 TypeScriptを選んだ理由は、強力な型システムとバックエンドとフロントエンドの…
TypeScriptで実践するクリーンアーキテクチャ ― WebからもCLIからも使えるアプリ設計 / CClean Architecture with Typescript Application
本セッションでは、TypeScriptの型安全性と柔軟なモジュール設計を活かし、Web（Next.js）とCLI（inquirer.js）の両方から操作できるスクラム管理アプリをサンプルとした実践例を紹介します。 TypeScriptを選んだ理由は、強力な型システムとバックエンドとフロントエンドの…
新刊『型システムのしくみ』の発売を4/18に予定しています
ご来店ありがとうございます。新刊発売予定のお知らせです。 2025年4月18日（金）、遠藤侑介著『型システムのしくみ ― TypeScriptで実装しながら学ぶ型とプログラミング言語』の発売を予定しています。なお、2025年4月16日（水）から開催されるRubyKaigi 2025会場のBOOKSTOREにて、著者サイン会に合わせた先行発売を予定しています（紙書籍のみ。部数には限りがあります）。ジュンク堂池袋本店様でも4月16日から販売していただける予定です。 『型システムのしくみ』について 多くのプログラミング言語では、さまざまな場面で「型」が登場します。特に静的型付き言語では、プログラムを実行せずに潜在的な問題をあぶり出す「型検査」の有用性が広く知られるようになりました。最近では動的型付き言語でも、型ヒントや静的解析ツールとして、この機能を部分的に取り入れる動きがあります。 型検査の背
TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
【最新版】フロントエンドを学べる最高の教材集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドを学べる教材をまとめました。 今回紹介するフロントエンド技術は下記になります。 ロードマップ (全体像) JavaScript TypeScript React Next.js 対象者 これからフロントエンドを学びたい人 モダンフロント技術に挑戦したい人 ロードマップ (全体像) エンジニア向けの学習ロードマップがまとめられている。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知れる。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、全体像を掴む上では一度目を通す価値はある資料にな
【DDD入門】TypeScript × ドメイン駆動設計ハンズオン
TypeScriptとドメイン駆動設計（DDD）を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。
【2024年最新】モダンフロント学習教材まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescript
TypeScript 本体のコードを読んでみよう
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
ワイ「いうても型なんて面倒くさいだけやろ？」 - Qiita
※登場人物等は全てフィクションです。 再就職したワイ 社長「やめ太郎くん」 ワイ「はい」 社長「今うちで開発中のブラウザゲームがあるんやけど」 社長「そのゲームの中に登場するジュースの自動販売機をプログラミングしてくれへんか」 ワイ「ええで」 社長「言語はTypeScriptや」 ワイ「・・・ええで（震え声）」 タイプスクリプト is 何 ワイ「なんやTypeScriptて」 ワイ「JavaScriptの打ち間違いか？」 ワイ「きっとそうやな」 ワイ「誰かがタイプミスで仕様書にTypeScriptって打ち込んでもうたんや」 ワイ「いわばタイポスクリプトや」 ハリー先輩「ちゃうで」 ハリー先輩「知らん言葉が出てきたからって変な妄想で自己解決したらアカンで」 ハリー先輩「なにがタイポスクリプトや」 ハリー先輩「TypeScriptは静的型付けが出来るAltJSや」 ワイ「ほえー、静的な型のある
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプロジェクト内のJavaScriptモジュールをひとつのファイルにまとめるバンドルと呼ばれる作業が必要でした。 これは、ブラウザがESモジュールに対応していないことや、ひとつのHTMLファイルから沢山のjsファイルをダウンロードさせると、その数だけア
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
【入門】フロントエンドのテスト手法まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の
より良いReactJS開発者になるための10のヒントとコツ - Qiita
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
Reactを学ぶときに役立つ情報・本など
React公式ドキュメントのチュートリアルは古くなっているので、TypeScriptやReact Hooksで開発することも考えて参照するときにおすすめできるサイトを置いておく。 ほかにも有益な情報はあると思うが、あまり多すぎても大変なので、被りがなさそうかつ有益だと思っているリンクに絞っている。 2021年11月30日に編集 React公式ドキュメントのリニューアルが公開されるまでの繋ぎ。 New React Docs · Issue #3308 · reactjs/reactjs.org https://github.com/reactjs/reactjs.org/issues/3308 React公式ドキュメントがBeta版で公開されています。まずはこちらを参照するといいと思います！
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
JavaScript学習ロードマップ - Qiita
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Workshop Studio
TypeScript による GraphQL バックエンド開発
