世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！ ベースフード株式会社 @basefood TypeScript JavaScript Vue.js React Angular I want to hear a detailed 何をどうやって実現する仕事か？ ベースフードが独自開発するECシステムの開発・運用に携わっていただき、よりユーザ体験を向上させるようなシステムを目指していきたいと思っています。 https://shop.basefood.co.jp/ なぜやるのか ベースフードはこれまで、一食に必要な栄養素を全て含む完全栄養食を独自開発の自社Webサイトを通じて販売してきました。 これからは「健康をあたりまえにするWell-Beingサービス」を目指し、ユーザーのヘルスケアデータを活用したアプリやサービスも開発していきます。 「人生を楽しみ尽くす基盤の
VSCodeでホバー時のTypeScriptの型ヒントをすべて表示する
はじめに こんにちは、からころです。 今回は、VSCode でホバー時の TypeScript の型ヒントをすべて表示する方法について書いていこうと思います。 デフォルトの設定では型の情報量が増えると型が省略される VSCode では、TypeScript を利用して開発する際に、ホバーすると以下のように型ヒントを表示することができます。 しかし、デフォルトの設定のままでは、下記のようにプロパティ数が多くなると型ヒントが省略されてしまいます。 上記の解決方法を以下で説明していこうと思います。 tsconfig.json に noErrorTruncation:true を追加する？ 情報として、tsconfig.json に noErrorTruncation:true を追加するという記事がよく検索にヒットします。これは果たして本当なのでしょうか？ ドキュメントによると、noErrorT
2024-10-16のJS: Deno v2、TypeScript 5.7 Beta、ES2025に入る5つのProposal
JSer.info #711 - Deno v2.0.0がリリースされました。 Announcing Deno 2 Deno 2.0 Release Candidate Node.jsとの互換性の改善、JSRのサポート改善、Workspaceのサポートなどが行われています。 Deno 1.xから2.xへのマイグレーションガイドも公開されています。 Deno 1.x to 2.x Migration Guide TypeScript 5.7 Betaがリリースされました Announcing TypeScript 5.7 Beta - TypeScript 初期化されてない変数のチェック、相対パスの.tsを出力時に.jsへと書き換える--rewriteRelativeImportExtensionsフラグの追加されています。 また、--target es2024のサポート、Node.js 2
TypeScriptが仕事で使えるレベルに到達するためのガイド - Python転職初心者向けエンジニアリングブログ
TypeScriptが仕事で使えるレベルになるためには、単に基本的な文法や構文を理解するだけでなく、実際のプロジェクトやチーム開発でどのように活用するか、スケーラビリティや保守性を考慮しながらコードを書く能力が求められます。この記事では、TypeScriptを実務で使うために必要な基本から、少し踏み込んだ中級レベルの知識を、コード例を交えながら丁寧に解説します。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセットで、JavaScriptに静的な型を追加した言語です。静的型付けとは、変数や関数にあらかじめ「このデータはこの型でなければならない」というルールを設定することです。このルールに基づいて、開発者が予想しない動作やバグを防ぐ手助けをしてくれます。 JavaScript自体は非常に柔軟で、型に縛られない自由な書き方ができますが、それが逆に大きなバグを生
TypeScriptは型安全じゃないからすばらしい - まめめも
「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
TypeScriptの型でドメインモデリング⛅️
紹介すること TypeScriptの型を厳密に定義し、ドメインモデリングを行います。 ソースコードがドキュメントとして機能することを目指します。具体的には、Branded Typeやタグ付きユニオンなどの技法を扱います。 この記事は、TypeScriptをこれから使いこなしてみたい方向けの内容です。 紹介しないこと ドメイン駆動開発や関数型プログラミングの概念については、深くは触れません。 Make Illegal States Unrepresentable あり得る型だけを定義するという考え方です。 詳細は以下を御覧ください。 この考え方は、ほとんどのTypeScript開発に適用できると思います。 例1 仕様: すべてのユーザは、id、nameを持っている 認証されるとisVerifiedがtrueになり、verifiedDateが付与される 認証前はisVerifiedがfalse
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集 AI inside株式会社 @ai_inside I want to hear a detailed なにをやっているのか 私たちは2015年に創業し、AIを「使う」「作る」「動かす」ためのサービスをAIプラットフォームで提供しています。AIを「使う」サービスの一つ、手書き文字を認識してデジタル化するAI-OCR「DX Suite」は、その識字率の高さと使いやすさから銀行や通信、地方自治体など幅広い業界でご活用いただき、AI-OCR市場シェアNo.1を獲得しています。（※１） また、ノーコードで高精度なAIを「作る」ための「Learning Center」、よりセキュアかつ安定した環境でAIを「動かす」エッジコンピューティング「AI inside Cube」を提供しています。 さらに、世の中で作られたAIを「シェアする」た
2024-09-16のJS: Biome v1.9、ESLint 8.xのEOL、TypeScript 5.6、ES5の現状
JSer.info #707 - Biome v1.9がリリースされました。 Biome v1.9 Anniversary Release | Biome CSSのFormatter/LinterがStableに、GraphQLのFormatter/Linterを追加されています。 GritQLを使ったbiome searchコマンドを追加、.editorconfigをサポートなども追加されています。 ESLint v8.xのサポートが2024年10月5日に終了することが発表されました。 Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter ESLintの現在の最新バージョンはv9.xです。 マイグレーションガイドは次のページに公開されています。 Configura
カーネルにDBMSを載せた分散OS「DBOS」の特徴と利点は？ サーバレスでTypeScriptとPythonの実行に対応
カーネルにDBMSを載せた分散OS「DBOS」の特徴と利点は？ サーバレスでTypeScriptとPythonの実行に対応 マサチューセッツ工科大学（MIT）とスタンフォード大学の研究者によって考案された分散OS「DBOS」が、TypeScriptに加えてPythonの実行に対応したことが発表されました。 DBOSはOS内部にデータベースが組み込まれており、OSやアプリケーションのすべての処理や状態をデータベースが記録します。そのため、アプリケーションやOSが何らかの原因で終了したとしても、処理や状態を失うことなく終了したところから再開できるなどの利点を備えています。 これによりTypeScriptやPythonで耐久性の高いアプリケーションの構築を容易にしています。 DBOS is coming to #Python! Development of the DBOS Transact f
コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ
120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「React」「Python」の4つです。今回は試しに「JavaScript」をクリック。 スペースキーまたはエンターキーを押してゲームスタート。 ゲームのプレイ動画は以下から確認できます。なお、プレイヤーはプログラミング未経験者です。 エンジニア向けタイピングゲーム「UnTyping」にプログラミング未経験者が挑戦してみた - YouTube ゲームが始まると以下のようにコードが表示されるのでタイピングしていきます。 一つのコードに
TypeScript 5.6リリース！真偽チェックの厳格化やイテレーターヘルパーメソッドの追加など新機能多数
9月10日、MicrosoftはTypeScript 5.6のリリースを発表した。 今回のリリースでは、多くの新機能や改良が含まれており、特にバグの早期発見とコードの安全性が強化されている。以下は、TypeScript 5.6の主要な新機能と改善点である。 真偽チェックの厳格化 TypeScript 5.6では、コード内の真偽値チェックに対する厳格な制約が追加された。具体的には、常に真（truthy）または偽（falsy）となる式に対してエラーが発生する。これにより、意図しない条件式によるバグを未然に防ぐことができる。 以下のコード例では、意図しない真偽式が検出され、エラーとして扱われる。 if (/0x[0-9a-f]/) { // エラー: この式は常に真となる。（.test()の呼び出しを忘れたのかもしれない） } if (x => 0) { // エラー: この式は常に真となる。（
新しいチームでTypeScriptに素早くキャッチアップするためにやったこと - KAKEHASHI Tech Blog
カケハシのプラットフォームチームでソフトウェアエンジニアをしているすてにゃん (id:stefafafan) です。今回は、私が TypeScript をメイン言語として採用しているチームに参加した際、言語や周辺技術のキャッチアップを行った方法について紹介します。 この記事は秋の技術特集 2024の 3 記事目です。 この記事の想定読者 私が元々持っていたスキルセット 認知負荷の増加 TypeScript 学習のためにやったこと 学習の進め方 テックリードとの 1on1 の中で壁打ちや相談 ペアプログラミング 輪読会 もくもく会 学習コンテンツ O'Reilly Online Learning を使った学習 TypeScript Deep Dive プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方まで type-challenges 公式ドキュメ
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
node v22.7.x で TypeScript をそのまま実行する
node の最新に近いバージョンで TypeScript の実験的なサポートが入っている。ts-node や tsx に頼らず typescript のスクリプトを実行できる。 ロードマップ 実験的な機能であることは承知の上で、動かしてみる。 tl;dr # ~/.zshrc alias nodets="node --experimental-strip-types --experimental-transform-types --experimental-detect-module --no-warnings=ExperimentalWarning" # run nodets run.ts
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
Full-Stack TypeScript という名称に統一しませんか？
みなさん、Full-Stack TypeScript と呼びませんか！ みなさん、こんにちは！ アセンド株式会社で取締役CTOを務めている丹羽（@niwa_takeru）です。「物流の真価を開き、あらゆる産業を支える」をミッションに、運送会社向けSaaSの開発・提供をしています。また、個人としては今年５月に開催された TSKaigi の運営理事も務めております。 この記事で、みなさんにお伝えしたいことはただ１つ。↓↓↓ 「Full-Stack TypeScript という名称に統一しませんか？」 最近、フロントエンドやバックエンド、その他の領域を TypeScript で統一したアーキテクチャを採用する企業やプロダクトが増えています。私たちアセンドでも、フロントからバックエンド、IaC まで TypeScript で統一しており、1日に6回以上のデプロイを実現するなど高い生産性の恩恵を受け
TypeScriptで「選択肢」の定義をEnum的な定数にまとめる――satisfiesとSSoTもあるよ
ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Types vs. interfaces in TypeScript - LogRocket Blog