OSS 観光名所を貼るスレ - ぽ靴な缶
これは はてなエンジニアアドベントカレンダー2023 2日目の記事です。 はてなエンジニア Advent Calendar 2023 - Hatena Developer Blog はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita トップバッターは緊張するけど、順番が回ってくるまで長い間ソワソワするのも嫌、という理由で例年2日目を狙うようにしている id:pokutuna です。今年も成功しました。 観光名所とは 目を閉じれば思い出す、あのコード... あの Issue... あなたが Web 系のエンジニアであれ、趣味で開発している方であれ、必要に応じてライブラリやフレームワークのコードを読むのはよくあることでしょう。公開の場で開発されているソフトウェアは、ソースコードだけでなく、開発コミュニティでの議論やバグ報告なども見ることができます。 リポ
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。 そもそもリーダブルコードとは ダスティン・ボスウェル著書の良いコードを書くための技術書です。 エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？ 意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。 チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。 リーダブルコードではそんな読みやすいという
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
シンプルなUIライブラリを使おう2023 - Qiita
皆さんこんにちは。昨今の技術選定においては、「シンプルさ」が重視されることが良くあります。 特に「イージー VS シンプル」という対立軸が持ち出されることが多く、規模の大きなアプリケーションを作る際には「シンプル」側の技術を選定するほうが有利だという論調がよく見られます。 本当にそうなのか、あるいはそもそも「シンプル」とはどういう意味なのかについては皆さんそれぞれの考えがあるでしょうから、この記事では深入りしません。 代わりに、実際どのような技術がシンプルなのかが気になるところです。そこで、今回は筆者が比較的得意なWebフロントエンドのUIライブラリの領域において、どのライブラリがシンプルなのか調査してみました。 React 先日プロジェクトでReactを使ってみたら、本当にシンプルな実装でやりたいことが全部できちゃうというか、すぐに画面に反映できて開発効率的にも良いなと感じました。 フロ
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
この記事でできるもの デモ 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の
ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
Ruby on Rails: The DocumentaryはRuby on Railsの誕生に纏わる44分のドキュメンタリー映像作品。 37signalsの関係者やShopifyのTobias LütkeなどのRailsコアチームの人々のインタビューが中心 www.youtube.com JasonとDavidの出会いからRailsの誕生、広く普及するまでを駆け足でおさらいした。React.js: The Documentaryなんやと比べるとあっさり目な内容。 僕も含め、周りでは「How to build a blog in 15 minutes with Rails」の動画でRailsを知った人が多くて、その動画も出てきて懐しかった。 www.youtube.com 中盤で触れられてる「RailsはスケールしないFUD」な話も、Rubyが遅いとかエンプラには早いとか色々評価があったと
2023年のふりかえり - laiso
TL;DR 2023年に学んだ知識で2024年はマネーを獲得 2022年のふりかえり 2023年にやったこと After ChatGPT ChatGPTの使い方 コーディング自動化 アプリケーション開発 クラウドプラットフォーム関連 技術系の動画 フレームワーク関連 AWSコスト最適化大作戦 オライリー本 メインエディタをVSCodeに乗り換えた AndroidからiPhone 15 Proに乗り換えた OSSへの寄付 2023年にやりたかったこと 2024年にやりたいこと LLMを活用したアプリケーションを開発する 技術書を書く ニュースレターを配信する 動画を作る 事業を作る 2022年のふりかえり laiso.hatenablog.com laiso.hatenablog.com 2023年にやったこと After ChatGPT Chat Completions APIのリリースを
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
私とRxSwift 2013-2014年 2016-2017年 2018-2019年 何がIssueだったのか 非同期処理 Future/Promise パターンのかわり Observableパターン 宣言的UI 状態管理 どう解決されたか Swift Concurrency で非同期処理 UIKitからSwiftUIへ Combine やObservation おわりに 私とRxSwift 2013-2014年 C#な世界でLINQとかReactive Extensionsが高評価なことを知る。 iOSアプリ開発でもこれを生かせないかということを考えはじめる。ReactiveCocoaのことも知る。 MVVM for iOS - Speaker Deck サーバーサイド方面でもReactive Programming の話題が活発なことを知る。 netflixtechblog.com 直
はじめに こんにちは！ Yahoo!知恵袋の津村です。去年の11月からYahoo!知恵袋のフロントエンドシステムのリアーキテクトに取り組んでいます。この記事では、これまで抱えていた技術的な問題と、それらをどう解決したかについて説明します。この結果、開発効率向上やレビュー時間短縮などの効果がありました。 Yahoo!知恵袋は利用者登録者数5,200万人、質問総数2億8,000万件、回答総数は6億5,000万件以上（2024年4月3日現在）ある、日本最大級のQ&Aサイトです。2004年からサービスを開始し、今年20周年を迎えます。 Yahoo!知恵袋はモバイルクライアント、バックエンド、フロントエンドの3つのシステムで構成されています。今回対象とするフロントエンドシステムは、ブラウザやYahoo! JAPANアプリからアクセスされる際のWebページを提供するシステムです。 Yahoo!知恵袋の
2023-09-29医療 PF 患者アプリチームのデータドリブンな改善はじめにみなさん、こんにちは。エンジニアの山田です。メドレーでは医療プラットフォームで患者が使う「CLINICS」アプリを iOS / Android / Web で開発・運営しています。日々、患者が便利に使えるように改善をしていますが、特徴としてエンジニアがプロダクトマネージャー(以下、PdM)と一緒に数値を見ながら、改善を行なっているという点が挙げられます。 今回は「CLINICS」アプリを開発している吉岡さんに、どのような開発フローで改善を行なっているのかをインタビューしてみました。 自己紹介吉岡さん医療 PF プロダクト開発室第一開発グループグロースチームにて患者向けアプリ「CLINICS」の開発業務を担当。主に薬局に関する機能開発を行っている。大学の専攻は物理で、大学途中からプログラミングを始めた。その後、 大
はじめに みなさんは動画編集をやったことはありますか？ 私は，頻度は低いものの動画編集をして動画投稿サイトに動画をアップロードした経験があります． 動画編集とは元来めんどくさく手間がかかるものではあるのですが，普段からWebアプリの開発をしている私は，以下のようなことを考えていました． HTML/CSSのように複数オブジェクトを一つのコンポーネントのように扱えたら，CSSのように統括して装飾を指定できたら，HTMLのレンダラー(ブラウザ)が相対値から計算して幅や高さを指定するように，動画のオブジェクトの時間長も編集アプリが計算して指定してくれたら，もっと楽に動画編集できるのになぁ，と． そこで私は，HTML/CSSをベースとした，動画の構成を記述する言語を記述することで動画編集を行えるという技術を開発しました． 元々OSSでやるか，未踏のようなイベントに持ち込むか悩んでいたのですが，大学4
業務で仮想スクロールを使った改善に関わる機会があり、その辺りの知見を活かしつつ、個人的にやりたかったことなども盛り込みつつ、React 用の OSS を作成しました。 もしよろしければスターいただけると励みになります。 使い方 以下のように通常の div などの場合とほぼ変わらない記述で、簡単に仮想スクロールによるパフォーマンス改善を導入することができます。 一般的に、仮想スクロールは単に表示するだけでもセットアップが面倒だったり、特に高さが未知もしくは可変の要素を表示した時にうまく動いてくれないものも多いですが、その辺りも自動的にハンドリングしてくれます。また各 component の bundle size も約 3kb(全体で約 4kb)なので導入し易いと思います。 import { VList } from "virtua"; export const App = () => {
React.js LLM Agent for next generation codingReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API. Email addressGet updates → ReactAgent v0.1.0 I've been working in the couple of months on an experiment, trying to make GPT-4 much
1. まずは基本から！React.jsとは？ React.jsはFacebookが開発したフロントエンドのライブラリ。コンポーネントという小さな部品を組み合わせて、動的なユーザーインターフェースを構築するのが得意。SPA (Single Page Application) での開発が主流で、ボタンやフォームなどのUI部品を効率よく作れるんだ。 あれ....? じゃあReactでもう良くない...? 結論 ページ数が少ない小規模な開発ならReact!大規模ならNext.jsか他のやつ！ ページ数が多い大規模の開発ならReactだと読み込み遅くなっちゃう！ 2. じゃあ、Next.jsって何？ Next.jsはReactの上に乗っかってるフレームワーク。このNext.jsの一番の魅力は、サーバーサイドレンダリング(SSR) と スタティックサイト生成(SSG)。これにより、クライアントサイドの
Reactを使用したシンプルな計算機アプリの作成 | 初心者向け四則演算対応 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクトの作成 状態管理とリアルタイム表示の実装 数字ボタン処理 四則演算子ボタン処理 小数点ボタン処理と重複防止の実装 バックスペースボタン処理と入力値の編集機能の実装 クリアボタン処理とリセット機能の実装 計算ボタン処理とエラーハンドリング 安全な四則演算の評価 表示部分の実装 初心者向けのスタイリング例 コード保守性向上のリファクタリング 最後に はじめに この記事では、Reactを使用してシンプルな計算機アプリを構築する手法を紹介します。 このアプリは、iOSのiPhone電卓アプリに似たデザインを持っており、特に初心者に向けたプロジェクトです。 今回作成するReactベースの計算機アプリは、使いやすさを重視し、iOSの電卓アプリに見られるような操作感を提供します。コードはシンプルで分かりやすく保守性が高くなるように設計しています。 以下のデモを通じて、この記事で紹介
はいさい！ちゅらデータぬオースティンやいびーん！ 概要 最近、Astro.jsに、Next.jsのWebアプリケーションを移行しましたが、本投稿は、Astroの紹介と、移行作業の感想をまとめるものです。 Astro.jsは欧米ではとても注目されているフレームワークですが、日本ではまだまだ話が広まっていない気がします。 Astro.jsとは Astro.jsは、MPAの静的サイトをレンダーするJavaScriptフレームワークです。 フレームワークといえども、Next.jsのように、Reactなどのフロントエンドフレームワーク専用ではないのです。 どのようなJavaScriptを使っても大丈夫なのです。 React.js === React.js、Vue.js => Nuxt.jsなどのように、フロントエンドフレームワークに一体化したバックエンドフレームワークという従来の考え方から完全に脱出
about motemen 美顔器 (@motemen) / Twitter inspired by airreader.hatenablog.com 15パズルの実装 https://ja.wikipedia.org/wiki/15%25E3%2583%2591%25E3%2582%25BA%25E3%2583%25ABja.wikipedia.org 15パズルの機能を実装するにあたり、考えるべき要素はサイズ16の配列と入れ替え操作の2つのみである。 サイズ16の配列 これは盤面そのものに対応する。 0を空のパネルとして以下の配列があるとする [0, 1 , 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] これを盤面として表現する場合4要素ずつに区切り、縦に並べてやれば良い [ [ 0, 1, 2, 3], [ 4, 5, 6, 7],
「SP版サロンボード」へGraphQL導入と考察
「SP版サロンボード」へのGraphQL導入と考察 目次 はじめに 案件概要 導入背景 BFF GraphQLの導入 GraphQLライブラリの比較 考察 さいごに はじめに リクルートの美容領域でフロントエンドエンジニアをやっている、加納英樹と申します。 今年で新卒4年目になります。この記事では、自分が2022年4月から1年ほど関わっている スマホ版(以下、SP版)サロンボードリプレイス案件の裏側について話したいと思います。 今回は、GraphQLを導入した理由と、今後横展開する際に気をつけるべきポイントを述べたいと思います。 次回、もう少し技術に寄った話を書こうと思います。 案件概要 HOT PEPPER Beautyのサロン向け予約管理システムとして、サロンボード というものがあります。サロンボードはPC版とSP版がありますが、今回はSP版をリプレイスすることにしました。 実際のアプ
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより 本稿では、弊社HIKKYのフロントエンドチームプロジェクトで主に使われる、フロントエンドのテストの概要についての案内をします。 対象読者: JavaScript・TypeScriptわかる テストってよくわからない テストってなに？ どんなのがあるの？ どうやるの？ なお本稿は株式会社HIKKYフロントエンドチーム向けのガイドラインであるものの、内容については筆者に一任されており、株式会社HIKKY及びその意向等とは無関係です。 テストの種類 テストは主に、次の2種類に分けることができます。 手動テスト 自動テスト 本稿では自動テストを主題にします！ 手動テストの概要 その名の通り、テストをする人が実際のテスト対象（サイトや関数）を手動で確認していくものが、手動テストです。 例えば、サイトが 1 フォームのバ
弊社は「dejam」というサイト改善ツールを運営するかたわらで、広告代理店に対して事業を伸張させるコンサルを提供しています。 「dejam」は無料で使えるので気になる方はこちらから、お問い合わせください。 このnoteの目的弊社は1年半オフライン展示会に参加するとことで、アプローチしたい企業には9割ほど接点を持つことができました。 2024年1月を最後に、しばらくは出展しない予定です。 そこで、PDCAを回してきた最終結論をこのnoteに記載することで、みなさまのお役に立てればと思い、キーボードを取りました。 先に結論を書くと、以下のクリエイティブが最強という着地になりました。 大真面目な展示会のポスターふざけてると思いますか？ いいえ、大真面目で社内議論した末、このようになりました。 どんな歩みを経ればこうなってしまうのか。 それも含めて書き留めようと思います。 なぜオフライン展示会にそ
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法 開発者として経験を積んでいくと、少ないコードで、より多くのことを実行できる技術を使用したいと思うようになるもの。Tailwind CSSのような強固なフロントエンドフレームワークは、そんな開発者の望みをかなえる存在です。 この記事では、ウェブページの構築とデザインを支援するCSSフレームワーク、Tailwind CSSについて学びます。Tailwind CSSのインストール方法や、プロジェクトへの統合方法、そしていくつかの実用的なアプリケーションもご紹介します。また、カスタムスタイルやプラグインの作り方についても見ていきましょう。 Tailwind CSSを使ってサイトを構築する方法について、動画での解説もご用意しています Tailwind CSSとは Tailwind CSS Tailwind CSSは、ユーテ
There have been quite a few articles in the past year or so about the downsides of using Rust and introducing the async keyword into your code base: Why asynchronous Rust doesn't work Mixing Sync and Async Rust Async Rust Is A Bad Language Avoid Async Rust at All Cost ...too lazy to continue searching, but you get the idea It generally boils down to two things: async is invasive. The path of least
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leaflet) Deck.gl MapLibre GL JS (fork of Mapbox GL JS) react-openlayers OpenSteetMap を使えるライブラリはかなりたくさんあり色々試したが、本記事では React Leaflet でシンプルな地図を表示させたメモです 環境 React 18.2.0 leaflet 1.9.4 react-leaflet: 4.2.1 React Leaflet を使う準備 $ npm i react-leaflet leaflet $ npm i -
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、DBeaverの特徴や、DBeaverの導入方法について解説していきます。 DBeaverとは？ DBeaverの特徴まとめ DBeaverは、SQLクライアントソフトウェアアプリケーションであり、データベース管理ツールです。 DBeaverには、CE(無料版)とEE(有料版)がありますが、無料版で十分過ぎる性能を持っています。 特徴をまとめると、次のとおり。 特徴1: マルチプラットフォームで対応OSが豊富 Windows / Mac / Linux でアプリケーションが提供されています。 特徴2: 対応DBが豊富 MySQL、PostgreSQL、SQLite、Oracle、DB2、SQL Server、Sybase、MS Access、Teradata、Firebird、Apache Hive、Phoen
こんにちは！ryskitです。 この記事はスターフェスティバル Advent Calendar 2023の1日目の記事です。 qiita.com はじめに スターフェスティバル株式会社（通称、スタフェス）に2023年の3月に入社してから早くも10ヶ月目になりました。早すぎる... 入社してKitchen Successチームに参加してからすぐ開発に参加して機能開発を始めたのですが、チームメンバーから「馴染むのが早い」「キャッチアップが早い」「WOW（スタフェスのバリュー）」とフィードバックをいただけることがありました！ 入社してから最初の約3ヶ月間ぐらいの振る舞いは、チームメンバーとして将来の仕事のやりやすさに影響する（つまり、チームメンバーに信頼してもらえるか）と考えていて、この期間に何を意識していたかを振り返ってみようと思います。 ※ 言わずもがなですが、継続的に結果を出して信頼しても
今さら…というツッコミが聞こえてきそうですがちょっと待ってください。 React.js/Auth0はAuth0の公式にサンプルがありますが、今回はNext.jsを選択しています。 そして、 Next.js/Auth0もAuth0公式にサンプルがあるのですがこれはSSRのサンプルであり、SSGのサンプルはありません。 このNext.js/Auth0/SSGのパターンは、ググっても記事が無くハマりどころがあったのでまとめていきます。 本記事を通してNext.js/Auth0/SSGの構成で認証認可の実装を体験できます。 想定所要時間は5〜10分です。 補足 基礎の組み合わせの話なので、React.js/Next.jsをちゃんと理解している方はハマらないと思います。 本記事は、最終的にはCloudFront/S3の静的サイトホスティングを利用する場合を想定しています。 それでは、はじめていきまし
![[Auth0]Next.jsで生成した静的ページに認証を追加してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e81bc75025d4e88341afa9e9fc9af0a236024e2/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F10%2FAuth0ByOkta.jpg)
この記事では、未経験からエンジニアになって3年をめどに年収を600万円以上にする堅実な方法について語っていきます。私の経験がメインではありますが、周囲の同じような歴数/境遇のエンジニアたちとも話しており、複数のケースをみてきた結果なので一定の再現性はあるのではと思います。 なぜ年収600万？経済産業省の調べによると、独立して仕事ができるレベルのエンジニアの平均年収は2017年度で576万円。未経験からエンジニアになって初めに目指すことは一人で仕事ができること、であるため、その平均額に近い年収600万という額は、まずエンジニアになって目指す指標になるとみなしています。 私がエンジニア3年目終わりにおこなった転職活動でも、転職ドラフトという金額を提示されて面接に進むか？決められるサイトでの提示額や、実際に内定をいただいた金額も600万〜であり、周囲の同じ経歴数の人たちも似通っていたためミドルの
オープンロジを支える技術 2023 OPENLOGI Advent Calendar 2023 最後の投稿です。 株式会社オープンロジは2013年12月25日が創業日なのでちょうど本日で創業10年目という節目を迎えることになりました。 今があるのもひとえに、ここまで関わってくれた多くの方々（お客様、パートナーの皆様、株主の皆様、過去および現在の全てのメンバー）のおかげです。 そんな感謝の気持ちを携えながら今年も締めくくりとして一年の技術的なアップデートをまとめたいと思います。 過去のエントリー オープンロジを支える技術（2022年版） オープンロジを支える技術（2021年版） オープンロジを支える技術（2020年版） オープンロジを支える技術（2019年版） オープンロジを支える技術（2018年版） オープンロジを支える技術（2017年版） 今年の主なアップデート 今年実施された技術的なア
crowdworks.jp のフロントエンド活動を振り返る2023 - クラウドワークス エンジニアブログ
この記事はクラウドワークス Advent Calendar 2023 シリーズ 1の1日目の記事です。 クラウドソーシングサービス「クラウドワークス」（以下 crowdworks.jp ）にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける@okuto_oyamaです。 一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。 フロントエンド活動の振り返りをしてみよう 一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。 qiita.com engineer.crowdworks.jp 全体総括編 まずは crowdworks.jp の全体のフロントエンド活動を総括していきます。 erbのVue.js化活動が拡大 昨年から続けているフロントエンドとバックエンドの分離作業についてお話ししま
Guille Ojeda for AWS Community Builders Posted on Aug 21, 2023 • Originally published at newsletter.simpleaws.dev Note: This content was originally published at the Simple AWS newsletter. Understand the Why behind AWS Solutions. Subscribe for free! 3000 engineers and tech experts already have. Use case: Securing Access to Microservices Scenario We have an online learning platform that has been spl
All TypeScriptのMonorepoのlinterをESLintからbiomeにしたらlintが25倍速くなった🚀 - KAKEHASHI Tech Blog
フロントエンド(React.js TypeScript) バックエンド(Node.js TypeScript) インフラ(CDK TypeScript) の Monorepo の linter を ESLint からbiomeに変更したら lint が約50秒かかっていたのが大体2秒になって嬉しかったので共有します。 こんにちは、カケハシでソフトウェアエンジニアをしている加藤です。 本エントリはカケハシ Part 2 Advent Calendar 2023の 21 日目の記事です。 ぜひ Part1 も 2 も見て頂けたらと思います。 同じカケハシ社内の他のチームでは以前 コードフォーマッターを Prettier から dprint にしたら 10 倍以上速くなった話 🚀 で紹介した通り、dprintを導入していますが、今回僕たちのチームは biome を導入してみました。 導入してみ
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 | 東京のWeb制作会社 株式会社クーシー
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 システム開発 プログラミング 今回は、Dockerを使用してReact（React.js）の環境を構築する手順を紹介します。 Dockerでの環境構築は慣れていない人にはやや複雑です。本記事では画像つきで、初心者でもできるようにわかりやすく解説します。 実際に環境構築を行いながら書きましたので、トラブルもありました。その時の対応についてもそのまま載せてありますので、あなたのケースでお役に立つかもしれません。 ではいってみましょう。 React.jsとは？ React.jsはReactと同じもので、「React」と書かれたり「React.js」と書かれたりします。 React.jsは、Facebookが開発したJavaScriptライブラリです。コンポーネントと呼ばれる小さな部品を組み合わせて大きなアプリケー
僕がエンジニア転職した方法
またポエムでも書こうと思った エンジニア転職目指している人たちいると思うけど、どうやって転職すればいいのかわからない.... 私は２年ぐらい勉強して３０代でIT業界に入りました。最初は、PHP, MySQL, jQueryやってましたが全然成果物を作れなかったですね。通ってたプログラミング教室がそもそもレガシーだった笑 Jboyさんはどうやって転職したのか🧑💻 あまり技術者がいないと言われているモバイルアプリを作る技術を勉強しましたね。FlutterとSwiftを勉強して転職しました。 現在はフリーランスエンジニアですが、モバイルやってたおかげで仕事たくさんあるので、ライバルが多いPHP, Rubyなんてやらなくて良かったなと思いましたね。 例をご紹介💁 僕は現在は東京に住んでいますが、福岡県に住んでいたので地方の人の感覚で感想を書きます。参考にならないかもしれません👎 やったこ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript Origins: The Documentaryを観た - laiso
The Front End Developer/Engineer Handbook 2024
2023年版！エンジニア必見のチートシート集 - Qiita
GoエンジニアがReactにチャレンジして驚いた5つのこと
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
Ruby on Rails: The Documentary - laiso
いまさら振り返るRxSwift - laiso
Yahoo!知恵袋 フロントエンドをリアーキテクトしている話
医療 PF 患者アプリチームのデータドリブンな改善 | MEDLEY Developer Portal
【VSML/VSS】動画を編集できる言語を作った話 - Qiita
React Server Components 対応の仮想スクロールライブラリを作りました
ReactAgent - The open-source React.js LLM Agent
Next.jsってそもそもなんで必要なんだっけ - Qiita
Astro.js - Next.jsからWebアプリケーションを移行してみた感想 - Qiita
motemen15パズル - homenis
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより
1年半PDCAを回し続けて展示会を完全攻略した話｜株式会社LeanGo
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法
n8s.site | Async Rust Isn't Bad: You Are
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
DBeaverとは？DBeaverの特徴と環境構築・導入方法まとめ
どうして入社してすぐにチームに馴染めたのかを振り返ってみる - そうきたか
[Auth0]Next.jsで生成した静的ページに認証を追加してみた | DevelopersIO
エンジニアになって3年で額面年収600万円を超える｜ジュニア→ミドル｜rio_dev
OPENLOGI を支える技術（2023年版） - Qiita
Securing Microservices with AWS Cognito