英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita

2022/01/03 1471 users Qiita Englister 要約 爆速開発 実装

要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 背景にあった課題 「英語で意... 続きを読む

プログラミング上達したい人に繰り返し読んで欲しい4冊｜erukiti｜note

2020/08/04 1190 users erukiti リファクタリング Hasura プログラマ

プログラミング上達したいんだったら、四の五の言わずに、 ・クリーンアーキテクチャ ・レガシーコード改善ガイド ・アジャイル・サムライ ・リファクタリング 系のどれか を、全部最低5回読み返して欲しい。それでプログラマとしては圧倒的に成長できるんだから、マジで読んで — Next.js + Hasura 最速プロトタイピング... 続きを読む

まだOpenAI使ったことないの？この記事で全員ハンズオンさせてやんよ！

2023/08/20 431 users OpenAI Deploy Pipelines Apps 全員

目次 はじめに 今回作成するシステムの概要 Azure OpenAI セットアップ Azure DevOps の Azure Repos をセットアップ Next.js でフロントエンド構築 Azure Static Web Apps へ Pipelines を用いて Deploy 動作確認 お片付け はじめに 昨今ちまたで話題の OpenAI。chatGPT はさらっと触ったけど、API までは触ってないな... 続きを読む

クックパッドマートの失敗したデータ設計 Before / After 大放出

2022/07/01 418 users before クックパッドマート Transcript 経歴

Help! I've created a serverless monolith - Azure Lowlands 続きを読む

Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代

2020/12/24 407 users データベース 認証 過言 王道 フルスタック

最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした... 続きを読む

デジタル庁でjQueryが何をしているのか - laiso

2023/12/14 399 users jQuery Drupal laiso フロントエ バーター

TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエ... 続きを読む

QiitaやZennよりも便利？ IPAの資料を読もう!

2021/02/04 395 users Qiita Zenn IPA AWS ドキュメント

はじめに 飲み物じゃないIPAをご存じでしょうか？ 漢字でいうと、独立行政法人 情報処理推進機構ですね。情報処理技術者試験を実施いる謎の組織という認識の方も多いと思います。 実はIPAはいろんなドキュメントを公開していてQiitaやZenn以上にお役立ちなサイトなのです。 まあ、AWSをどうこうとか、FireabaseやNext.js... 続きを読む

数日前に大幅リニューアルされた Next.js のチュートリアルをやれば、２０２０年のフロントエンドを体感できる - Qiita

2020/04/23 389 users Qiita JamStack チュートリアル 関数 HTML

この記事について 数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバ... 続きを読む

レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ

2020/12/01 384 users GraphQL ユーザーエージェント hokaccha 外村

技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開い... 続きを読む

プログラミング上達したい人に繰り返し読んで欲しい4冊改訂版｜erukiti｜note

2020/08/04 378 users erukiti リファクタリング Hasura プログラマ

プログラミング上達したいんだったら、四の五の言わずに、 ・クリーンアーキテクチャ ・レガシーコード改善ガイド ・アジャイル・サムライ ・リファクタリング 系のどれか を、全部最低5回読み返して欲しい。それでプログラマとしては圧倒的に成長できるんだから、マジで読んで — Next.js + Hasura 最速プロトタイピング... 続きを読む

Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】

2024/01/30 376 users TypeScript Tailwind CSS 参考 説明

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが... 続きを読む

jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード（基礎編）

2023/01/23 357 users jQuery React Svelte Vue 構文

なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ず... 続きを読む

Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）

2021/05/25 334 users React フレームワーク キカガク Nuxt.js ベース

はじめに 2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきまし... 続きを読む

いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

2023/10/20 326 users 観点 新規サービス StorYBook PoC Jest

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookな... 続きを読む

2023年に読んでよかった技術書

2023/12/20 322 users 技術書 Ktor Zenn 部類 ドキュメント

おそらく 2023 年に Zenn で出す最後の記事になるかと思います。 タイトルの通り、2023 年に読んだ本の中で、特に素晴らしかったものをご紹介します。 あまり今年は技術書を読んだ印象がなく…というのも、特定の xx(例えば Next.js、Ktor)といった部類に関しては公式のドキュメントを読むことがほとんどになり、書籍に求... 続きを読む

Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita

2020/11/05 315 users Qiita React Vercel SSR フレームワーク

Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”... 続きを読む

実務経験ほぼゼロでTypeScriptやNext.jsを扱う開発案件にアサインされた人のための備忘録 - Qiita

2022/12/17 304 users Qiita TypeScript 備忘録 文法 CSS

はじめに 筆者は2022年8月に株式会社ニジボックスに入社し、翌月の9月に現在のプロジェクトにアサインされました。 入社時はフロントエンドの実務経験はほぼゼロで、HTML/CSSやJSの基礎的な文法・ルールをスクールや独学で勉強していた程度の新人エンジニアでした。 そんな私がいきなりTypeScriptでNext.jsをガリガリ書... 続きを読む

バックエンドエンジニアが Next.js でモダンなフロントエンド開発を始めるにあたり学習したこと

2022/04/16 299 users バックエンドエンジニア フロントエンド開発 React 副業

2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく... 続きを読む

2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した

2020/12/05 298 users 全部 TypeScript ベストプラクティス バス 使い勝手

この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手... 続きを読む

Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも - Qiita

2018/07/09 285 users Qiita サーバーサイド Micro Mongoose

ZEIT が作っている Micro という Node.js のフレームワークがあり、使いやすそう。 https://github.com/zeit/micro ZEIT は、かの Next.js を作っていて、 Mongoose を作った人や socket.io を作った人が所属しており、とても信頼できる。 ちなみに、 ZEIT は Now という、 Node.js （及び Dockerized されたもの）を動... 続きを読む

書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog

2022/08/11 276 users React TypeScript uhyo 書評 筆者

皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去... 続きを読む

リクルート、新人エンジニア向け研修資料を無償公開　Next.jsの基礎など15種類

2022/09/12 273 users リクルート AWS 新人エンジニア向け研修資料 無償公開 基礎

同社は2017年から新卒エンジニア向けの研修資料を公開しており、外部からのフィードバックを基に毎年内容を変更している。例えば21年版ではAWSの入門研修資料を公開。22年版はNext.jsの資料を新たに追加した。過去に公開した資料は今後も閲覧可能という。 関連記事 リクルート、新人エンジニア向け社内研修資料を公開　A... 続きを読む

より速い WEB を目指す Next.js / nextjs-make-the-web-faster

2021/11/24 269 users Transcript web APソリューショングループ

Transcript より速い WEB を目指す Next.js 【Next.js Update!】 v12リリースを踏まえ、Next.jsの採用を考える 吉井 健文 / Takepepe 株式会社リクルート　 APソリューショングループ フロントエンドエンジニア・アーキテクト Agenda ▪ 前半：Next.js Conf 2021 おさらい ／ ▪ 後半：Next.js 12 発表をうけて ▪ Static x... 続きを読む

CDNのエッジで実行する系が面白い

2021/10/28 269 users CDN プラットフ エッジ Vercel 関数

先日の Next.js Conf で Vercel は Next.js の新しいバージョン「12」をリリースした。 興味深いのは、Vercel は同時にEdge Functionsというサービスを開始したことだ。 Edge Functions – Vercel 謳い文句のひとつに Push your functions to the edge とあるように、「エッジ」で実行される「関数」を提供するプラットフ... 続きを読む

Next.js + Electron がとても簡単になっていた | Zenn

2020/09/22 266 users Electron デスクトップアプリケーション React

Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どん... 続きを読む