はい よろしくお願いしますすいません 日本語でしゃべっていきます徐々に自己紹介ですけれども 可能性といいます基本的には公勢で仕事をしていてワードプレイスとリアットとかですねタイプスクリップとか そういった心の開発メインってやっています会社の方ではシフターというですねワードプレイスの性的化するモスティングをやっていたりですねしています今日の話ですけれどもジャムスタックについてまずおさらいしていきつつそれを何で使うか ワードプレイスの案件で使うかどういうふうに作るのか それの良いところ 悪いところその辺りの話をして締めていくような形にしますということで まずジャムスタックについてですねジャムスタックというワードを初めて聞いたでこれぐらいしちゃいますかこの範囲も倍倍使ってますという方はこれぐらいしちゃいますかお 少なかっこよかったなんかバリバリやってますという人がかっかりだとちょっと話づらいなようだったんですけれどもジャムスタックですねいわゆるウェブサイト ウェブサービス作る上でのアーキテクチャーも一つですこれジャムスタック ジャムスタックオルグサイトに書かれているものなんですけれども日本コリジェルト用は 高速で安全なサイトを作成するアーキテクチャーですね他のアーキテクチャーだとランプとかあとはビーンスタックとか そういったものがあったと思うんですけれどもその流れで出てきたものの一つだというドライブからはよくいいかなと思いますジャムスタックの構成要素ですねジャムが何かという話ですねまず一番初めに出てくるのが ジャバスクリプトです次がAPIでマークアップとこれですね ジャバスクリプトで作られる感じが自慢できますこれの頭をそれぞれ取るとジャバスクリプトのJAAPIのA マークアップのMでこの3つを使ったもの ジャムを使ったスタックだからジャムスタック言われていますジャムスタックじゃないケースというのもこのジャムスタックオルグの中で紹介されていてさっきのやつは英語なんですけど日本語にすると まず初めて出てくるのがワードプレスやったり ズルーパルのようなサーバー側でHTMLの生成処理を 買っているものですねワードプレス ズルーパル以外のCMSじゃなくてもRubyとかですね PHPとか モードJSとかそういったもので サーバー側で作られて動作するものがある場合にもこれはジャムスタックでないことができますあとは Reactとか AngularViewとかでシングルページアプリケーションとして作られている用サイトって 見も増えてきてると思うんですけれどもその中でもサーバーサイトの メンタリング処理が走っていると思うんですねアンデラユリバーサルとか あとメクストJSとかナクストとかもサーバーガーも エクスプレスを使った人があると思うんですけれどもそういったものを使ってるくらいにはジャムスタックではない ということができますっていうふうな反省とは言ったんですけどつまりどういうことかっていうことです 話ですよねすごく雑に言うと今使える技術を使ってウェブサイト こういうウェブサイトを作りましょうことですねこのウェブサイトでええことにしましょう って話ではなくてこれと同じインクのような形で ウェブサイトを作ろうということですというのがジャムスタックっていうのは 事前にHTMLを作っちゃうんですねで 作られたドットHTMLのパイルにお客さんは見にくるだからドットHTMLを使って入ったから これだけいうことですねで ワードプレスで置き換えていくとワードプレスのテーマは ジャムスタックのMマーカップですねだからワードプレスのテーマで 見た目を提出するで その中に対して ワードプレスの関数でマイエスキュエルのデータベースから コンテンツを取ってきてはめ込んでいくこのワードプレス関数 マイエスキュエルとしてこの処理の部分がAPIに置き換わるイメージですで なので ワードプレスのテーマがデータベースから データ取ってきてHTMLを作りますそれがジャムスタックの場合はAPIのAPIからもしくは ローカルのバックダウンからのパイルからデータを取ってきて それをマーカップの中にはめ込んでHTMLを作って それを配信する これがジャムスタックですなので 先生済みのHTML画像 あと ジャバスクリプト シエセスですねそういったものだけが サーバーのやるメージとなりますだからさっき 公開に使うウェブサーバーは軸端な話が 今は何 地を引いているとかですねRU ピーエッジキットが動かないようなサーバーでも問題ない 構成になりますこれの何がいいかっていうと安倍秘書のサイトって 経験的に笑えるようになりますよねなんで早いのか なんで感情なのかというあれを 何点って話じゃなくてじゃあ実際に自分たちの案件で やってくれはどうするのかというそこを目指していく話です何点使うのか ちょっとごめんなさい マジなんで ジャムスタックを使っていかないといけないのかという話なんですけれども4つでざっくりまとめると まず早くなります強く 障害とかに強くなりますあとは セキュリティの面でも他のCMSで作られたものに比較すると硬くなりますし 構築する面でもかなり楽なブロックが出てきますどういうことかというとまず ジャムスタックで生成済みの1Tメロ公開サーバーにおいてそれを配信するっていうだけなのでサーバー側ですることが ほとんどないんですねワードプレスのウェブサイトだったりするとアクセスが集中するとデータベースの負荷が上がってそれでサイトが落ちるとかPHPの重たい処理が走ってそれでサイトの速度が落ちるとかそういった話ってこういうカンパレーションを 聞くと思うんですけれどもそもそもサーバー側でPHPでやったり前スケールを動かしてないのでその分それは その分速くなりますという意味ですで 何かつ データベースとかPHPとかにね そういったものを使わず使ってHTメロを作るのではなくて出来上がってるものを出す ただ置いてるだけCDN度とかをもちろん使うこともできますのでそういうことをすれば自分が持っているサーバーサーバーがやらなきゃいけない 仕事の領点もすごく少なくなりますなので負荷も少なくなりますしあとはですねデータの取得元がワードプレスのテーマだったりプラグネとかするといろんな場所から データベースなんですとかあると思うんですけれどもユロットエンドから 独定のAPI経由でアクセスするという形で一本化することができるのでAPIへの攻撃に対して対策しましょうというところをだけに集中することが出来ますなので そういったところで普通のワードプレスサイトをちょっと比較すると比較的にセキュリティの面でも強くなって言われていますあとは開発の面ですねバグとかですね 表示の崩れとか起きた時に それがデータベースに由来するものなのかフロントのワークアップに由来するものなのかいろいろ切り分けとかしていかなきゃいけないと思うんですけれどもそういった時にウェブサイトを表示するサーバーHDLを置いてるサーバーとワードプレスが記事の管理 データベースAPIそこだけやってるのでフロントの問題などかそういったもん データベースもしくは入校のところの問題なのかというところにキーワードがサーバーレベルで出来ますのでそういったところで 管理の見を挙がしたときに楽になるというわけでどう作っていくかという話がところですねジャムスカップなサイトにする方法ワードプレスで軽く変わっているのにいくつかのセットがありますまずはじめにやらないといけないのはワードプレスをAPIサーバーとして準備するというところですねで APIサーバーとしてワードプレスを準備した後にジャムなので あとJとMがないところなのでジャバスクリプトの部分とマークアップの部分 それをワードプレスのテーマ検査の部分ですねそこを20センチであたり実装していくとで ただ実装するだけじゃなくてAPIのデータをインポードする必要もあるのでここでジャバスクリプトのマークアップとAPIを混じてジャムにするとした後にあとは運用のワークフローですねここもワードプレスを持って公開されている通常のものとかなり変わってくるのでここに関しても整備していく必要がなりしますそれぞれに確認していきますけれどもワードプレスをAPIサーバーだけで運用している運用したことがある方でちゃんとどれくらいますかだいたい皆さんやっぱテーマってフロント作られますよねその時には意識してなかったけれどもワードAPIサーバーだけでワードプレスやろうとする時ちょっと意識しなきゃいけないねおまえ気にしなくてよかったねだからそっちの方がいいですねここに来られている方でこれが重要だなと思うのがSEOの面ですね何かというとワードプレス側でもHTMLができちゃうんHTMLとURLができちゃうんですねそれはワードプレスはそういうシステムですからなのでワードAPIサーバーAPI.example.comでワードプレスのストラックが発生記述とあとはJAMSTACK側で交換したサイトで用意されているドメインドメインと言われるかも2つで同じ記述が配信されてしまう普通に使うとなのでそのまま今まで使ってるワードプレス同じような形でじゃあWAPIだけ使ってJAMSTACKをフロントにして交換せればいいと思ってやると勝負コンテンツになっちゃうんですねなので例えばAPIサーバーのワードプレスはログにしていないときに関してはAPIやったり画像であったりそういったフロント側でも必要とするようなURL以外はJAMSTACK側のURLに依頼力としてやるもしくは可能に軽とかノインデックスとかのメダタ号を設定してやるようなカスタマイルが必要になります個人はブログのほうでやっているのでこれ後でスライド交換するの後悔とか報道とかをそれで見てもらったらいいんですけども例えばEaseUserLoginというワードプレスの関数があるのでそれを使ってUserがLoginしているLoginしていないんですよLoginしていない場合はWP LoginWP AdminあとはWPコンテンツとかですねそういったところ記事の管理を使っていないんですよLoginの時にアクセスしなきゃいけないURL以外は全部サーマルチのリライデッドで公開版のサイトにリライデッドしてやるとこういうことをしてやるとやっぱり何回ちインデックされたりとかSNSでシェアする時にURL間違えてAPI付けたりとかやってもサーバーが出リライデッドしてくれるのでどうするリスクがいらせるかなと思いますあとはワードプレスAPIサーバーにあとしてワードプレス使う場合もう一つ意識しなきゃいけないのでというのがサーバークリアのところですねそもそもジャンスタンクでワードプレスやりたいという話になってる時早いとかもいろいろメリットがあったと思うんですけれども結構コンテンにあるのってこれなんですよねワードプレスのメンテナンスがちょっと今の会社の改善今個人の改善ではちょっとしんどいのででもワードプレスは使わないといけないじゃあプロントの開発だけでもうそこからの技術を使ってやりましょうという話になっていきたいとするのでAPIサーバーにしてたそうとなるんですけれども結局ワードプレスですねこのやり方にしてもワードプレス自体はあってそのワードプレスをコスティングするサーバーも存在するんですねなので普通のワードプレスのままだと更新作業がやっぱり残りますただもちろんAPIサーバーにしてだけに使ってるのでテーマは例えばテポルトのテーマにしておけばいいしておいてオートアップデートのクラグインとかデジドアップデートの人だけじゃないとか依存するクラグインの数をですねフロントに関係するものを全部ペースすることができるので管理科のクラグインの量はすごく増いますなのでそういった面で管理のコストは下がるんですけれどもそれでもワードプレスのコアのクレートであったり例えばアドバンストカスタムフィールドカスタムフィールド系のものであったりとして管理画面のカスタマイズ系にカードのクラグインは入ってますしそれの更新作業はやらないと当然攻撃されますなので例えばジャムスタックでワードプレス運用していきたいよっていう話になってきた場合はできるだけですねサーバー選定の場合の段階で自分で面帝しなくてすぐにはいわゆるフルムネージとホスティングっていうふうに言われているレッタルサーバーがですね国内から含めていくつか出てきているんですけれどもそういったサーバーを検討してもらう必要があるかと思いますフルムネージとってここで言ってるものとしては具体的にはワードプレスのフォアのバージョンアップレートとかですねプラグインのアップレートとかをホスティング側で自動でアップレートしてくれるようなものだと思ってくださいなので普通のワードプレスの政策案件だと気がついたらワードプレス勝手に最新場になってるのでそれはそれでちょっと今のワードプローカーにすると怖いかなと思われる方もいらっしゃると思いますけれどもただジャムスタックでされる場合はそもそもそこのリスクになる部分定能の表示が崩れるという部分がかなり出てきますのでそこよりもフロントの管理とフロントの管理に集中するためにワードプレス自体はできるだけ自分でメンテナンスしないようにできるサーバーを選んでいく方が良いかと思いますもちろん管理しなくていい部分カスタマイズ制となおいつも例えば管理の認証機能とそういったところやれやりましょうとなってたかもしれないですけれどもレンタルサーバーの要件によってはフラグインド・カスタマイズ制限がありますとそういったものもあります具体的に今のところ国内である点の名前聞いているものだと例えばワードプレス.comとかですねこれの量から使いますしWPAPIの提供していますなおかつワードプレスの.comの方で特にAPIの提供されていたりするのでこれらを使ってフロントへと構築することできますただワードプレス.comのサブドメインでクライタグログの公開制限が来たんですねあとはフラグインテーマちょっとカスタマイズサイトになったときに無料プランもしくは回のプランに関してはアルデート制限が設けられていますので要件によってはワードプレス.com向いてないかもしれないですし簡単にザムスタッター始めたいようでワードプレス面倒見たくないよねっていう方からするとワードプレス.comでとりあえずグログを始めてみるとかというところでもいいかなと思いますあとは自分の会社なんですけどシフタースのヒッキングもこちらもですねマネクルマネジドでやっていて逆ビートの連携とかですねそのあたりも公式で用意していますあとはJSでライブでローディングしたいものとかもあるんですけどそういった場合も新規、新着の順権に関しては常に取れるようになっていますのでそういったところって見合わせてやっていくべきとなっております一応見る方はこれもギッターもワークショップの前にフルで公開していますのでまた後で見てもらえればと思いますが今のところをザムスタッターのワードプレスでできるだけワードプレスのメンテナンスをやらずに試してみたいよっていう方はワードプレスとかのおかしどちらかを使われると比較にいいかなと思いますそれ以外にもいろんなホステンがありますので上の階のブースとか回られてこういったように使えますか適当に回られるといろんな事件があるかなと思いますのでそういったところもワードプレスを楽しみにもらえるといいかなと思いますで次ですねワードプレスAPSアバーを取っていきましたけどじゃあ次フロントインブ作りましょうという話に行くんですがスタッティックサイトジェネレーとザムスタックでこのザマスクリービットを使ってもらうかく構築する部分に関してはよく言われるのはスタッティックサイトジェネレーかというカレゴリーのものが選定されますこのスタッティックジェン.comというサイトに行ってもらうと割という意味のなど急ごとの地球にはですねそういったオープンソースのものからワードプレスの方で使えるネクストジェースとかですねそういったものを含めていろんなものを紹介されてますので今回のセッションで紹介したものが馴染まないという方はスタッティックジェネレーこのサイトでいろんなものを見てもらうといいかなと思いますザマスクリッドでのフロント実装なんですが今のところを缶割り付けあったりこういうところで話を聞いて自分の範囲の中で見る限りではリアクトもしくはビュー・ジェースかもちろんこっちいられることがすごく多いですリアクトであればネクストジェースというものかこの2つのライブラリーを使ってザマスクリッドでワードプレイスもしかもそれ以外のCMSとか使ってフロントを作られているなんか観点が多いですしビューの場合はナクストジェースというものとあとグリッドさんというものですねこの辺りがよく伸びてますこれに関してですね何がいいかという話に関してしもちもち人によるというところでこの選定基準に関してはコードの書き方ですね例単を取得の仕方であるかとか提供している関数のメソッド、APIとかですねたくさんいろいろライブラリー作られたです手数確認で変わってくるところがありますのでそこをもう本当に好き好き嫌いとか自分のチームに合うかどうかも見てもらっていると思いますしあとはワードプレイスが提供的にある絵ですけど何かんだ時にこういったカンファレンスで聞けるとかちょっとSNSで質問できるとかそういった人たちがどのライブラリーでどれぐらいいるかとかそういったところを中心に見てもらうとそれすなくやれるかなと思いますでこのスライドで出てこないメジャーライブラリーアンユーラーってものがあると思うんですけども今のところ聞く限りではアンユーラーに関してはスカティックサイトジェネレーターとしての用途を提供する予定はあまりない様子でサーバーサイトのレンタリングもしくはPWAですねシングルページアプリペーションとしてレンタリングしてオクラインでプラッシュして押すことがするようなそういった方面で使われる用途が多い様子なのでそれがジャムスタックじゃないから使えないというわけではないんですけれどもジャバスクリプトでフロントエンド構築するワードプレスAPSアワーで使いましょうとなったときにアンユーラーを使うと事前に1つ目の生成して配信するというやり方は今のところあまりメジャーじゃないやり方になると思ってもらうときからのところできますあとはリアクトがですねグーテンベルグで使われている技術なのでリアクトをこれから学ぼうという方であればリアクトを作業すると学習コストはいいかもしれないですけれどもただビューのほうがコミュニティとしてですね結構活用が頻繁になったりもしますので今のところこの2つを比較しながら12月はアドベントカレンダーと変わると思うのでそれでも読んだり書いたりしながらやっていくというかと思います結合のところですねちょっとこれですねここまでで気になることが結合のところとかもいわゆるまかかりとかありますで今までのところでですねABAサーバーができましたクロントヘンド何使うのが決まりましたあったらあとはスクリントに作ったマークアップにABAのデータを流し込むという感じになりましたでここでマークアッププレイスのABAのデータをどういう形にマークアップに流し込んでくるかというところは結構ライブラに乗って正確に出てきますよく出てくるライブラの中で有名な方はブリートサムとギャツビーなんですけどもこれに関してはグラフ9Lという新しいクリエイルケンボですねこれを使ってインフォードするというやり方になりますでどういうことかというとブリートサムとかギャツビーというのはフレームワークなんですけどもそのフレームワークがHTMLをビルドする時に一旦ワードプレスのAPIから記事データをレモリーかローカルかちょっとそこはさらかではないんですけどもビルドの中に一旦ライブとポジションするでここにしたデータをグラフ9Lのスキーマーを用いてマークアップの中でナナシコーデーしてみるかするというやり方をしますなのでワードプレスが提供しているのはレストAPIだからいらないように見えないですけどもワードプレスのAPIからデータを取ってくるのはフレームワークの仕事でフレームワークの中にあるデータをマークアップに落とし方がグラフ9Lの仕事というふうに分かれていますというところでちょっとここで学習コストが出てくるんですけどもただグラフ9Lですね触られる後でちょっとだけサンプルも出てくるんですけどもレストAPIよりも人間のデータですね比較的取りやすくなってるのであとあれだけあとですね複数のデータソースワードプレスと以外のCSVとかですねマークダウンとかあとは他にもコンテンツやっぱりデューバルやったりCMSいろいろあると思うんですけどもそういったところのデータも一緒にトップできてグラフ9Lまとめてインポートするといけない方ができるのでマッシュアップですそこがすごくやりやすくなりますギャツビーの場合なんですがこれがギャツビーのサイトに出ているイメージですね上にデータソースとかありますでビジョドウというところにギャツビーがいてデプロイというところこれがですねデブコストとかさっき散らくれたジオシキンズとかあとネットリーバー、AWLサンフォリーがGitHubページとかですねここにないんだとパイヤベースのコスティングとかいろいろあると思うんですけどもベースサーバーがありますでデータギャツビーがデータソースいろいろ複数1つから複数からですね取ることができるんですねでビルドの時にコンフィグの中で前提したCMSもしくはマークダウンただのパイヤルとか普通のJSON CSUタイプとかですねこれを全部この中に取り込むで取り込まれた状態で1個のデータベースの中にまとめられた形になるのであとはそれをグラフQLもスキーマーを使うクレイリー言語を使って取ってくるというのがやり方になりますでそれでビルドされたHTMLGitHubのビルドするとHTMLファイルが全部ウェブページの大量に生成されますのでそのファイルをCIを使われるのが一般的CI-CGサービス使われるのが一般的ですけれども一番わかりやすいやり方でインドローカルでNPMランビルドというコマンドを使ってビルドを押した後に出来上がったファイルをウェブサーバーにSFTPとかでアップロードするとでアップロードするともうHTMLファイルが全てウェブページ分ですね全部作られているのでそれだけでウェブサイトが更新完了しましたという感じになるというところですGatsubiの場合ウェブサイトの設定やったりデータの取得の設定がされます今のところをメジャーなプラグインGatsubiの場合もいろんなプラグインシステムがあってそれでマークダウンでやったりCSVでやったりをWordpressでやったりをGatsubiの中のデータベースの今年頃にことができるんですけれどもWordpressのデータを取り込む場合はGatsubiソースWordpressというNPMのライブラリーが今のところメジャーですでこのライブラリーが結構高機能でWordpressのドメインとHDPかHDPベースかプロトコールの指定とかですねそういったところあとベーシック認証とかオーストがですねそういったところも設定できるんですがそれだけじゃなくてWordpressの.comの場合APIの種類がフェールというところがあるんですけれどもそこに対してもサポートするためにコスティングWPコモというパラメータもついていてこれをトゥルーにするとベース言われて指定したWordpressもタイプは.comにあるものだからそれによるデータを取得しますということができますしUCDFというのでACFに対応するものだったりそういったものもありますでGatsbyもですねWordpressというのは非常にたくさんのプラグインが用意されていてGoogle Analyticsをリアクトで書くときの簡単にするようなアンパワーのものだったりとかですねいろいろ用意されてますのでいつものところ一番簡単に探す方法としてはちなみたもしかGoogleでGatsby Spaceプラグインとかで検索されるといろんなプラグインですね日本語で紹介されている記事がありますのでそちらを見ていただくとWordpressデータを取り込んだ後にウェブサイトもしてこういう機能を持たせないんだけどどうしたらいいのかというところですねいろいろな気持ちに答えが出ていると思いますで取得するときですねWordpressテーマの場合はWPWPクエリカでデータ取って来たりとかしていると思うんですがGatsbyの場合ですねこういうクエリを書きますグラフQLという中にこのAllWordpressPostもしくはシングルWordpressPostとかいろいろクエリの名前があるんですがそれに関してはプラグイン側がですねドキュメントの中で全記事取得したいのになればこの名前を使ってください個別ページ取得したい場合はこの名前を使ってくださいというものが用意されてますのでそこはそれを見てください変数でPostの特定の記事を取得したい場合はこのAllWordpressPostのところに変数でPostのIDをつけてやるとすると取得的なIDを取得することもできますしグラフQLの特性としてここですねタイトルXMAPとスラッグとこの3つだけ書いているんですけれどもSQLの場合って取得するとそのレコードのデータ全部書いてくるないですかいややり方によってはしぼれるとやり方によってしぼれますねレストしてしまったSQLじゃなくてレストNPIですねレストNPIでデータ取ってきた場合はAPIとIDでリクエッケンと投げるとそのIDに対応するデータが全部そのまま書いてくるんですがグラフQLでリクエスト出した場合はこのクエリであれはタイトルXMAPとスラッグこの3つだけが書いてくると欲しいもの以外は書いてこないというやり方ができますあとはここから先はほぼどちらかとはグラフQLの話になるんですけれどもクエリじゃなくてサブスクライブサブスクリプションかなというものにするとウェブソケットでライブで通信するようなものもあったりするんですがこれはGatsbyというよりはリアクトでグラフQLを使うというお話になってくるので興味ある方はグラフQLの項目を見てもらうと結構チャットアプリとかライブ更新性ライブ性があるところで使われていることが多いのでそこも新しい技術になるかと思いますグラフQLでデータ取ってきた後にこれだとデータ取ってきただけなので最後にワードプレスのほうもザクエリってO1で回すとした後にマークアップで落とし込む必要があると思うんですけれどもGatsbyの場合のマークアップがこんな感じですねグーテンペルグのセッションに行かれた方にリタヨナのリタヨナだと思いますけれどもGatsbyはリアクトそのままですでザバスクリプトでこの場合変数の中のデータというところにさっきクエリしたやつと同じ名前のオブジェクトが入ってきますのでそれをループで取ってきてザバスクリプトの形でリアクトの形でマークアップに落とし込むいうふうにするとこれでウェブサイトのフロントエンドが落ちきできるというふうになりますここですねちょっとじゃやすま組み込んだ話になってくるとGatsbyのタイプスクリプトプラグインというものも提供されているのでタイプスクリプトを使うことでこのデータの変数が結構分かりにくいというつらみはあるにはあるんですけどもタイプスクリプトのプラグインを使ってタイプスクリプトで実装するようにするとこの辺りはVSコードだったらやっぱりウェブストームであったりそういったところのIDが型のヒントを出して入力物感を出してくれますのでかなり簡単に作れるようになってきます最後ですね運用のワークフローのところなんですがザブスクリプトやってると更新ウェブサイト記事の更新の時にちょっと色までと違うワークフローになってると思うのかお客さんまであったり社内であったりで認識を忘れていないところがあるんですね何かというとワードプレス上で何か更新したからといってサイトに反映されないんですねというのがワードプレスAPSサーバーとしてあるんですけども次ギャツビークリプトさんとかですねビルドしたHTMLをウェブサーバーに置きますというふうに言ったのでこのビルドをしないとワードプレスのデータを取ってこないんですねなのでウェブサイトワードプレスを更新しただけじゃなくてジャムスタック側でビルドするというコマンドビルドとアップロードをですねやってやる必要がありますでこれをローカルでコマンドやってSFTPでアップロードとかしてるとワークフロードって大分判断してきますので今のところジャムスタックの会話の方たちがされているやり方としてはネットリンマインであったりダブレスアンプリファイトサービスもしくはサークルCIの中でNPMランビルドのコマンドを実行して公開サーバーに転送するアップロードする処理のところを自動化するようなワークフロードが取られていますただこれに関してもこのネットリファイトだったらアンプリファイトだったりですねそういったところのデプロイの処理いわゆるCI-CDのサービスなんですけれどもそこに関してはワードプレスを更新したからといって走り出すっていうサービスはなくて基本的にギットプッシュしたらリードとして公開されますっていう仕組みをしているサービスですねなのでワードプレスでジャムスタック運用する場合はこれにさらにワードプレスがわからないネットリンマインアンプリファイトサークルCIとかですねそういったところに開発してリードしてくださいっていう指示を出してやる必要がありますそれを自分で作れっていう話になってくると全く楽しくなくなってくるんですが安心してくださいプラグインがありますジャムスタックでプロイメントってまんまなやつがあるんですけどもこれが何かというとサープルCIもしくはネットリファイトとかですねそういったところはカスタムレブロイのサービス仕組みとしてウェブフックが用意されているんですねAPI、ポストのAPIのURLがネットリファイやったりサープルCIのこう発行されてそのポストのURLを実行その言われたポストのリクエストを出してやるとそのウェブフックのURLが発行されたプロジェクトガツビーのプロジェクトクリートさんのプロジェクトいろいろなサイトタイムがあると思うんですけども対応するURLが1個ずつ発行されてそのURLに紐付いているものを叩いたらビルドが実行されるということがなりますのでそのURLをサービス側で取得してジャムスタックでプロイメントというサービスのところでURL、管理画面のところでURLを設定してやるとこのプラグインの方で記事の更新とかですねワードプレスのフィルターでいろいろあると思うんですけどもそのフィルターを拾って指定したウェブフックのURLをポストしてくれるので記事更新だけしたらネットリーバルサープルCIやとはA11サンプリカについてそういったところのCDのサービスが動き出してくれるというふうになりますのでこれを使うことで速児、もちろんビルドの処理が走ると速児で歓迎されませんけれどもブラウザのキャッシュ消えるのもあってくださいCDの差し消えるのもあってくださいと近く的同じくらいの待ち時間でサイトに反映されるようになりますジャムサプでプロイメントのプラグインいいところとしてはフックエピアも用意されているので基本の使い方以外でちょっとカスタムな更新の反映をしたいワークフローがある場合であったりしてもワードプレスの描き方でプラグインに合わせたエピアフックするような実装をしてやることでそれに対しても反応することができますあと、公開前のチェックですねワードプレスってプレビュー機能ありますよねワードプレスの記事更新するとプレビューともらってプレビューをしたらワードプレステーマでプレビューの記事が表示されるっていうのがデフォルトであって記事公開前に皆さんプレビューで確認されたりとかされてると思うんですけれどもジャムスタックスカウトをそれが使えないワードプレスのテーマを使っているからなのでこの場合のプレビューに関してもビルドが必要になってきますなので個人で書いて公開を管理する場合はギャッツビーコリートさんとそういうジャムスタックのライフレームワーク側でローカルで開発モードに起動させておくとライブリロードとかリアクトバック、リアクト、JS側も文脈でライブに更新するような仕組みがありますのでそれを使ってローカルで確認ができますし社内のワークフローで例えば情緒にプレビュー記事を見てほしいそうなった場合に関してはまたですねコスティング、CICDの機能がついているサービスでプレビュービルドにやってやる必要がありますただちょっとワークフローやらしくなるように見えるんですけれどもリルドをされたHTMLをプレビューのURMリルドだけしてそのURMを公開してリルドされたHTMLを公開しないプレビューのURMだけ発行してするということがネットリファやプリファやパイアベースをしてもできたと思うんですけどもプレビューのURMをこっち側のサービスが出してくれるのでそれを使って記事の実行してもらうという形になりますこれだけ聞くと結構ややこしく見えるんですけどもこれのメリットってもう一つあってできあはったHTMLの固まりですよTip5のものだと思ってもらえればいいんですけどもそれがひたすらズラッと並んでいくのでロールバックがすごい簡単になるんですねこれネットリファの例なんですけれどもそこに日付がズラッと並んで11月から2日に3回更新して日間に2回更新してるとなってますけれども例えばパリにここで一番最新記事更新してリルドして公開しましたチェックでも問題なさそうだったので公開しましたただ実はこの情報は今日出しちゃいけない情報だったとなった場合ワードプレスの場合だとリビジョンワードプレスの管理画面ログインスリビジョンで戻すもしくはよっぽど大きな変更だったりするとバックアップから特急しなきゃいけないとかちょっと大ばかりになってくると思うんですけれどもジャムスタックを使ってる場合ってここに過去のビルの場合HTMLがズラッと保存されているので一個前のこのこっちの塊ですねこれを公開する形にしてやればそれだけで公開されては変わっちゃうんですなので表示の部分でロールバックがすごく早くなりますもちろんデータソースのワードプレスの部分に関しては直ってないのでそこはやらなきゃいけないんですけれども何かあったときのロールバックフロントガーのロールバックの速度っていうのはすごく早くなりますでいろいろ良いとこ悪いところですねあったと思うんですけど最後に顔さだいにしていこうと思いますジャムスタックにするベリットって性的に練習にするので早くなりますしサーバーの処理もなくなるので負荷が小さくなってサーバー落ちにくくなるとかいろいろありますただジャムスタックなサイトでワードプレスを使うベリットが結構大きいのがあるんですね何かっていうと今までのワードプレス制作のノウハウが使えなくなるというところなんですねという事かワードプレステーマは使えませんでウィジェットメニューとかですねそのデータに関してもAPIが取ってきてからQLEDにポーツでリアクトで書いてあるとかそういったことをやらなきゃいけませんでもちろんビューとかリアクトとかですねノウハウを使ってフロントエンドを構築していかないといけませんでルーティングに関してはワードプレスだとルーティング機のワードプレスガーが提供していてページ.pspとか作ったら駆けにやってくると思うんですけどあれを作らないといけないんですねで上席とかハンドブックワードプレスのテーマはハンドブック用されてるんですけどもそういったものに関してもまだこれ新しい技術が起きてないんですねただ2016年にマットバラに行っているんですよねマットではワードプレス作られた方パウダーの方です2016年に行ってますじゃあマスクリプトで勉強しようってなのでやっぱり今までのやり方でワードプレステーマ使ってページ.psp使ってやってくほうが楽なんですよね実際なんですけどもグーテンペルグプロジェクトもあってジャノスタッグの潮流も来てるのでじゃあマスクリプトやってこうって話に遅かれ早かれフロントも管理画面もなってきますなのでじゃあマスクリプトやりましょうするかしないかな話なんですけど新しくいろんなメリットありますただもちろんメリットの分だけ失うものもありますよって話ですなので失うものとジャマスタッグにして失うものとジャマスタッグにして得るものどっちの方が自分にとってメリットけかいかなというところで安定してもらおうといいかなと思いますもちろんこういう新しいサービスが出てくるですね何々が終わったとかこれから何々の時代だって話してくるんですけどもそれってその階段から見たその技術なのでいわゆるポジショントークなので僕もジャマスタッグとポジショントークですからなので振り回されないように自分で一体ローカルでやってくださいこれ本当に何でもかんでもそれにしたら実は向いてないケースだってすごく運用が大変だって言う話はジャマスタッグに限らずワードペースPG全ての分野である話なのでそこはちゃんと自分で確認してください逆に言うとそういったところでジャマスタッグにやるべきかやらないべきかっていうところを見なけられるノープスキルっていうのはこれからすごく重いなってことを思います自分で構築するのは大変だなと思ってもこれはジャマスタッグ向きだなっていう判断ができたらそういう制裁たちに回せるんですよねそれだけでもすごくこれから活かせるかなと思いますで僕が参加える向いている案件の一例としては例えばパフォーマンスとか通用性があるねすごく重さになってこれで関してはもうHTBの生成してはジャマスタッグっていうのはどう考えてもサーバーでなにもサーバーでなにがするワードプレスにかかる速くなりますので非常に拭いてますもしくは将来的に別のCMで映すかもしれないとかそういうマッシュアップするかもしれない案件に関してもジャマスタッグにしておけばAMBIの読売等を差し替えるだけできますので通常の移行コストよりも下がりますので段階的な移行として使うこともできますしもちろんワードプレス以外からワードプレスに引っ越してくる場合にもジャマスタッグを合わせて段階移行してくる方もやり方もできますので一つはアイヤとしてあるかと思いますあとはウェブGNとかGIFでいろいろやるとかインタラクティブなサイト結構いろいろ作れると思うんですけどもそういったものを作りたい場合もフロントエンド全部ジャマスクリプトで作れるのでジャマスタッグをやっていく方がいいかと思いますあとはワードプレステーマを作るジャマスクリプトでリアクトナックストとかネクストとかそういったものでサイトを作る方が得意だよってジャマスタッグを作っていますしワードプレスのテーマの管理とかテーマ作るのはいいけどメンテナンスしたくないという方はチャレンジしてみるというかと思います逆にワードプレス使ったほうがいいよねというふうにもう案件としてはまずジャマスタッグをメンテできないメンテできる体制がない場合はいきなり本番投入すると大変なメディアなのでそこは車内で試すかチョコボってやりましょうあとはジャマスタッグにどうか以前にそもそもワードプレス記事入ってない場合コンテンツも何も入ってない場合はそこに技術にこだわるのではなくてまずワードプレスをCMSをちゃんと使ってくださいこれからワードプレス始めますテーマ作りたいジャマスタッグに行きましょうじゃなくてこれもまずワードプレスのテーマを使ってプラグインを使って記事を書いて圧節集まってワードプレス辛いなって思ったらジャマスタッグがない辛くなかったそのワードプレスしなっているサービスとかであればここもワードプレスの頑張り続けてコアのメンテナンスとかそちらの方にかかわっていく方が需要対効果として高いと思いますこういう話と最終的にこれになるんですよねそこまでしてジャマスタッグでそんな頑張ってワードプレス使いたいのかという話ですねこれはJS会話の人たちの話を聴いた感想としてはみんな本当に欲しいのとこれなんですよねワードプレスフロントインドをリアックというのが自由に作りたいですでも実際に記事を書くライターさんは使い慣れたらこれを使いたいんですよなのでワードプレスにの管理画面は欲しいんだけどフロントだけどうにかしたい自由にしたいってなったときにジャマスタッグであったりインスタッグのようなものが出てきますワードプレスの管理画面何がいいかというかアクセジブレーキタゲンコタヨーとかですね世界中で使われてるだけだってすごく優秀なんですあとはプラグインを使ったものとかもすごくできますし使い方も管理画面の使い方記事のお湯の分だけでも本が出てくるのかするぐらいすごく知られてるものなのでそこをわざわざ変えて説得するよりはそこはワードプレスの前にしておこうかいいんじゃないかという話もありますあとはすでにワードプレスに来てますという場合はワードプレスですよねというところですねなのでこの辺り分離の話ですねフロントワードプレス縛られたくないかときはジャマスタッグというところでこれにすることによってワードプレスがコンテンツの頃に集中できるんです本当に記事確保記事書いてただAPAで配信するだけなので表示の部分はジャマスタッグが全部やりますというふうになりますのでそういったところでワードプレスがジャマスタッグかというよりはワードプレスでサイトを作るのかジャマスタッグも使うより便利だよねというところで共存関係のなかたちで生きたい構造にして記事書とアオリが得意な方もいろいろいろいらっしゃるというような感じでいらっしゃると思うんですけどもそういったところにもわされずに共存関係でいろいろできるんだなというふうにもってもらえればと思いますということでワードプレスWPAPAとかジャマスタッグとかそのあたりでいろいろサイト製作対応化してきましたとなので要件による管理の体制であったりとかフロントの作れるチームの体制に合わせてワードプレステーマでやりましょうじゃなくてこっちもありますよこれからいいかなと思いますただもちろんいろいろ変わってくるのでただ作るノアハウだけじゃなくて運用の部分に関しても一旦触ってみて認識してもらうほうがいいかなと思います最後にこれが一番痛かったんですけどもジャマスタッグだろうがなんだろうがギンの弾丸ではありませんので本当に申しにせずに自分で触ってやってみてくださいということで以上ですありがとうございました