Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
鈴木たかのり（@takanory）です。今月の「Python Monthly Topics」では、Python製の静的サイトジェネレーターSphinxを使用してWebサイトを構築し、テーマを適用、外部へ公開する流れについて紹介します。後半ではSphinxの便利な拡張機能を紹介し、Webサイトをより便利にしていきます。 Markdownでドキュメントを書くだけで、きれいなWebサイトが簡単に公開できるので、ライブラリのドキュメントなどでもよく使われています。 Sphinxとは SphinxはPython製の静的サイトジェネレーターです。静的サイトジェネレーターとは、Markdown等の軽量マークアップのテキストファイルから、静的なWebサイトを生成するアプリケーションのことを言います。Python製の静的サイトジェネレーターにはSphinxを含め以下のツールなどがあります。 Sphinx：h
※本記事は、技術評論社「Software Design」(2024年1月号)に寄稿した連載記事「Google Cloudを軸に実践するSREプラクティス」からの転載1です。発行元からの許可を得て掲載しております。 はじめに 前回はDatadogによるクラウド横断のモニタリング基盤について解説しました。 今回はCloudflareとは何か、なぜ使っているのか、各サービスとポイント、キャディでの活用例を紹介します。 ▼図1 CADDiスタックにおける今回の位置付け Cloudflare とは 本記事では、Cloudflare社が提供しているプラットフォーム全体を「Cloudflare」とします。 Cloudflareは、ひと昔前までは数あるシンプルなCDN(Contents Delivery Network)サービスの1つでした。CDNとは、コンテンツの配信を最適化するためのネットワークです。
はじめに こんにちは。Webフロントエンドチームの山口です。 この記事では、N予備校の規約類を microCMS で管理して、運用を改善した取り組みについてご紹介します。早速ですが、前置きは抜きにして本題に入りたいと思います。ぜひお付き合いください！ 背景、前提 N予備校では、基本的な 利用規約 の他、定期的に開催されるキャンペーンの応募規約など、様々な規約を公開しています。 中野信子講座での著書プレゼント企画 受講者参加型お悩み相談企画 総数は年々少しずつ増加しており、記事の執筆時点で23件もの規約が存在します。これらは全てプロダクトのコードベースにハードコードされており、開発チームが社内のステークホルダーから変更依頼を受け付ける形で管理されていました。 新しく規約を追加することもあれば、既存の規約に変更を加えることもあります。開発チームは依頼元と必要なコミュニケーションを取りながら対応
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
DIST.40 「Jamstackの実際とミライ」での発表資料です。 https://dist.connpass.com/event/284922/
You can read about these vulnerabilities in English at https://ec0.io/post/hacking-cloudflare-pages-part-2/ 免責事項Cloudflareは、HackerOne上で脆弱性報奨金制度(Bug Bounty)を実施しており、脆弱性の診断行為を許可しています。 本記事は、当該制度を通して報告された脆弱性をCloudflareセキュリティチームの許可を得た上で公開しているものであり、無許可の脆弱性診断行為を推奨することを意図したものではありません。 また、Cloudflareは脆弱性調査において他の研究者との協力を許可しており、脆弱性調査を目的とした他の研究者との脆弱性情報の共有が許可されています。 Cloudflareが提供する製品に脆弱性を発見した場合は、Cloudflareの脆弱性報奨金
Q by LivesenseをWordPress on EC2からHugo on Cloudflare Pagesに移行しました - LIVESENSE ENGINEER BLOG
はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by Livesense）を、Hugo on Clouflare Pagesに移行しました。 q.livesense.co.jp 弊社のWordPress運用はやや特殊で、エンジニアがサーバーにSSHして
コンポーザブルコマース（Composable Commerce）とは、複数の最新技術やサービスを選んで、それらをコンポーネントとして柔軟に組み合わせることで統合システムを構築する、最新のECシステム開発アプローチです。 従来のモノリシック（monolithic、「一枚岩の」という意）なECシステムとは異なり、コンポーザブルコマースでは交換可能なモジュール式のビジネス機能単位の複数のコンポーネントをAPIで連携させることで、シームレスなECシステムを実現します。 柔軟性、拡張性、俊敏性に富んだコンポーザブルコマースのECプラットフォームでは、変化する顧客ニーズに素早く対応しながら優れた顧客エクスペリエンスを提供できるようになります。 この記事では、インターファクトリーでマーケティングを担当している筆者が「コンポーザブルコマース」について解説します。 従来のモノリシックなECシステムとコンポー
こんにちは！Vue.js 日本ユーザーグループ代表の kazupon です。 2023年10月28日(土)に中野セントラルパークカンファレンスでVue Fes Japan 2023を開催しました。 去年2022年はオンラインカンファレンス開催でしたが、今年2023年は COVID-19 が落ち着き、初開催した2018年より5年ぶりに日本でようやくオフラインカンファレンスを開催することができました。 当日多くの方に参加頂き、1日のカンファレンスを通して盛り上がりました。 協賛して頂いた各社、団体、個人スポンサーの皆様、スピーカーの皆さん、そして参加された皆さん、本当にありがとうございました。 カンファレンス開催から1ヶ月以上経ってしまいましたが、改めてカンファレンスを振り返ってみたいと思います。 レポート今年のカンファレンス参加状況ですが以下になりました。 全参加者数: 587名 一般参加者
Is Jamstack Officially Finished? Brian Rinaldi | Wednesday, July 26, 2023 Earlier this week, Netlify officially killed The Jamstack Community Discord. It was a rather abrupt end, with little more than a week’s notice. Here’s a portion of the announcement: Over time, we have noticed a decline in activity and engagement within the server. After careful consideration, we have come to the decision to
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
Workers AI: serverless GPU-powered inference on Cloudflare’s global network
Workers AI: serverless GPU-powered inference on Cloudflare’s global network09/27/2023 This post is also available in 简体中文, 日本語, 한국어, Français, Deutsch and Español. If you're anywhere near the developer community, it's almost impossible to avoid the impact that AI’s recent advancements have had on the ecosystem. Whether you're using AI in your workflow to improve productivity, or you’re shipping AI
クソアプリ Advent Calendar 2023 1日目の記事です。 アドベントカレンダーの記事投稿を終わらせた俺にかわせない攻撃は無い 前置き おはようございます。DE-TEIUです。 冬の季語でおなじみのクソアプリアドベントカレンダーの時間です。 過去にアドベントカレンダー用に作ったクソアプリ p5.jsで作ったダメなソリティア 絶対に作業できない作業用BGMサイト 社会に一石を投じるクソアプリ開発 鼻毛が生えるカメラアプリ 映画館のスクリーンでYouTubeが見られるクソアプリ 電卓の成長を体験できるクソアプリ JamstackだけどJamstackじゃないクソアプリ 画像ファイルを別の形式に変換するアプリって色々あるじゃないですか。 何か適当な画像ファイルを渡すと、以下の形式に変換して出力する、みたいなやつ。 jpg png gif webp tif etc... ちょっと軽く
WordPressをヘッドレスCMS化する方法とは？メリットやデメリットを解説！ | Web Design Trends
WordPressはこれまでブログやWebサイトの作成や管理のためのCMSとして多くのユーザーに利用されてきましたが、最近ではヘッドレスCMSとしてWordPressを活用する方法が注目されています。 ヘッドレスCMSとは、フロントエンドとバックエンドが分離されているCMSのことで、様々なメリットがあります。 今回は、WordPressをヘッドレスCMSとして利用するメリットや具体的な方法をご紹介したいと思います。 【2023年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends ヘッドレスCMSとは ヘッドレスCMSとは、コンテン
2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』（単著：毎日コミュニケーションズ、2007年）など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。
pwa-night-vol60-slide.md theme marp gaia true Qwik それはフロントエンドの見た夢 Long Version @mizchi | PWA Night About mizchi | Plaid, Inc Node.js, Frontend エンジニア この資料は Workers Tech Talk の LT(5min) を膨らませたもの 最近は League of Legends を10年ぶりにやってる Qwik とは... 見た目は React！ 中身はコンパイラ! Qwik とは https://qwik.builder.io/ BuilderIO社 (ノーコードプラットフォーム)が開発 パフォーマンスに全振りした過激な設計が特徴 Pros React JSX 方言でノウハウを転用できる 採用するだけでパフォーマンス問題は(ほぼ)解決 使い
Recently, we announced support for npm: specifiers on Deno Deploy. This made Deploy the first edge JavaScript runtime built on isolates to support the more than 2 million modules on npm. While Deno is intentionally not designed as a drop-in replacement for Node.js, our ongoing work to provide backward compatibility with modules designed for Node has unlocked new ways to use Deno to build web appli
１行のコードから社会課題の解決へ、思いを馳せる。READYFORのエンジニアリングの軌跡と展望｜Ryohei Kumagai
はじめにREADYFORでVPoEをしている熊谷です。READYFORアドカレ１日目を担当させていただきます。 今回は、READYFORのエンジニアリング組織について、シリーズAの資金調達後の2019年1月から、シリーズBやCを経て、今日までの約４年間を振り返ろうと思います。これまで多くの取り組みや、数々の失敗など、怒涛の日々を過ごしてきましたが、そのあたりを一度棚卸して整理することで、次の活動にも繋げていけたらと考えています。 また、シリーズA〜Cラウンド程度のスタートアップ企業や同規模のエンジニアリング組織を抱えているエンジニア/マネジメント層の方々へ、何か一つでも参考になる事があれば幸いです。 あと今回、この約４年間の振り返り記事を書こうと考えた理由はもう一つあります。昨今では世界情勢やスタートアップ業界、また生成AIなどテクノロジー界隈などなど、様々な領域で転換点を迎えていると思い
達人出版会
［令和6年度］基本情報技術者 超効率の教科書＋よく出る問題集 五十嵐 順子 徹底攻略 データベーススペシャリスト教科書 令和6年度 株式会社わくわくスタディワールド 瀬戸美月 著 徹底攻略AWS認定SysOpsアドミニストレーター - アソシエイト教科書＆問題集［SOA-C02］対応 鮒田 文平, 長澤 美波, 日暮 拓也, 奥井 務, 渡辺 樹, 山下 千紗, 伊藤 翼 世界標準MIT教科書 アルゴリズムイントロダクション 第4版 第2巻 高度な設計と解析の手法・高度なデータ構造・グラフアルゴリズム Thomas H. Cormen, Charles E. Leiserson, Ronald L. … 問題解決の教科書 CITA式問題解決ワークブック 市岡 和之 はじめてのType-C電子工作 じがへるつ スッキリわかるJava入門 実践編 第4版 中山 清喬(著), 株式会社フレアリ
はじめに SanityというヘッドレスCMSを紹介します。以下ヘッドレスCMSのことをCMSと表記します。（そもそもコンテンツ管理システムにコンテンツ表示側のシステムが乗っかってるほうがおかしいんだからわざわざヘッドレスCMSって言うのもそろそろやめね？という気持ちがある。ちなみにWordPressみたいなヘッド有(?)CMSのことモノリシックCMSっていうらしい。WordPressのくせにかっこよくて生意気！！) 日本国内ではmicroCMSなどが有名で、ここZennではSanityに関する記事は現在1つしかないという現状を嘆いてこの記事を贈ります。 なぜ推すのか 前提として僕は大昔にContetfulというCMSを1度だけ使ったことがあるだけで、その他CMSはWordPressしか使ったことがありません。なので他CMSとの比較を実際に使用した人目線で書くことはできないことをご了承くださ
いまどきHeadless CMS 20選 - Qiita
あの日、WordPressはオワコンだのJamstackは正義だのと熱に当てられ、右も左もわからぬままContentfulに乗り換えてから早数年。 公式サイトはおしゃれでなういし、決して使いにくいということはないものの、果たしてこれが最善の選択だったのか何もわからぬまま今日まで来てしまいました。 時は流れて、当時より確実に選択肢が増えた今、ついに比較検討に乗り出すときがきたかもしれません。 SaaS系 全然余談なんですが、SaaSが「Software as a Service」で、クラウドなHeadless CMSなんかはさらにCaaS（Container as a service） という分類になるそうです。 *aaSシリーズむずい……。 Contentful 多分一番有名なドイツ生まれのHeadless CMS。 無料プランもあって個人にも優しい。 Prismic.io すごく有名なや
From Next.js to Rails then Elixir: My journey through React.js burnout
From Next.js to Rails then Elixir: My journey through React.js burnout I've been a web developer since 2019. I used React.js and React-based frameworks like Gatsby, Next, Remix, Astro, and Hydrogen. I've never been fully content with any of these tools, but, as a beginner who was deep into the JS ecosystem, all that I could hear from my peers was something along those lines: "This is the way, any
近年、ウェブ開発の現場で注目を集めているヘッドレスCMS。その中でもその高機能さで注目されている「Storyblok」を紹介したいと思います Storyblokの実力は、ガートナー社のカスタマーズチョイス調査においても高い評価を受けています。数多くのヘッドレスCMSが存在する中、Storyblokが唯一選ばれたサービスとなりました。 Storyblokは「ストーリーブロック」と発音しますが、「Block」ではなく「Blok」なのは、単にドメインが取れなかったからだとCEO自らがイベントで語っておりました。 さて、Storyblokは単なるヘッドレスCMSとしての機能を超えた、シンプルなヘッドレスCMSと比べてかゆいところに手が届く機能を備えており、その利便性を気に入った多くの企業や開発者に支持されています。 そんなStoryblokの特徴を2つ取り上げてご紹介したいと思います。 目次 St
未経験から人類やってる駆け出しホモサピエンスこと、むろです。 これは freee Designers Advent Calendar2023の最終日、25日目の記事です。 昨日はeijiさんの回転寿司にはおれ（フライドポテト）の存在が不可欠だと思いたいという記事でした。 この記事では、先日公開された vibes というデザインシステムを、プログラミングできない私(デザイナー)が使ってみて Cloudflare でページを公開してみるという内容のことを書きます。 どういう人に読んでほしいかデザインシステムが大好きなデザイナー プログラミングはできないけどHTMLやCSSは大好きなデザイナー というような方に読んで・vibesを試してもらえると嬉しいなと思っています。が、記事の長さ的に下記は使えるものとして説明を省略しています。 黒い画面(ターミナル) Git, GitHub ViteやRea
Jamstackでは必須のCDN。CDNの選定方法や、CDNサービスの比較情報を知りたいという方は多いのではないでしょうか？そこで、この記事では、機能やパフォーマンス、費用といった観点からCDNの情報をご紹介します。Jamstack開発を進めたいという方はぜひご覧ください。 JamJam(ジャムジャム)は最新のWeb制作手法であるJamstackやヘッドレスCMSに関する基礎知識や最新情報から、開発や実装に関する技術的情報まで、お役立ち情報を提供するWebメディアです。
最近はJamStackサイトのホスティングサービスにCloudflare Pagesを採用する方が増えていると思います。 特に設定を入れることなく高速に動作するのが特徴ですが、Cache Rulesの設定をすることでwebサイトをさらに高速化することができます。ここでは設定方法について記載します。 ※Cloudflare Pagesに限らず、Cloudflareの全サービスで有効な手順です 現状の確認 JamStackサイトの任意のページにアクセスし、ブラウザの開発者ツールでレスポンスヘッダを確認します。 このとき、以下の様にCf-Cache-StatusにDYNAMICが設定されていたり、そもそもCf-Cache-Statusが存在しない場合はエッジキャッシュが有効になっておらず、オリジンサーバーがレスポンスを返却しています。 更新頻度が少ないブログサイト等では、積極的にキャッシュを利用
![[Cloudflare Pages]Cache Rulesを設定してwebサイトを高速化する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0ca1806c4be75695b99dd61c12014a1cd91cd43/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rJR9sc6C--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCloudflare%252520Pages%25255DCache%252520Rules%2525E3%252582%252592%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%252597%2525E3%252581%2525A6web%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592%2525E9%2525AB%252598%2525E9%252580%25259F%2525E5%25258C%252596%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aebifran%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE1NmU1ZGY5M2IuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
※この記事は以前ちょっと株式会社 社員ブログで公開していたものです こんにちわ、フロントエンドエンジニアのしまむーです！ Jamstack構成のサイトを構築していると動的に近い機能を実装したい場合というのが出てくるかと思います。 今回はGoogle Analytics Reporting APIから取得してきたデータを使ってブログ記事の閲覧数ランキングを作成したいと思います。 他のAPIへの利用にも応用できると思いますので、ぜひこちらを参考に色んな機能の実装を行なってください。 構成 CMSなどから取得してきたデータなどを元に比較的簡単に静的コンテンツの生成をしてくれるReactベースのフレームワークです。 GatsbyにはmicroCMSさんがデータ取得してくるためのプラグインを用意してくれているのでそちらを使ってデータの取得を行います。 Google Analytics Reporti
静的サイトジェネレーターが切り拓くモダンなWeb開発の世界 Webサイト開発の新たなトレンドとして注目を集めている「Jamstack」と「静的サイトジェネレーター」について詳しく解説します。従来のWebサイト開発とは一線を画す、革新的なアプローチであるJamstack。その中核を担う静的サイトジェネレーターは、高速性、安全性、スケーラビリティといった数多くの利点を備えており、あらゆる規模や用途のWebサイト構築に最適です。本記事では、Jamstackの基本概念や静的サイトジェネレーターの特徴から、実際の活用方法、具体的な事例まで、静的サイトジェネレーターを使いこなすために必要な知識を幅広く取り上げます。 Webサイト開発の未来を見据えたJamstackと静的サイトジェネレーター。その可能性と魅力を、ぜひこの記事で体感してください。 JamstackとWebサイト開発における静的サイトジェネ
Theme 第 137 回のテーマは 2023 年を振り返る Yearly Ecosystem です。 Show Note 今年のキーワード Jxck Rome to Biome RSC Next App Router React - Next のごちゃごちゃ感 Hono + JSX CSS in JS -> Modules Rust 化 Sakito Rome と Biome AI UI ツール周りの進化 Figma とか AI とか Storybook 連携とか Storybook コピペで利用できる UI ライブラリが増えそう Hiroppy RSC, Server Actions toolchain の変化 bundler Bun rspack turbopack vite (esbuild, rollup + rolldown) linter, fmt oxlint biome
2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』（単著：毎日コミュニケーションズ、2007年）など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。
はじめに Next.js + WordPress API で Jamstack を構築してみようかと思います。 便利なヘッドレスCMSはたくさんありますが、プランによってはお金がかかることが多いので。 WordPressのAPI化 まずはWordPressのAPI化です。 WordPressはデフォルトでも特定のURLを叩くことでJSON形式で値を取得することはできるかと思いますが、それだと不要なデータが多くあったりするためfunctions.phpに独自で実装しました。 以下、手順になります。 ①空のテーマを作る wp-content/themes/ 上記ののディレクトリ配下にテーマ用の適当なディレクトリを作成し3つの空のファイルを格納します。 functions.phpindex.php（今回は触らない）style.css（今回は触らない） ②functions.phpに記事取得の処理
達人出版会
要点整理から攻略する『AWS認定 データ分析-専門知識』 NRIネットコム株式会社, 佐々木拓郎, 喜早彬, 小西秀和, 望月拓矢, 和田将利 一歩目からの ブロックチェーンとWeb3サービス入門 松村 雄太 ChatGPT 使いこなし＆活用術 布留川 英一 デザイナーのための心理学 Joe Leech(著), UX DAYS TOKYO(監訳), 菊池 聡, 水野 直(訳) カラー・アクセシビリティ Geri Coady(著), UX DAYS TOKYO(監訳), 菊池 聡, 五十嵐 佳奈(訳) ［令和6年度］基本情報技術者 超効率の教科書＋よく出る問題集 五十嵐 順子 徹底攻略 データベーススペシャリスト教科書 令和6年度 株式会社わくわくスタディワールド 瀬戸美月 徹底攻略AWS認定SysOpsアドミニストレーター - アソシエイト教科書＆問題集［SOA-C02］対応 鮒田 文平,
ランキング参加中テクノロジー Reactで作成したアプリをCloudflare Pagesを使ってデプロイしてみました。 Cloudflare Pages自体は初めて利用するため、色々触ったり調べてみて初期段階で設定した方が良いと感じた設定があったので記事に書きたいと思います。 まず始めにCloudflare Pagesとは、何でしょうか？ Cloudflare Pagesとは pages.cloudflare.com 公式にはJAMStackプラットフォームと書かれてあります。 NetlifyやVercelと同じようなサービスで、Githubと連携することでフロントエンドの資材を簡単にビルド＆デプロイすることができるホスティングサービスです。 設定がとても簡単でGithubと連携することでGithub Actionsが自動で設定され指定したブランチにプッシュするだけでCloudflare
Vue.js + WordPressでヘッドレスCMSを作る #4 | CBC | Webデザインやプログラミングの基礎学習
#1 vue.js + WordPressでヘッドレスCMSを作る まえおき ヘッドレスCMSについて WordPres（以下WP）は、それだけでWebサイトが作成できる素晴らしいCMSです。 データを保存するバックエンド（サーバサイド）も、画面に表示するフロント（クライアントサイド）もPHP言語を使って作成できます。 WPで使うPHP言語は、記事やページを登録することに関しては申し分のない機能をもっている反面、 表示はブラウザのみに限られおり、通常スマホアプリなどでは表示できません。 また、ページ遷移もいちいちページ全体を再度読み込むためにデータ通信量が増え、速度も遅くなりがちです。 そのあたりの弱点を解消するための新しい技術として、ヘッドレスCMSという考え方ができました。 Headlessヘッドレス CMS（Head=頭、less=すくない）とは、表示部分ヘッドの機能が無いCMSのこ
Vue Fes Japan 2023の登壇資料です。
この記事は？ フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。 このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。 (なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。) 今後も使っていくもの ライブラリ React 2023年時点である程度以上複雑なフロントエンドをコンポーネント指向+型安全に開発する上でベターな選択肢だと思います。 コンポーネント=JSX≒JSのため、通常のJS開発における
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁でjQueryが何をしているのか - laiso
Python製静的サイトジェネレーターSphinxでWebサイトを構築して公開 | gihyo.jp
第10回:Cloudflareの紹介と運用のポイント - CADDi Tech Blog
N予備校の規約類を microCMS で管理して、運用を改善した取り組み - ドワンゴ教育サービス開発者ブログ
Tailwind CSSを使う時の疑問と解決方法
Remix vs Next.js - React Japan
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
Webフロントエンドの進化とJamstackアーキテクチャの変遷
Cloudflare Pagesにおける権限昇格と任意ページの改竄
コンポーザブルコマースは変化の早い時代に対応するECサイト
Vue Fes Japan 2023 を開催しました！｜kazupon
Remote Synthesis | Is Jamstack Officially Finished?
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
画像を別の形式に変換するクソアプリ - Qiita
行く2023年、来る2024年 | 中編 HTML/CSSの新しい機能とこれからの実装
pwa-night-vol60-slide.md
The State of Web Frameworks on Deno
デベロッパー向けヘッドレスCMS、Sanityを始めよう
高機能ヘッドレスCMS「Storyblok」の特徴 - Qiita
私なりのvibesのあげ方｜Kazuko Muro
JamstackでのCDNの選定方法からサービス比較までご紹介！｜JamJam(ジャムジャム)｜Jamstack特化メディア
[Cloudflare Pages]Cache Rulesを設定してwebサイトを高速化する
microCMS + Gatsbyで 記事のPV数ランキング を作成する
Jamstackの採用：静的サイトジェネレーターの利点
ep137 Yearly Ecosystem 2023 | mozaic.fm
行く2023年、来る2024年 | 前編 フレームワークとホスティングサービスの接近
WordPress で Jamstack｜株式会社Romantist
Cloudflare Pagesを使った際に最初にやった方が良い設定 - Sassyブログ
Nuxt 3でJamstackテンプレートを作るときの考え方
2023年のmanatenのフロントエンド - MANA-DOT