2022年秋版 最新React/Typescript開発環境の作成 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【必見】これから学ぶべきTypeScriptフレームワーク 4選
はじめに 今回の記事では、私の独断と偏見でこれから学ぶべきTypeScriptフレームワークを4つ徹底解説する。今回の記事を参考に、TypeScriptを深く学ぶことにつながれば幸いである。TypeScriptが使われているフレームワークは数多く存在するので、何から手を付ければいいのかわからない人も少なくないだろう。もしこの記事を読んでいるプログラマーがTypeScriptのフレームワークを選んでいるのに悩んでいたら、今回の記事は参考になるはずだ。 あくまで個人の一見解に過ぎないが、参考になれば幸いである。 これから学ぶべきTypeScriptフレームワーク Next.js Nuxt3 NestJS SolidJS それぞれ順番に解説する。 １．Next.js Next.jsはReactベースで開発されたTypeScriptフレームワークである。最大の特徴は、URLルーティングと呼ばれるリ
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog
皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者
フロント学習の最高の教材集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエ
React with TypeScript Cheatsheet
Build in AI speed — Compose enterprise-grade applications, features, and componentsHow to type React propsSince React props are used to send transmit data between one React component to another, there are many types that you can use to type React props. To write the types of your props, you need to add a colon and the object literal notation (: {}) next to the destructuring assignment of the child
より良いReactJS開発者になるための10のヒントとコツ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、Simon Holdorf氏による「10 Tips and Tricks That Will Make You a Better ReactJS Dev」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 より良いReactJS開発者になるための10のヒントとコツ より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v1
Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話
この記事について Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話を共有する。 どういう勉強をしたかのラーニングパスを某所で話したら興味があるというコメントがあったので、自分の振り返りも兼ねて共有することにした。 TL;DR 学習期間は1ヶ月、30時間程度 TypeScript → Next.js → MDNでHTML+CSS → TailwindCSS の順に勉強した JavaScript、React.jsはほぼすっ飛ばした(というより上記ラーニングパスの中で派生して習得した) できるようになったこと: 簡単な処理であればテストつきでTypeScriptのコードが書けるようになり、UIの基本的な設計ができるようになった DISCLAIMER 筆者の経験を記したものであり、ベストプラクティスではありません。 筆者の開発スキルセット（勉強前時点） バックエンドが得意領域
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版で公開されています。まずはこちらを参照するといいと思います！
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
ぼくのかんがえたNext.jsの構成
はじめに 普段開発している Next.js プロジェクトの構成がなかなかいけてるんじゃないかということで、その構成を公開しちゃおうというお話。ほんとはタイトルをぼくがかんがえたさいきょうのNext.jsの構成にしたかったけどひよりました (今回の記事を作るにあたり改めて一から Next.js のリポジトリ作ったら husky のバージョン上がってたり、eslint-config-prettier の v8 系になって config の書き方ちょっと変わってたり、時代は移り変わるのです・・) 意外と手順書いていくと長くなったので一部coming soonになっているものは確固たる意思を持って、随時追記します 更新履歴 2021/04/01 css modules が storybook で上手く呼べてなかったので修正、あと storybook のバージョンアップ 2021/03/31 なんと
Build a Shopping Cart with React and TypeScript
Many websites have shopping carts and you can create your own using React and TypeScript. We've released a tutorial on the freeCodeCamp.org YouTube channel that will help you improve your React and TypeScript skills. You'll also learn how to use: Material UI Styled Components and React-Query for React hooks Swedish software engineer Thomas Weibenfalk created this tutorial. He has created a ton of
【React+Next.js】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、Next.js 15とReact 19を使ったモダンなWebアプリケーション開発について学んでいきます。 最新のReactとNext.jsの機能を実践的に学びながら、実際に動くWebアプリケーションを作成していきましょう。 【学べる事】 - Next.js 15のApp Routerを使った開発 - React 19の新機能（Server Components、Async Components、Suspense） - Intercepting Routesを使ったモーダル表示機能の実装 - ストリーミングSSRによるUX向上 - Server Actionsを使ったデータ処理 - TypeScriptを使った型安全な開発 - Tailwind CSS v4を使ったスタイリング - TMDB APIとの連携方法 - Vercelを使っ
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】：くるみ割り書房
🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2367992 📅 2021年 10月に第 3 刷を発行。内容を最新にアップデートしました。 ―― 実践的な React 本として評判の『りあクト！』シリーズ、三部作の第三部「React応用編」です。 第 3.1 版は React 17.0 と TypeScript 4.2、および Create React App 4.0 に対応した最新の内容となっています。 第三部ではまずルーティングを紹介した後、React の難関である副作用処理について本格的に学んでいきます。Redux とその公式スタイルガイド、Effect Hook と組み合わせた非同期処理の書き方、Redux の代替技術、さらに最新の Suspense までを紹介。 なお第一部ではフロントエンドのための Java
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
TypeScript + React: Component patterns
This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
120億PVの巨大サービス「LINE NEWS」をTypeScript化した話 | ログミーBusiness
2020年3月18日に行われたイベント「UIT meetup vol.8 online『We Are TypeScripters!』」に、LINE株式会社のフロントエンドエンジニアであるAkinori Inoue氏が登壇しました。セッション内容は「LINE NEWSをTypeScript化したい！」。「LINE NEWS」のTypeScript化にあたって実際に行ったことやそこから得た知見を共有しました。講演資料はこちら LINE NEWSをTypeScript化Akinori Inoue氏（以下、Inoue）：ご紹介に預かりました井上と申します。「LINE NEWSをTypeScript化したい！」ということで、発表していきたいと思います。よろしくお願いします。 僕自身の紹介なんですけど、去年の2019年の4月にLINEに新卒で入社して、フロントエンドエンジニアとしてUIT室に所属いたし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
