初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ | フロントエンドエンジニア向けテックブログ

2023/07/05 8 users コムテブログ JavaScript 初心者 tl;dr 概念

TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ ... 続きを読む

【インタビュー】”静と動”を分離して高速&セキュアなサイト構築を - ピクセルグリッド 高津戸テクニカルディレクターに聞くJamstackの魅力

2022/10/21 6 users CDN ピクセルグリッド api経由 セキュリティ ベース

静的なコンテンツはCDNで配信し、動的なコンテンツはJavaScriptをベースにAPI経由で表示させることで、高いパフォーマンスとセキュリティ、そして低コストな開発を実現するという話題のサイト構築技術Jamstackについて、「当社はJamstackの会社」と公言するピクセルグリッド テクニカルディレクター 高津戸壮氏に、TechF... 続きを読む

9割を自宅で完結？Jamstack を学んで開発環境をイチから作ってみた話 | IIJ Engineers Blog

2022/09/28 103 users 適材適所 イラストレーター イチ 完結 結論

イラストレーターの妻が「ポートフォリオサイト欲しい」と言い始めたので、面白そうだと思い開発を開始しました。 静的サイトなら Jamstack ってのがイイらしいと最近よく聞くものの、何かはわからないので勉強してみて、巷の Jamstack 構築環境をできる限り自分の家の中に作ってみます。 結論から言うと適材適所なので... 続きを読む

Jamstack構成（microCMS × Gatsby × Netlify）で自社サイトをフルリニューアルした話 - NRIネットコムBlog

2021/12/22 7 users microCMS NRIネットコム Jamstack構成

本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。 🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰 はじめまして、フロントエンドエンジニアの牧と申します。 今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。 リニューアルの概要について Jamsta... 続きを読む

今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流

2021/11/04 28 users ヘッドレスCMS マルチデバイス CMS 概念 従来

CMS（コンテンツ・マネジメント・システム）とは、ブログやWebサイトなどで活用されているコンテンツを管理するための仕組みです。代表的なものとしてWordPressやMovable Typeが挙げられ、主にWebサイト制作に使用されています。本記事では従来のCMSとは異なる概念であるヘッドレスCMSについて利用シーンとともに紹介し... 続きを読む

Jamstackで失敗した3つのこと - PWA Night Conference 2021 - Speaker Deck

2021/06/26 25 users Speaker Deck セッション コツ メリット 特徴

JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。 続きを読む

Jamstackを検討する - ゆーすけべー日記

2021/06/25 141 users 紆余 弱み ゆーすけべー日記 既存 結論

Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや？ Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところが... 続きを読む

Hotwireの感想 - laiso

2021/01/23 27 users laiso Hotwire ウェブアプリケーション 思想 基盤

Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 役割としてはJamstackとかReactのlearn once, write anywhereなどに似ている アプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想 ... 続きを読む

Micro Frontends Architecture Patterns

2020/12/20 579 users アーキテクチャパターン 本書 リズ やりとり ソフトウェア

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような... 続きを読む

Gatsby・Wordpress・Netlifyで開発したときの躓きと解決方法 - カミナシ開発者ブログ

2020/12/01 16 users カミナシ開発者ブログ 解決方法 反響 エンジニア リニューアル

こんにちは、株式会社カミナシのエンジニア @tomiです。 前回、「サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル」という記事を書き、たくさんの反響をいただきました。ありがとうございます。 kaminashi-developer.hatenablog.jp 今回は、Gatsby・Wordpress・Netlifyで開発したときの躓き... 続きを読む

microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル | Developers.IO

2020/11/06 160 users Markup GATSBY microCMS チュートリアル

What is Jamstack? ここ数年でよく聞くようになったワード。 Jamstackとはウェブサイトを構築および運用するための、技術の組み合わせです。 JavaScript・API・事前にレンダリングされたMarkupの組み合わせでJamStackとのこと。 (以前はJAMStacといってたけど、最近はJamstackだったりする) Jamstackは、 「ウェブをより... 続きを読む

Next.js の状態管理 2020

2020/10/30 184 users Next.js 状態管理 SSG 花形 SSR

Next.js といえば、SSG（JAMstack）が最近は特に花形ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が関心ごとの中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなく、getServerSidePropsを使用することが推奨されています。getStaticPropsやgetServerSidePropsを利用する... 続きを読む

Jamstackとは？ | 株式会社ピクセルグリッド

2020/09/30 18 users セキュリ CDN アーキテクチャ HTML Webサーバー

事前にデータを埋め込んだ静的なHTMLをベースに、JavaScriptを使いAPIを通じて動的なコンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。 静的なHTMLとJavaScriptをベースにすることで、CDNで配信でき、Webサーバーの管理や運用をなくせます。 大量のアクセスに強く、高速に配信でき、セキュリ... 続きを読む

数日前に大幅リニューアルされた Next.js のチュートリアルをやれば、２０２０年のフロントエンドを体感できる - Qiita

2020/04/23 389 users Qiita チュートリアル 関数 アプリケーション HTML

この記事について 数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバ... 続きを読む

Gatsby と Netlify で Jamstack 構成のブログサイトを作ろう - to-R Media

2020/01/31 5 users GATSBY Netlify ブログサイト 一体 web

Jamstack は Web 開発のアーキテクチャです。この記事では Jamstack についてご紹介し、Jamstack 構成のシンプルなブログサイトを作ります。 Jamstack とは Jamstack は Netlify の 創業者 Matt Biilmann 氏が名付けたアーキテクチャです。Jamstack とは一体なんでしょうか。Jamstack の公式サイト jamstack.org では、J... 続きを読む

Nuxt + Contentful + Firebase Hosting のJAMstackを使ったサービス開発 | GiFT（ギフト）株式会社

2019/12/16 14 users Gift Nuxt Contentful コーポレートサイト

Nuxt + Contentful + Firebase Hosting のJAMstackを使ったサービス開発 今年はContentful芸のブログばかり書いていたら、JAMstackおじさん（通称JAMおじさん）になってしまいました。 今回は実際にリリースしたサービスでどのように実装したかを書いてみたいと思います。 今年はコーポレートサイトやオウンドメディアの... 続きを読む

JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/12/10 13 users アーキテクチャ APIs エンジニアHub Markup 構成

JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ... 続きを読む

クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか | コリス

2019/11/05 60 users クライアントサイド コリス 静的サイトジェネレーター 元ザ

静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMstack」です。JAMstackとは何なのか、なぜJAMstackが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サ... 続きを読む

Netlify と PWA で JAMstack を目指す - kondoumh のブログ

2019/05/27 13 users Netlify CDN Pwa Git ホスティング

静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。 PWA を作る方法は色々とありますが Vue CLI で簡単にプロジェクト生成できるのでちょっと試してみました。 プロジェクト... 続きを読む

JAMstack | JavaScript, APIs, and Markup

2017/02/02 68 users APIs JavaScript of JavaScript

JAMstack : noun \’jam-stak’\ The ideal way of building websites and apps that are fast, secure and simple to work with through the utilization of JavaScript, APIs, and Markup. With servers abstracted ... 続きを読む

エレキギターに装着するiPhone連携アンプ「JamStack」--内蔵スピーカで路上ライブに - CNET Japan

2016/11/30 10 users エレキギター エレキベース アコースティックギター 一苦労

ロックなどの音楽に欠かせないエレキギターだが、演奏するには手間がかかる。アコースティックギターよりはるかに重くて持ち運びが面倒なうえ、音を出すのにアンプや各種エフェクタ、シールドケーブル、もちろん電源などが必要になり、路上ライブをしようとすると一苦労だ。 そこで、エレキギターやエレキベースに取り付け可能な、スマートフォンと連携して多彩な音の出せるモバイルアンプ「 JamStack 」を紹介しよう。... 続きを読む