【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
TypeScriptで「Reactを自作しよう」をやってみた - $shibayu36->blog;
最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。 やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/mai
クックパッド開発者ブログ
こんにちは。クックパッドでエンジニアをしている @morishin です。4年前に Bdash Server というデータ分析 SQL を共有・再利用するアプリケーションを作って紹介しましたが、今回はそれをさらに発展させて AI にデータ分析 SQL を書かせる仕組みを作ったのでその紹介をします。 続きを読む レシピ事業部バックエンド基盤グループの石川です。2025 年 6 月の頭にやった仕事について走り書きのようなメモを残しておきたくなったので、この記事を書いています。 Anthropic 社が開発している Claude Code は、ターミナルの上で動作する LLM agent です: https://docs.anthropic.com/en/docs/claude-code/overview。 Claude Code は Anthropic の API 経由で使う方法の他に、AWS
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
Typescriptで体重維持に必要なカロリーを計算できるコマンドラインツールを実装してみた - Qiita
はじめに はじめまして、 saba_canと申します。 今回、OSSデビューとして、oclifというTypescriptでコマンドラインツールを簡単に作成できるフレームワークを利用して、体重維持に必要なカロリーを計算できる簡易ツール(TDEE calculator)を実装したため、紹介させていただきます。 ソースコードはこちら 体重や食事のコントロールをして健康的な生活を送りたいという欲求があるので、ドメイン(健康 / 体重管理 / 食事)の関連知識と技術的な知識の両面でのアウトプットをしたいという想いで今回のツールを実装しました。 ツールの紹介 自分の身長、体重、年齢、性別、活動量(日常の運動量)を入力すると、現在の体重維持に必要なカロリーを計算してくれます。 ツール名にも含まれているTDEEとはTotal Daily Energy Expenditureの略で、基礎代謝量に一日の活動カ
2021年のTypeScriptベストプラクティス - 西尾泰和の外部脳
5: テストコードで、型の要求を部分的にしか満たさないアドホックなオブジェクトをanyにキャストしてモックとして使うのではなく、ちゃんとしたモックを一箇所で定義してそれを使え 6: オブジェクトの種類によってあるプロパティを持っていたり持っていなかったりする時に、?でオプショナルなプロパティにするのではなく、どういう種類の時に持っているのかをインターフェースで明示せよ
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
TypeScriptの導入にあたって考慮すべきメリットとコスト
皆さんこんにちは。京都開発室のLinです。仕事と個人的なプロジェクトでTypeScriptによる開発を始めて約2年が経ちましたので、 TypeScript導入時の経験を皆さんにお話ししたいと思います。 近年、TypeScriptはフロントエンド分野で最も注目を集める技術となっています。The State of JavaScriptの資料によれば、TypeScriptの使用を選択する開発者は増加を続けており、その評価も肯定的なものが多いようです。 「次のプロジェクトではTypeScriptにより開発を行うべきだ」「今あるJavaScriptプロジェクトをTypeScript仕様に変更すれば、プロジェクト品質の向上につながる」と考えているチームは数多くあるでしょう。 しかしながら、TypeScript導入のコストおよびメリットについては、極めて慎重に評価を行う必要があると、私は考えています。
Svelte + TypeScriptで
chrome拡張を作る
Transcript Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito ࣗݾհ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ΞδΣϯμ • Svelteͱʁ • ࡞Δͷ • ڥߏங • manifestΛ࣮Λ͢Δ • svelteͰ࣮Λ͢Δ • ·ͱΊ Svelteͱʁ Svelteͱ? • React,Vue,AngularͷΑ͏ʹએݴతʹUIΛॻ͚Δ • গͳ͍ίʔυͰ࣮͕Ͱ͖Δ • https://svelte.dev/blog/write-less-code • ԾDOMͳͲΛ༻ͤͣɺϏϧυ࣌ʹ࠷దͳόχϥJSʹม͢Δ • ͦͷ্ύϑΥʔϚϯε༏Ε͍ͯΔ • TypeScriptͷରԠ͞Εͨ • https://svelte.de
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
2021年の密かなトレンド？ “型安全ルーティング”の概観
2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文
LINE証券のフロントエンド開発チームがこだわる“型安全”――noImplicitAnyがもたらす効果 | gihyo.jp
インタビュイー LINE フィナンシャル開発センター Front-endチーム フロントエンドエンジニア 鈴木僚太（右） LINE フィナンシャル開発センター Front-endチーム フロントエンドエンジニア 水牧稜太（左） 2020年11月に開催された「LINE DEVELOPER DAY 2020」において、LINE フィナンシャル開発センター Front-endチームのフロントエンドエンジニアである鈴木僚太氏は「LINE証券フロントエンドにおける型安全性への取り組み」と題して講演を行いました。ここで話題として取り上げられた型安全についての取り組み、そしてTypeScriptのコンパイラオプションである「noImplicitAny」を有効にした背景などについて、講演を行った鈴木氏、そして同じくLINE証券のフロントエンド開発に携わる水牧稜太氏にお話を伺いました。 徐々に浸透した型安全
新規機能はどんどんコンポーネント化 Vue.js + TypeScriptで開発してよかったこと・つらかったこと | ログミーBusiness
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエンドエンジニア 北嶋初音氏（以下、北嶋）：では、「Vue.js + TypeScriptによる新規サービス開発の振り返り」と題して、UI開発課の北嶋初音が発表を始めたいと思います。 まず軽く自己紹介します。名前は北嶋初音と言います。経歴ですが、2016年の4月からWeb系のITベンチャーに新卒入社しまして、Webエンジニアとしての経験を積みました。次は自社サービスを作っている会社で働きたいという気持ちがあったので、転職活動を始めて、今年の1月から
TypeScriptで始めるNode.js入門 - ICS MEDIA
みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する
Typescriptの次はRustかもしれない
Introduction Rustを学び始めたのは多分今年の3月くらい。 なぜ急にRustに興味を持ったのかは後述しますが、半年ほどRustをいじくりまわしてみて、まだまだ学び途中でもRustの素晴らしさを語らずにはいられず、記事を書くことにしました。 Rustは「Cの正当な後継」なんてよく言われますが、WebエンジニアからみてもRustは本当に素晴らしいってことが少しでも伝わればいいなと思います。 RustとTypescript 「なぜRustとTypescript？」って思う方は多いと思うので、順に話していきたいと思います。 2020年のフロントエンドの流行 まず2020年今日時点のフロントエンドについて雑に書くと React・Vueが主流 Typescriptがデファクト、babelなどでトランスパイルは言わずもがな サーバーサイドもNodeで書くならTypescript Jest、
マイクロソフト発のオープンソース言語「TypeScript」、生みの親が語る開発当初や背景
今やTypeScriptはウェブアプリ開発時に最初に検討される言語となっているが、開発が始まった2010年頃は、まだオープンソースに恐れを抱いていたMicrosoft文化のなかで、ゆっくりと歩を進めていく必要があった。 TypeScriptの共同創案者であり、デンマークのソフトウェアエンジニアであるとともにMicrosoftのテクニカルフェローも務めているAnders Hejlsberg氏は米ZDNetに対して、Steve Ballmer氏が同社の最高経営責任者（CEO）だった2010年に、JavaScript開発者の心をつかむ唯一の道はオープンソース戦略だという決断をチームが下した際のことを語ってくれた。 Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然とし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptの設定の良し悪し