りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】：くるみ割り書房
💡 紙本+電子版セットは BOOTH にて。 https://oukayuka.booth.pm/items/2368045 ―――― シリーズ累計 2.5 万部を突破、仕事で使える React 本と評価の高い『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。全 3 巻構成となっている第 1 巻「言語・環境編」です。 最新のフロントエンド環境構築ツール Vite の使い方に始まり、JavaScript（ES2022）、関数型プログラミング、TypeScript までをカバー。JS のパワーをフル活用する React を使いこなすための基礎力を固めます。 「フロントエンドの開発になぜ Node.js が必要なの？」「使っている各種のツールは何をしてくれてるの？」「import はどうやってファイルを読み込んでるの？」のような、学習者が抱く根本的な疑問にまで
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
【NextJS】NextJS・TypeScript・Apollo Clientを使ってGraphQL・Apollo ServerのAPIにアクセス - 株式会社isub
【Next.js】 2023.08.01 【NextJS】NextJS・TypeScript・Apollo Clientを使ってGraphQL・Apollo ServerのAPIにアクセス 1. 概要 上記、記事ではBack-End側のAPI開発の内容でした。今回は上記APIにアクセスし、データを取得するFront-End側の開発をする内容となります。Next.jsやApollo Clientを使い、GraphQLよりデータを取得してみます。 対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。 2. Back-End側のAPI開発 こちらを参考 【GraphQL】Apollo ServerやPrisma・MySQL・TypeScriptを使ってGraphQLの更新系APIを開発する (isub.co.jp) 3. nodeのイ
TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
サーバレスなCMS、Webinyを使ってみた - Qiita
Webinyとは WebinyはオープンソースのCMSです。 いわゆるサーバレスアーキテクチャで構成されています。 AWSのアカウントを用意しコマンド実行するだけで、GraphQLや管理画面の環境が構築されます。 サーバレス故に維持費が安く、個人開発用途なら殆ど無料で使えると思います。 本記事ではこのWebinyの導入の際のメモと、使ってみた感想をまとめました。 ※この記事を書いている今現在、日本語の情報がほとんど無く、Qiitaにも記事がありませんでした。 ノウハウやカスタマイズ方法などご存知の方おられれば、シェアして頂ければと思います。 Webinyを使った理由 HeadlessCMSを安く使いたかったからです。 個人開発でCMSを使いたかったのですが、 自前でホストしたい 中身のソースを弄ってカスタマイズしたい（そこそこ複雑な要件） でも1から作るのはしんどい GraphQL使いたい
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
GraphQLの“つらみ”には「スキーマ駆動開発」を使え Nuxt.jsやTypeScriptが使えるモダンな開発環境で陥った、「なんじゃこりゃー！」
「Think ! FrontEnd by DMM」は、DMM Group のフロントエンド及び JavaScript における開発現場の「今」を話しながらみんなで考えるコミュニティです。樋口氏から、Nuxt、TypeScript、GraphQLを使ったSPA開発での気づきを発表しました。 事業部初導入のGraphQLとTypeScriptを使ったSPA開発に参加 樋口鉄朗氏：合同会社DMM.comオンラインイベント事業部の樋口鉄朗です。（※取材当時）今回は「Nuxt × TypeScript × GraphQLで開発した際のつらみ」についてのTipsを説明していきたいと思います。よろしくお願いします。 私は公立はこだて未来大学出身で、2019年に新卒でDMM.comに入社しました。趣味は自転車に乗ったり、旅行したり、ドライブに行ったりすることで、多趣味なエンジニアです。 以前は動画配信事業
プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで
2022年4月22日紙版発売 2022年4月19日電子版発売 鈴木僚太 著 B5変形判／424ページ 定価3,278円（本体2,980円＋税10%） ISBN 978-4-297-12747-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 TypeScriptは，JavaScriptに静的型付けの機能を加えたオープンソースのプログラミング言語です。本書では，根幹となるJavaScriptの仕様・機能とともに，TypeScript独自の仕様・機能を解説します。TypeScriptの基礎知識はこれ一冊だけで学べます。 静的型付き言語は世にいくつもありますが，Type
💣Webフロントエンドにおける関数型「風」プログラミングに関する個人的まとめ - Qiita
ここ数年の流れについて 技術的側面 Webフロントエンド（ほぼTypeScript＆React界隈）において、オブジェクト指向（厳密に言うとクラスの利用）から脱却する流れがあります。原因は以下の2点。 クラスの継承の問題点が（IT業界全体に）広く定着したこと JS/TSの進化、Reactの進化、関数型言語の考え方などの影響により、クラスを用いてデータと関数群を紐づけるメリットが薄くなったこと 現状、設計レベル（実務的にはどの関数を纏めてモジュール化するのか、モジュール同士をどう繋ぎ合わせるのか、フォルダ割りどうするのか等）のノウハウがまだ固まっておらず、既存の設計論はそれなりに有効です。 コミュニティ的側面（政治） これらの流れはWebフロントエンドの中でもTypeScript＆Reactの界隈が主導しており、そのノウハウは長年絶対視されてきたオブジェクト指向を解体するような内容であったた
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
ESLint + Prettierを導入したTypeScript開発環境
概要 ESLint + Prettier を導入した TypeScript 開発環境の構築方法です。 静的検証を ESLint で行い、フォーマットを Prettier で行います。 エディターは VS Code を使用します。 環境 Node.js npm Windows 10 VS Code 構築方法 package.json の作成 作業ディレクトリに移動し、以下のコマンドでpackage.jsonを作成します。
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作る - Qiita
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作るGoGraphQLapolloNuxtgqlgen お題 簡易ToDoアプリ（と言っても、この記事上では単に「ToDoの新規登録」と「登録済みの全ToDoの表示」しか出来ない）を題材として、表題の組み合わせでGraphQL通信ロジックを書くとどんな感じになるかを確認してみる。 ※今回はRDBを使った永続化などはしないで、バックエンドからは固定値を返す。 前提 Nuxt.jsやGoについては、個人ないし会社での開発経験があり、フロント->サーバの接続は（例えば）Axiosなど使ってRESTでやってたけど、GraphQLに変えてみたいという人が対象。 ただ、「そもそもGraphQLとは？」とか「RESTと比べたメリット・デメリットは？」みたいなことは書かない。（既に
さくっとNuxt.jsとApolloでGraphQLの雰囲気を掴むハンズオン
本記事の目的 Nuxt.jsとApollo Clientを用いたハンズオンを通してGraphQLの雰囲気を掴むことを目的としています。 バックエンドにはpokemon APIを活用します。 最終的には以下のようなポケモン図鑑が完成します。 (なおDeploy作業までは扱っておりません。) https://nuxt-graphql-demo.netlify.app/ 開発環境 macOS node v14.15.5 GraphQLとは API向けのクエリ言語 特徴として以下の点があります。 RESTでは複数のendipointが存在し、用途に応じてrequestを送り不必要なデータも含むresponseがあった反面、GraphQLでは単一のendpointに対して、欲しい情報を指定してrequest、responseを得ることができる。 request時に必要なresponseを指定すること
TypeScript の「型安全」を担保するために知っておきたかったこと - OITA: Oika's Information Technological Activities
タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 アドベントカレンダー1日目の記事になります。 よろしくお願いします。 3行で TypeScript で安全に型を扱う勘所は以下2点だと思いました。 最初から最後まで型が壊れていないことを保証する 型が壊れる可能性があるものは壊れている前提で扱う 個人的背景と前提 もともと C# での開発をメインとしていました。 Web開発は、JavaScript歴 ≒ TypeScript歴くらいの型付依存者です。 そのため、型付けのゆるい言語に対する耐性がなく、本内容もそういうポジションからの見解になります。 本記事内のサンプルコードは TypeScript V4.4 で挙動を確認しています。 最近のバージョンで変更のあった点は脚注を入れています。 最初から最後まで型を壊さない C# という静的型付け言語
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
TypeScript * GraphQLのバックエンド設計プラクティス
2冊目も公開中なのでみてください！ https://zenn.dev/tatta/books/4e993c596e7dc9 TypeScriptを使いはじめて1年になるので、バックエンドのWebアプリを設計するときに気を付けていることをまとめました。（※社内勉強会用資料の公開版です。） TypeScriptについては、Next.jsを中心にフロントエンドに関する公開情報が豊富です。一方でバックエンドに関する公開情報が少ないと感じています。（かくいう私もNext.jsからTypeScriptデビューしたわけですが） TypeScript * GraphQL という構成は仕事・趣味で採用されている方も多いのではないでしょうか？ 私もその1人です。私のような方のためにも、バックエンドの設計プラクティスについてまとめようと思い筆を取りました。 本書がこれから始める読者にとっては教科書のようになり、
AWSのフルマネージド型サービスを使ったソフトウェアの開発でローカル開発端末からアクセスキーの漏洩を防ぐためのテスト方法 | DevelopersIO
AWSアクセスキーセキュリティ意識向上委員会って何？ 昨今、AWSのアクセスキーを漏洩させてしまうことが原因でアカウントへの侵入を受け、 多額の利用費発生・情報漏洩疑いなど重大なセキュリティ事案が発生するケースが実際に多々起きています。 そこで、アクセスキー運用に関する安全向上の取組みをブログでご紹介する企画をはじめました。 アクセスキーを利用する場合は利用する上でのリスクを正しく理解し、 セキュリティ対策を事前に適用した上で適切にご利用ください。 本記事の想定読者 本記事ではフルマネージド型サービス=IAMを使ってアクセス制御を行うサービスと置き換えられます、これらを一切使わない開発(ALB, EC2, RDSのみなど)をしている方は対象外です 本記事はAWS上にソフトウェアを構築する開発者(主にバックエンドエンジニア)や開発環境を提供するプラットフォーマーを想定読者としています Typ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vite | 次世代フロントエンドツール
