【必見】これから学ぶべきTypeScriptフレームワーク 4選
はじめに 今回の記事では、私の独断と偏見でこれから学ぶべきTypeScriptフレームワークを4つ徹底解説する。今回の記事を参考に、TypeScriptを深く学ぶことにつながれば幸いである。TypeScriptが使われているフレームワークは数多く存在するので、何から手を付ければいいのかわからない人も少なくないだろう。もしこの記事を読んでいるプログラマーがTypeScriptのフレームワークを選んでいるのに悩んでいたら、今回の記事は参考になるはずだ。 あくまで個人の一見解に過ぎないが、参考になれば幸いである。 これから学ぶべきTypeScriptフレームワーク Next.js Nuxt3 NestJS SolidJS それぞれ順番に解説する。 １．Next.js Next.jsはReactベースで開発されたTypeScriptフレームワークである。最大の特徴は、URLルーティングと呼ばれるリ
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新 オープンソースのJavaScript/TyeScriptランタイム「Deno」を開発するDeno Landは、「Big Changes Ahead for Deno」（Denoの方向性の大きな変更）という記事を公開し、Denoのnpmパッケージへの対応や高速化などの新たな取り組みを発表しました。 Big changes ahead for Denohttps://t.co/Q5xKz3bJLg — Deno (@deno_land) August 15, 2022 今回の発表では、npmへの対応、最速のJavaScriptランタイムを目指す、企業向けサポート、という3つの大きな取り組みが示されています。 3カ月以内にnpmパッケージをインポート可能に
流行りのBFFアーキテクチャとは？｜Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。2022 年 2 月入社でそこまで日が経っていないので、今回は社内の技術スタックではなく、今後社内でも検討されるかもしれない「BFF」について触れていきたいと思います。BFF（Backend For Frontend）導入することで得られるメリット/デメリット、GraphQL を用いた技術スタック事例など紹介していますので、ぜひ参考にしてもらえればと思います。 BFF とは？ BFF とは、Backend For Frontendの略称で、「フロントエンドとバックエンドの中間に配置され双方の複雑な処理を緩和させる責務を持つアーキテクチャ設計パターン」のことです。これだけだと分かりづらいので簡単にまとめると、「バックエンドの API
DenoがJavaScriptの標準化を行うTC39ワーキンググループに参加を発表
Node.jsの作者であるライアン・ダール（Ryan Dahl）氏が新たに立ち上げ、サーバサイドでJavaScript/TypeScriptを実行するためのオープンソースのフレームワーク「Deno」と、その分散ホスティングである「Deno Deploy」を提供する「Deno Company」はECMAインターナショナルに加盟し、JavaScriptの標準化を行うTC39ワーキンググループに参加することを発表しました。 Deno has joined @EcmaIntl's @tc39: the JavaScript standards committee.https://t.co/meFUKD5KKG — Deno (@deno_land) December 13, 2021 DenoはTC39ワーキンググループの参加によって、JavaScriptを誰にとってもよいものに改善していくととも
TypeScript + Prisma + NestJSでGraphQLサーバを作ってみる
はじめに 本記事では、TypeScriptとPrismaとNestJSを使ってGraphQLサーバを作ってみます。 最終的には、以下のような記事の取得と作成ができるGraphQLサーバができあがります。 Prismaとは Prismaは、以下の3つのツールで構成されたNode.jsとTypeScriptのためのORMです。 Prisma Client: 自動生成される型安全なデータベースクライアント Prisma Migrate: 宣言的なデータモデリングとカスタマイズ可能なマイグレーション Prisma Studio: データを閲覧・編集するためのモダンなGUI 開発体験が良く、先日のJSConf JPの @qsonaさんの発表 でもあったように最近では新規サービスでの採用事例が増えてきました。 NestJSとは NestJSは、素早くスケーラブルなサーバーサイドアプリケーションを構築す
2021-11-23のJS: TypeScript 4.5、React 18 beta、Remix v1
JSer.info #567 - TypeScript 4.5が正式リリースされました。 Announcing TypeScript 4.5 - TypeScript TypeScriptがビルトインで持つlibの型定義をpackage.jsonのdependenciesを使ってロックできるようになっています。 Awaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化するようになる変更も含まれています。 import名に対するtype modifierのサポート、ES ProposalのPrivate Field Presence Checks、Import Assertionsのサポートなども追加されています。 TypeScript 4.5 Betaで追加されていたNode.jsのESMサ
スタートアップの小規模Webサービスのリアルな技術スタック - Qiita
はじめに プレースホルダというスタートアップのWebエンジニア兼マネージャーのAkahoriです。 弊社はエンジニアは10人以上いるものの、Webエンジニアは私含め3人ほどです。 3人のWebチームで、どのような理由で、どのような技術を使っているか、苦労している点などを共有します。 サービス概要 先月、リトルスパークというサービスをリリースしました。 子ども向けの、オンラインでの習い事プラットフォームで、先生と生徒をマッチングしています。 技術的にはいくつかの特徴を持ち、今回サンプルとして解説します。 授業はライブ授業のみで、お互いにZoomで行います。 ZoomのIDは弊社で管理し、先生側、生徒側、双方が参加ボタン１つで参加できるようになっています。 コース登録（審査有り）や日程登録、プロフィール更新などは全て先生が行うため、その仕組みがあります。 言語・フレームワーク・ライブラリ サー
esbuild で Node.js を TypeScript 化する
TLDR バックエンドのコードを esbuild で TypeScript 化した ビルド時間は1秒ほど tsc に比べて10倍以上高速化できた 特に問題なくプロダクションで安定稼働している esbuild はいつ使えるのか みなさん webpack は使っていますか？まだまだ広く使われていると思いますが、最近では esbuild の事例もたまに見るようになってきました。 ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog esbuild が爆速すぎて webpack / Rollup にはもう戻れない | Kabuku Developers Blog 現時点で esbuild をフロントエンドの Bundler として導入するには、以下のような問題があります。 ES5にトランスパイルできない Code S
Deno 1.9.0 がリリースされたので新機能や変更点の紹介
Copyright (c) 2018-2021 the Deno authors. MIT License. 日本時間の今日（2021 年 4 月 14 日）に Deno の v1.9.0 がリリースされました。 詳細なリリース内容は上記のリリースノートにまとまっていますが、ざっと紹介していきたいと思います。 ネイティブ HTTP/2 Webサーバー serde_v8 による Rust 呼び出しの高速化 Blob URLのサポート LSP で import の補完ができるようになった --allow-env と --allow-run で許可対象を指定できるようになった インタラクティブなパーミッションプロンプト Deno.listenTls で ALPN をサポート ファイルシステムに関するいくつかのAPIの安定化 いくつかのAPIを Deprecated 化 (std 配下に移動) T
GraphQLのAPIを開発する時、スキーマ駆動開発をやめた話 - id:anatooのブログ
GraphQLのAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
最近のモダンなWebサービス開発の構成について調べるメモ
ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
ゲーム音楽一覧サービス作った話｜himanushi
ゲーム音楽が好きすぎてWebサービス作りました。 「音楽サブスクリプションで聞けるゲーム音楽一覧サービス」です。 サブスクリプション契約しているのだから聴けるゲーム音楽は全て聴きたいわけです。サブスクリプションで聴けるゲーム音楽を紹介しているブログはいくつかありましたが、常に最新ではありません。そのため常に最新で検索しやすく私自身のコレクションとして管理したく開発しました。 2021/07/07 追記 Spotify API の追従が厳しくなったため Spotify の機能を全て削除しました。 このサービスの目的まず結論から。 「私が感動するゲーム音楽に出会うこと」を目的に作りました。俺得サービスです。 私はゲーム音楽が好きで好きで毎日聴いていました。 いつの頃かプレイしたことのないゲームの音楽をふと聴いてみると、知らないはずのゲームなのにとても感動できる曲がたくさんあることに気がつきまし
フロントエンドエンジニアブログ を始めます！｜食べログ フロントエンドエンジニアブログ
ご挨拶はじめまして！ 食べログのFE（フロントエンジニア）チーム リーダーをやっております、 辻です。 食べログのフロントエンドってどんな印象でしょうか？ 「めっちゃ大変そう」でしょうか？ 出典：https://www.slideshare.net/YoshieYamamoto/ss-83840311 「食べログ フロントエンド」でググるとこの記事が上位に表示されますので、この印象がある方もいるかと思います。 こちらのスライド「食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･」では、 場当たり的な実装を繰り返さないために生まれたFEチームについて、 他チームのエンジニア・デザイナーをサポートする苦労、 分業体制の食べログで納期とメンテンス性のバランスをとる難しさ、 jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成され
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
今あえてTypeScriptのビルド＆バンドルツールを探してみる | フューチャー技術ブログ
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。 今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。 今回試してみたのは次の4つです。 Parcel Fusebox ncc Rome.js JavaScriptのビルドツールとはJavaScriptでビル
ニコニコ生放送がwebサービスを大人数で開発する際に辿ってきたフロントエンド アーキテクチャ - Qiita
この記事はドワンゴ Advent Calendar 2018 25日目の記事です。 ドワンゴでニコニコ生放送のPC Webフロントエンジニアをやっています、 @kondei です。 いつまでも新人気分だったのに、いつの間にか入社5年目になり、この前ナチュラルに新卒に歴史的経緯を語る立場になっていて勝手にショックを受けました。いにしえの時代（最後期のとはいえ）から現在まで実際に開発して知っているフロントエンド開発者が数人になってしまって貴重なので、いい機会なのでまとめようと思います。 内容的には ニコニコ生放送の watch ページを MobX で作り直している話と重なる部分もあります。 はじめに まず、大人数のフロントエンド開発でアーキテクチャをどうするべきかの一つの解を得たので、それを述べます。 そして、どうしてそうなったのか、つまりニコニコ生放送が過去にどういう問題を抱えてきて、どうい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apollo ServerとPrismaではじめるGraphQL API開発入門
フロントエンド開発にtextlintを導入して運用している話
<btn open />