はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
Kansai WordPress Meetup@大阪『 WordCamp Tokyo 2023 をみんなで振り返る+α (https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/296857054/) 登壇資料です。
Next.js の状態管理 2020
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
Astro 1.0 | Astro
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
Jamstackを検討する - ゆーすけべー日記
Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや？ Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところがあるのを考慮願いたい。 Jamstackとは？ JamstackのJamは以下の頭文字をとっている。 JavaScript APIs Markup まず、フロントエンドを持たないAPI群がある。APIはブラウザのJavaScriptから叩かれるかもしれないし、後述するようなSSG =「Static Site Generator」のフレームワークが叩くかも知れない。どちらにせよユーザーに配信されるのはSSGが出力した、Markup。つまりプリレンダリングされた
BFFとは Backend for Frountendの略で、UI/UXを向上させる目的でフロントエンド専用のサーバーを用意したアークテクチャパターンです。 Webアプリケーションサーバーは下記の処理を行います。 リクエストを受ける DBからデータの取得・更新 ページを構築 (これはクライアントですることも) ページ or データの返却 このうち、「DBからデータの取得・更新」とそれ以外をフロントエンドとバックエンドの役割に明確にわけます。 BFFの役割となるサーバーをクライアントをWebサーバーの間に設け、「リクエストを受ける」と「ページ or データの返却」、場合によっては「ページの構築」をここで処理します。 こうすることで、これまでリクエストというUX関わる部分をフロントエンドエンジニアの責務に移行することができます。 ページの構築をクライアントではなくサーバーで行う場合、これもBB
この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの中で細かい設定ができる pathpida 再生したページのパスの定数ファイルを作ってくれる便利なやつ タイポが無くなって助かる typed-scss-modules CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 宣言漏れや補完など、痒い所に手が届く headlessCMS関連 microcms-js-sdk 最近扱っている案件のheadlessCM
Laravel使いの情報源まとめ
はじめに 最近Laravelの情報収集用にTwitterアカウントを作ってみました。結果、海外に比べて日本は情報が散逸していてちょっと辛いぞという気持ちになりました。そのためLaravelの情報を集約するためのリンク集を作ることにしました。このリンク集が、業務や学習の手助けになればと思います。もし追加した方が良いリンクがあれば、コメント欄で教えてください。 基本 Laravel学習の時も、実業務で使う時も一貫してお世話になるであろうリンクを集めています。 Laravel公式 主にLaravelの機能を調査したいときに参照します。 https://laravel.com/ https://readouble.com/laravel/ (非公式和訳) アップグレードガイド バージョンアップ時の差分と対応方法を知りたいときに参照します。 https://laravel.com/docs/6.x/
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
Vue.jsエコシステム動向2023
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
Astro
One frontend architecture with endless possibilities Step into the future with Islands — Astro's next-gen frontend architecture. Supercharge your development with automatic JS-to-HTML streaming and a beloved developer experience. Content-first websites Fetch data from your CMS or work locally with type-safe Markdown and MDX APIs. Astro automatically removes unused JavaScript and renders to HTML fo
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ
Next.jsをサーバーレスでやっていくためのServerless Next.js Component - Sweet Escape
今回は最近その存在感がますます上がっているNext.jsとサーバーレスの話です。 はじめに サンプルアプリ Serverless Next.js Component デプロイ 作成されるリソース CloudFrontのディストリビューション Lambdaファンクション S3バケット 大まかな挙動 できないこと まとめ はじめに この投稿は2020年11月27の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass.com もし間に合えば、かつ時間があればぜひライブ配信のほうにも参加ください。 さて、今回は11/9に登壇させていただいたFront-End Studyでの話でも少し紹介したServerless Next.js Componentについて取り上げます。 僕は昨今のフロントエンドWeb周りの技術では最近は一番N
NextのJSぜんぶ抜く
サイトパフォーマンスを最適化するため、export 時に Next.js のランタイムを全部抜いた。 どういうことか？ このブログは静的書き出しをしているので、ただの静的なドキュメントといえる。だが Next にしろ Nuxt にしろ、書き出したページをブラウザで読み込むと JS アプリケーションとして振る舞うために Hydration 処理が行われる。これをするために JS モジュールの読み込みや Scripting 処理の負荷が発生する。 書き出された HTML には Hydration 処理用に JS モジュールやシリアライズされた state が挿入されている ピュア HTML を目指して しかしこのブログはドキュメントでありアプリケーションではないので、ほぼ JS を動かす必要はない。state は不要だし、client-side routing も要らない（先読みに必要かもだが
Astro 2.0 | Astro
Introducing Astro 2.0! Astro is a popular web framework for building performant, content-focused websites. Our next-gen frontend architecture (known as Astro Islands) can optimize your site to load 33% faster with 90% less JavaScript using the UI frameworks you already love like React, Svelte, and Vue. Astro 2.0 is the first major web framework to deliver complete type-safety for Markdown and MDX.
next.js 9.4 に Incremental Static Regeneration という実験的な新機能があります。 Blog - Next.js 9.4 | Next.js パッと見、「段階的な静的サイト生成…？なんのことだろう…」となったのですが、手元で試してみた感じ、これが既存のサーバーの実装アプローチを変える、革命的な機能ではないかと思いました。 解説を書きつつ、どのような応用があるか解説します。 next.js の Incremental SSG を試してみる リポジトリはここです。 mizchi/issg-playground 解説にあたっては、必要なのはほぼこのファイルだけで、短いのでそのまま貼ります。 // pages/[slug].tsx import { GetStaticProps, GetStaticPaths } from "next"; type Pro
はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
静的サイトジェネレーターとは？ Static Site Generator（SSG） WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり
【2023/11/14追記】 SPA, SSRの説明を訂正、および不必要な箇所の削除を行っています。 また、この記事はNext.js等の、具体的にフレームワークで使用されている各概念を説明するものではないので、ご留意ください。 概要 SPA, SSR, SSGという技術用語を、業務の中でも、ネットの記事の中でもよく耳にするのですが、こういう感じかな？といううっすらとした理解のままだったので、今回整理しました。 内容に誤りがあった場合はご指摘いただけますと幸いです。 (MPA) -> SPA -> SSR -> SSG という順に説明をしていきます。 SPA SPAの要旨を述べると、最初に、HTML, CSS, JSなどの必要なassetsをWebサーバーから取得し、その内のJSをもとに具体的なUIを描画し、またページ遷移の際のUIの変化も、JSをもとに再描画を行うアーキテクチャとなります。
Next.jsでSSRを限界まで簡単に実現する
Developers Summit 2020 KANSAIの登壇資料です。
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
Astro 3.0 | Astro
Introducing Astro 3.0! Astro 3.0 is the first major web framework to support the View Transitions API. Fade, slide, morph, and even persist stateful elements across page navigation with ease. Until recently this had only been possible inside of JavaScript Single Page Applications (SPAs). But thanks to advances in the web platform, these features are now available for everyone in Astro 3.0. Other r
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
next.js の SSG は糞 - Diary
next.js の SSG は糞 ぼくは next.js 結構好きでこのブログとかも next.js で作ってるんですが、最近の next.js の方向性にはちょっと危うさを感じています。 next.js は最近は静的サイトジェネレータ+αみたいな感じになっていて、サーバーサイドジェネレーションなる機能のサポートが入っています。 でもこれどう考えてもゴミでしょ。いや記事が 500 件とかならいいけど、 50 万件あったらデプロイのたびにどんだけ時間かかる？という話で。それからサイトが生きているかぎり結局のところ記事はどんどん増えていく以上トップページは動的生成にならざるを得ないわけで。あまりはっきりと言われているわけではありませんが、 next.js を開発している人たちは WordPress のテーマを PHP で書きたくない人というペルソナをもとに開発していて、その人たちは CDN を
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁のサイトやばすぎるwww - Qiita
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
Astroで始める爆速個人サイト開発
メルカリShops のフロントエンド | メルカリエンジニアリング
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
SSR / SSGの理解を一段深ぼる: BFFアーキテクチャ
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ
ブログをAstro に移行しました - As a Futurist...
Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
静的サイトジェネレーター Gatsby - Qiita
SPA, SSR, SSGって結局なんなんだっけ？
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
HTMLコーディングでもReact+TypeScriptの開発体験を得る
GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM
xtech.nikkei.com
business.nikkei.com
business.nikkei.com
ribooon.com
nordot.app
otonasalone.jp