2023 年の Prettier 振り返り
2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScript や TypeScript だけではなく、HTML や CSS、GraphQL などもサポートしています。 リリース 2023 年は、メジャーバージョンのリリースが 1 回、マイナーバージョンのリリースが 1 回でした。これまでは 3 ヶ月に 1 回程度マイナーバージョンをリリースしていたので、頻度は少し下がっています。 ですが、メジャーバージョンである 3.0 をリリースできたことと、これまでよりもカジュアルにパッチバージョンをリリースするようになったことを考えると、開発自体が停滞しているわけではないと思っています。 「カジュアル
背景 Atomic Design ベースのディレクトリ構成になっていたが、 molecules と ogranisms のルールが定まっておらず、コンポーネントがどっちに入るのかが個々人の感覚になっていた 一部の機能は機能ごとにディレクトリを切っていてルールが曖昧になっていた テストと実装が別ディレクトリにあって、集約性の観点で見通しが悪かった 一行まとめ Atomic Design ベースから features （機能ごと）に分ける方向にディレクトリ構成を変更した。 方針 （フィロソフィー） 関心が近いものは近い場所になるべく集約させる ガチガチに縛るよりはある程度レールを引くのに止める 特に features の中のルールは固められないと判断して決定を遅らせる ルール化できそうなものをLintエラーで管理する 実はまだやってない。インポートの制約に関するルールを追加する予定 採用したル
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」ということでした。 素のReactの挙動を理由に自分が思い描いていたのは「コンポーネントはネスト順に実行される」だったのでこれは衝撃的でフレームワークについて何も知らなかったな、と思わせる内容でした。 ここでは、Reactコンポーネントの実行順序を再確認し、RSC、フレームワークについても確認していきます。 Reactコンポーネントの実行順序 ここでの対象はクライアントコンポーネントです。 このようなネストしたツリーを用意しました。Aと
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
EDOCODEでエンジニアをしているYutakaです。 こちらは社内勉強会で発表した資料を元にしています。 関数型言語の知識がほとんどないエンジニアがなっとく！関数型プログラミングで学んだ用語を一部まとめました。原著はGrokking Functional Programmingです。本書はScalaとJavaで説明がされていますが、できる限り社内で使われている言語(Go, JavaScript, TypeScript)でサンプルコードを記載しました。 書籍のソースコードはこちらに全て公開されています。 そもそも関数型プログラミングとは? プログラミングのパラダイムには大きく①命令型プログラミング②宣言型プログラミングがあります。 ①命令型プログラミングとは どのよう(HOW)に計算するかに焦点を合わせ、段階的なアルゴリズムを詳細に定義します。これは実際のハードウェアの計算処理の流れに沿っ
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X（旧 Twitter）のいいねボタンがあります
Modern.js
A Progressive React Framework for modern web development.
SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。 このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。 動作確認した環境 関連がありそうな依存を記す。 "dependencies": { "@remix-run/node": "^2.8.1", "@remix-run/react": "^2.8.1", "@remix-run/serve": "^2.8.1", "react": "^18.2.0", "react-dom"
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
動機 結構 lint 系がアップデートされていたり、以前は必要だったものがいらなくなっていたりしていて自分が作った以前のテンプレートだとちょっと不要な設定などが増えていたので、 これを機に調査しながら設定を見直そうかなと。 今回作ったもの この記事で設定をした Next.js のテンプレートはこちらに公開してあります。 前提 node: v18.17.1 next.js: 13 系 React: 18 系 Next.js まずは Next.js のインストールから。どんなプロジェクトであれ TypeScript で開発をしたいから --ts をつけます。 あとは設問に答えていけば基本的なプロジェクトが作られます。基本的に全て Enter で問題ないです。 ちなみに Would you like to customize the default import alias? はデフォルトで N
JollyUI
New name, new themes, CLINew name, theme customizer, CLIJollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
Reject on Rails 2023の登壇スライドです。 Gotanda.rb 2023-10-17で発表しました。 - 『引用箱』のリポジトリ → https://github.com/lef237/quotelist - ブログのURL → https://lef237.hatenablog.com/
#metaをのぞいてみると、より詳細な記録が残っている。だいたい1年おきに当時興味のあったフレームワークを学ぶために作り直していたが、ここ2, 3年は使い慣れたRubyでフルスクラッチしたシステムで落ち着いていた。だけど、ここにきて今回興味のあったNext.jsを学ぶために作り直すことになった。 途中でブログサービスなどに投稿していた記事をインポートしたり、ドメインを移したり、リポジトリを分割したり統合したりしながら、今のブログに至る。 ブログというのはWebフロントエンドのフレームワークを学ぶためのお題として実益も兼ねていて気に入っていて、今後も何度も作り替えるんだろうなと思っている。 ReactやNext.jsは以前から触っていたためだいたい理解していたが、Next.js v13.4で導入されたApp Routerであったり、最近のReactについてキャッチアップできていなかったことが
TL;DR 無駄な買い物チェッカーを作ったよ！緊急度,重要度,欲求度,代替可能度の４軸から無駄かどうかを判断するよ フロントエンドではRemixで開発、フォームライブラリはConformがよかったよ Cloudflareは最高でした。 はじめに どうも、やまぐちです。 エンジニアの皆さん、技術のキャッチアップってどうやってますか？ とりあえずチュートリアルやってみますか？ 技術ブログを読むだけで済ましていますか？ この辺りどうもモチベーションが湧かないんですよね。チュートリアルやっても身についている感覚がないんですよ。 最近Xのタイムラインを眺めていると、React界隈では今はRemixが流行りらしいし、ついでにCloudflareも、安い、速い、便利、で個人開発でめっちゃナウくてイケてるらしいじゃないですか。 んー、モダンでナウい、イケてる技術スタックを使えるようになりたい！！ そんな時
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
JavaScript started its life as a browser language, and then went to on conquer the server with Node.js. And it 2023, it seems like the ecosystem as a whole might finally be ready to try and bridge that gap. Between features like React Server Components, frameworks like Solid and Qwik, or meta-frameworks like Next.js and Sveltekit, providing a better way of serving code and data to clients has beco
StyleX
The styling system that powers facebook.cominstagram.comwhatsapp.comthreads.netGet StartedThinking in StyleX
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
こんにちは！PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 背景と目的 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページでバックエンド生成の HTML + jQuery の実装が残っています。 ご利用企業様のプレスリリースを掲載するプレスリリースページ（下スクリーンショット）もその一つで、機能追加や改修のニーズはありながら、大きな変更を行うことが難し
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
なぜ分割代入をすると Vue は reactive ではなくなるのか - Stockmark Tech Blog
こんにちは。 Anews の開発に携わっている Engineer の 羽柴 と申します。 Anews はフロントエンドを Vue で開発しています。 自分自身の背景として、Stockmarkに入社するまでは React を使って開発していたので Vue の経験は殆どない状態でした。 そこで理解を深めるために chibivue を使った勉強会を社内で進めています。 その時に気づいたことを share したいなと思い、この記事を書きました。 ja.vuejs.org chibivueとは Vue を書き始めた感想 chibivue の勉強会を進めて Proxyについて でもなんで まとめ 余談 最後に chibivueとは ubugeeei.github.io Vue を最少単位で作ってみようという project です。 浅い理解でよければ公式 docs をさらっと読んで実装するのが早いので
Rust+WebAssemblyを使ったWebアプリでの高速画像処理入門 - アダコテック技術ブログ
要約 背景 WebAssembly (WASM) とは？ Rust言語とは？ サンプルアプリ概要 LBP特徴量計算をRustで実装 フロントエンド環境構築 バックエンド環境構築 スキーマ定義 Rust実装 WASMバイナリの生成 TypeScript実装 実行結果 まとめ メンバー募集しています！ おまけ こんにちは！美味しいタコスを食べることを専門としているプロダクト開発部エンジニアの井上です。 要約 WebAssembly（WASM）、Rustは近年注目されている技術であり、これを利用することでWebアプリケーション上で高速な画像処理を実現できるよ。 我々も画像前処理を行っていたWindowsデスクトップアプリケーションを、WebAssembly+Rustを使用してWebアプリケーションに置き換えたよ。 Rust言語で実装した画像処理をWASMにコンパイル、そしてWebアプリケーション
chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じにコードを生成してくれるプロンプトのサンプル集はここに置いてる なぜ作ったか GPT-4 はそこそこ賢いコードを生成できるのだが、細かい修正は行うにはやはりプレビューしながら対話的に行う必要がある。 また、人間がその結果を言語化するより、生成されたHTMLを画像入力として修正プロンプトに使うのが精度がでる。 (備考: まだChatGPT Plus の一部ユーザーに開放されてない機能) react-component の生成: ts
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
こんにちは、学生エンジニアのMasamichiです。2024年もついに始まってしまいました。今年はより一層プログラミングに励もうと思います。 さて、今回はプログラミング一年目の僕が大学に入学してからプログラミングを始めた2023年にした勉強の内容をざっくり振り返ります。 Python 基礎 プログラミングを始めて、最初の1ヶ月くらいは基礎を勉強していました。Pythonを選んだ理由は特になく、ただ「プログラミング言語」と調べて一番上にきた言語を始めただけです。この時は、「本堂俊介」さんのYouTube動画でPythonの講座をひたすらハンズオンしていました。この講座で一通りプログラミングに必要な知識を習得したイメージです。 また抜けている部分や、復習の意味も込めて以下の本もやりました。この本で基本的なアルゴリズムとデータ構造の考え方をマスターしました。Githubによる状態管理や応用的な内
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
Generative Agents論文を参考にした長期記憶機構をもつLLMエージェント×非同期コミュニケーションの実装 - Gaudiy Tech Blog
こんにちは！ファンと共に時代を進める、Web3スタートアップのGaudiyでエンジニアをしている椿（@mikr29028944）です。 今年の8月にお台場で行われた世界最大級のアイドルフェスにて、ユーザーの投稿に反応する「バーチャルAI-DOL（バーチャルアイドル、以下 AI-DOL）」のサービスを同コミュニティアプリ内で提供しました。 このサービスには「ファンが育てるAIアイドル」というコンセプトのもと、次の機能を搭載しました。 ユーザーが投稿すると、AI-DOLが返答する。 ユーザーの投稿を記憶し、それに基づいて会話内容が進化する。 AI-DOLが記憶に基づいて2023のアワード選出をする。 たとえば「今年の初出演アイドルで最も輝いていたのは誰？」と聞くと、それに合致したアイドルを選出理由とともに答えてくれる。 GPT-4登場以降、LLMを使ったAIサービスがたくさん出ていますが、基本
useEffectEvent という react フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、useEffectEvent は イベントリスナーを設定する useEffect とセットで使うフック です。 useEffectEvent を使うと、エフェクトとイベントリスナーを分離できます。そして、イベントリスナーの deps の変化時にエフェクトを再実行せずに済みます。 …とまあ、抽象的な説明だけでは分かりづらい と思うので、以降では useEffectEvent がどういう課題を解決するのか、また具体的にどういうケースで
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】RailsAWS初心者個人開発Next.js はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間
上記構成で作りました。 バックエンドとフロントのビルドを統合したかったので、GraphQL サーバは、Remix に載せる形になっています。この構成の凄まじいのは、ローカル環境からコマンドを実行して約 17 秒で、CloudflarePages にビルド込みでデプロイされることです。 Next.js から Remix への移植理由 もともと React のフレームワークは Next.js を使っていました。しかし商利用も可能で制限がゆるい Cloudflare Pages をインフラとして使いたかったので、相性の良い Remix に移植することにしました。 一応 CloudflarePages でも Next.js は動くのですが、私の Blog システムで Edge 設定を行うと、謎のビルドエラーが出ました。配置したファイルの数を減らすと内容に関係なく何故かビルドが通ります。容量的に問題
![[すべて無料]Remix+Cloudflare Pagesでブロクシステムを作成する | 空雲 Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed9277c5ca4f5f68fe2b0724e09e8d8657e91d2e/height=288;version=1;width=512/https%3A%2F%2Fogp.croud.jp%2F%3Ftitle%3D%255B%25E3%2581%2599%25E3%2581%25B9%25E3%2581%25A6%25E7%2584%25A1%25E6%2596%2599%255DRemix%252BCloudflare%2520Pages%25E3%2581%25A7%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%25B7%25E3%2582%25B9%25E3%2583%2586%25E3%2583%25A0%25E3%2582%2592%25E4%25BD%259C%25E6%2588%2590%25E3%2581%2599%25E3%2582%258B%26name%3D%25E7%25A9%25BA%25E9%259B%25B2%2520Blog%26image%3Dhttps%253A%252F%252Fimage.croud.jp%252F%253Ftype%253Dpng%2526url%253Dhttps%25253A%25252F%25252Fstorage.googleapis.com%25252Fmd-blog-8ff35.appspot.com%25252F3dc889cf-05c0-43c7-93fd-c743f984be43-%25255BPoy8CkeLlIqBKopOUMlkZZvm0145QtWap0qRCnBxuwA%25255D)
LogLog Games
The article is also available in Chinese. Disclaimer: This post is a very long collection of thoughts and problems I've had over the years, and also addresses some of the arguments I've been repeatedly told. This post expresses my opinion the has been formed over using Rust for gamedev for many thousands of hours over many years, and multiple finished games. This isn't meant to brag or indicate su
23新卒エンジニアがチーム開発研修で学んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！ 2023年新卒エンジニアの伴野・谷・和渕です。 サイボウズでは、2023年エンジニア新人研修の集大成として、チームに分かれてソフトウェア開発を行う実践演習が行われました。この記事では、各チームがどんな成果物を作成したのかを、チームごとにご紹介したいと思います。 エンジニア新人研修全体については以下の記事で詳しく紹介されています。ぜひそちらもご覧ください。 blog.cybozu.io 概要 実践演習では3チーム（「チーム gogo!」・「明日から」・「TEMBIN」）に分かれ、それぞれ一つのソフトウェアを2週間で開発しました。「サイボウズ流チーム開発を新メンバーだけで実践できた」「未知見の課題に対してどう行動すればよいか考えるきっかけになった」というコンセプトのもと、自由な発想で取り組みました。 チーム gogo! チーム gogo! では、演習開始時に Mastodon や
What We Learned from a Year of Building with LLMs (Part I)
Join the O'Reilly online learning platform. Get a free trial today and find answers on the fly, or master something new and useful. Learn more It’s an exciting time to build with large language models (LLMs). Over the past year, LLMs have become “good enough” for real-world applications. The pace of improvements in LLMs, coupled with a parade of demos on social media, will fuel an estimated $200B
Server Actions が Next.js 14 からStableに！古参フロントエンドが消失しないために知っておくこと
思い出します2年前・・・ VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 定番なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js Conf 、朝まで大忙しでしたね。 （ねむい・・・） Server Actions の一般的な誤解 まず最初に、SNSで話題になっている Server Actions に関する一般的な誤解についてです。 (1) 生のSQLが書かれているというアンチパターン？🤔 一部のサンプルコードでは、生のSQLを直書きしているところがあります。 しかし、以前のプレゼンテーションでも述べられているように、 React Server Component や Server Actions で、この書き方を推奨しているわけではありません。 あくまで「こんなこともできるようになっ
はじめに 自己紹介 こんにちは、株式会社ソーシャルPLUSのフロントエンドエンジニア @zomysan です。 ソフトウェアエンジニアとしての経験は10年と少しで、趣味は個人開発と食べることです。直近では Discord の読み上げ Bot「shovel」のWebインターフェイス（マイページ）機能・有償プランなどを作りました。 この記事について 個人開発でタイピングゲームを作ったので、それについて前半・後半に分けて話します。 前半では作ったタイピングゲームの技術選定の理由や 何を大事にして作ったのか？ ということを紹介します。 後半は今回の開発を実例として、私が開発をするときの進め方について紹介します。誰にでも合うものではないかもしれませんが、少しでも参考になれば嬉しいです。 ゲームの紹介 tstt で遊びながら学ぼう！ TypeScript Touch Typing 略して tstt と
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しい「Microsoft Teams」アプリが正式版に ～速度は2倍でメモリ使用量は1/2／「React」「WebView2」でゼロから再構築
フロントエンドのディレクトリ構成を変えた 2023 - kobayang
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
React Server Componentの実行順序とフレームワークでの注意点
なっとく！関数型プログラミング を読んで関数型プログラミングを学んだ - Qiita
楽観的更新を行うための React の useOptimistic フック
SPA モードのRemixを GitHub Pages にデプロイする
ReactのコンポーネントからStorybookのファイルを自動生成してみた
Next.js のプロジェクトを開発しやすいようにするlintとformatterなどの設定
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
Rails 7でReactとHotwireを同時に使って個人開発して得た知見
ブログをNext.jsで作り直した
最近流行りのRemixとCloudflareをキャッチアップするために一個アプリ作った話
State of JavaScript 2023
VanJS で素のDOM操作をリファクタしてみた
控えめな App Router と持続可能な開発 - PWA Night vol.59
ChatGPT にHTMLをプレビューさせるChrome拡張を作ってみた
HTML attributes vs DOM properties
プログラミング１年目の2023年に勉強した技術・書籍の振り返り - Qiita
useEffectEvent フックを使って useEffect ともっと上手く付き合おう
[すべて無料]Remix+Cloudflare Pagesでブロクシステムを作成する | 空雲 Blog
Reactのコードを打ち込むタイピングゲームを作った話&個人開発の流れ