タグ

ReactとGatsbyに関するjsstudyのブックマーク (8)

  • GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM

    意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress & Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScriptReact)なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScriptReact)をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、

    GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM
    jsstudy
    jsstudy 2020/04/25
    世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript(React)なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。
  • 静的サイトジェネレーター Gatsby - Qiita

    静的サイトジェネレーターとは? Static Site Generator(SSG) WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり

    静的サイトジェネレーター Gatsby - Qiita
  • JSフレームワーク事情2020年始め|erukiti

    この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日ではVueReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは

    JSフレームワーク事情2020年始め|erukiti
    jsstudy
    jsstudy 2020/01/04
    シェアを参考にしつつも、最終的には実際に使ってみて一番使いやすいと思ったツールを採用すべき。ReactはTypeScriptの他に、Facebookが開発しているReasonMLというAltJSとも相性が良い? https://reasonml.github.io/reason-react/
  • Gatsby - daily-dev.net

    jsstudy
    jsstudy 2019/11/08
    NetlifyCMSで、記事の作成を行い、Gatsbyで、ビルド中にNetlifyCMSからデータを取得して、静的ファイルに変換します。 NetlifyとGatsbyを組み合わせれば、特定のブランチにpushすれば、自動でビルドして、サイトを更新できます。
  • Gatsbyプラグイン45選 - Qiita

    なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 記事はブログの転記です。Qiitaで使えない機能(コードブロックの指定行強調表示など)の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む

    Gatsbyプラグイン45選 - Qiita
  • GatsbyJSをGAEにデプロイする - Memento memo.

    GatsbyJS をGoogle App Engine にデプロイする方法の備忘です。 app.yaml と cloudbuild.yaml を設定してCloud Buildのコマンドを叩くことでデプロイします。 Google App Engine の設定 まずは app.yaml の設定です。 基は Hosting a static website on Google App Engine  |  App Engine standard environment for PHP  |  Google Cloud を参考にします。 ルーティングの都合上、拡張子を指定しない場合のリクエストは index.html にマッピングさせます。 runtime: php55 api_version: 1 handlers: # file with extensions (e.g. .html) -

    GatsbyJSをGAEにデプロイする - Memento memo.
  • The Best React-Based Framework | Gatsby

    Netlify is offering all Gatsby Cloud customers easy migration paths to Netlify to unite two industry-leading platforms into one.

    The Best React-Based Framework | Gatsby
    jsstudy
    jsstudy 2019/10/19
    CLIを使うのか。面倒くさいなー
  • Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発

    Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
    jsstudy
    jsstudy 2019/07/28
    "たとえば、Reactの公式サイトはGatsbyを使用したサイトです https://reactjs.org/ GatsbyはSSR的な静的HTML生成に加えて、それと連動する通常のReactアプリも生成します。" →データの入力や編集はWordPressを利用可能=便利かも?
  • 1