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の多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
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名 一般参加者
クソアプリ Advent Calendar 2023 1日目の記事です。 アドベントカレンダーの記事投稿を終わらせた俺にかわせない攻撃は無い 前置き おはようございます。DE-TEIUです。 冬の季語でおなじみのクソアプリアドベントカレンダーの時間です。 過去にアドベントカレンダー用に作ったクソアプリ p5.jsで作ったダメなソリティア 絶対に作業できない作業用BGMサイト 社会に一石を投じるクソアプリ開発 鼻毛が生えるカメラアプリ 映画館のスクリーンでYouTubeが見られるクソアプリ 電卓の成長を体験できるクソアプリ JamstackだけどJamstackじゃないクソアプリ 画像ファイルを別の形式に変換するアプリって色々あるじゃないですか。 何か適当な画像ファイルを渡すと、以下の形式に変換して出力する、みたいなやつ。 jpg png gif webp tif etc... ちょっと軽く
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
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 すごく有名なや
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の開発技術が学べる本
Cloudflare Pagesにおける権限昇格と任意ページの改竄
コンポーザブルコマースは変化の早い時代に対応するECサイト
Vue Fes Japan 2023 を開催しました！｜kazupon
画像を別の形式に変換するクソアプリ - Qiita
行く2023年、来る2024年 | 中編 HTML/CSSの新しい機能とこれからの実装
pwa-night-vol60-slide.md
The State of Web Frameworks on Deno
デベロッパー向けヘッドレスCMS、Sanityを始めよう