DE{CODE}: 2022 — WordPress 開発者の年

WordPress 開発に特化するのに今ほど適した時期はありません。 WordPress は、世界で最も人気のあるコンテンツ管理システム (CMS) として、また最も人気のあるヘッドレス CMS としてインターネットを食い尽くし続けています。 DE{CODE} 2022 のこの基調講演セッションでは、WP Engine の創設者兼チーフ イノベーション オフィサーの Jason Cohen が、WordPress 開発者の前途にある課題と機会、および彼らの生活を楽にするために WP Engine が取り組んでいるプロジェクトについて話し合います。

以下の完全なビデオをチェックしてください！

セッションのスライド:

全文トランスクリプト

JASON COHEN : こんにちは。WordPress 開発者を祝う WP Engine の年次カンファレンスである DE{CODE} へようこそ。 私の名前は Jason Cohen です。WP Engine の創設者です。 2022 年は WordPress 開発者の年であるという確信を持って、今年の DE{CODE} を開始したいと思います。 今年は私たち全員にとって非常に多くの可能性と機会があると私が考える理由を説明し、次に、この市場でのキャリアを加速させる方法についてお話したいと思います.

それでは、質問から始めましょう。ソフトウェア開発者のすべてのコミュニティは何かで知られていますが、WordPress 開発者は何のために知られているのでしょうか? WordPress 開発者は、パブリッシャーが愛する美しい Web サイトを作成することで知られています。 つまり、WordPress を使用しているウェブサイトが何百万とあることは誰もが知っていますが、WordPress を使用し、WordPress 開発者を雇っている多国籍アパレル ブランドである Under Armour のような人々もいます。

Under Armour は昨年 50 億ドルの売上を達成したため、WordPress が無料だからという理由だけで使用しているわけではありません。 必要なソフトウェアを購入する余裕があります。 彼らは自分たちの要件を満たしているので WordPress を使用し、WordPress 開発者を雇っているのは、それらの要件を取り、美しく更新しやすい Web サイトを作成する方法を知っているからです。 このように。

またはナショナル ジオグラフィックは、世界で最も尊敬されているメディア ブランドの 1 つであり、リッチなメディア エクスペリエンスを処理できる洗練されたデジタル アセット管理を備えた、美しく簡単に更新できる Web サイトを必要としています。 もちろん、彼らはWordPress開発者を雇っています。 それはあなたが有名なユースケースです。 そして、技術はどうですか？ 現代のテクノロジー企業は WordPress を使用しますか?

はい、Dropbox のチームは、必要に応じて CMS をゼロから構築することも、常に登場する Site Builder テクノロジーを使用することもできます。 しかし、Dropbox は、サイトの魅力的で公開しやすい部分については、WordPress および WordPress 開発者と協力することを選択しています。 マーケティング チームが WordPress とは異なるフロント エンド テクノロジを使用したい場合はどうでしょうか?

CMS には WordPress を使用したいのですが、フロント エンドには別の何かを使用したいと考えています。それでも WordPress を使用できますか? もちろん、それがヘッドレス WordPress です。 そのため、彼らは Android Authority が行ったように選択を行い、ヘッドレス WordPress を使用できます。 そのため、Android Authority は依然として WordPress を CMS として使用して、ライター、コンテンツ、メディア、ウェブサイトのバックエンドを管理するために必要なすべてのものを管理していますが、フロントエンドは別のフレームワークによって処理されています。

そして、ブランドが Android オーソリティのようにヘッドレス アプローチを望んでいる場合でも、分離された Web サイトのパフォーマンスとセキュリティが必要なため、WordPress 開発者を呼び出します。過去 20 年近くにわたって、WordPress が自社の Web サイトを強化してきたことを期待するようになりました。 そして、WordPress 開発者はそれを行う方法を知っています。

パブリッシャーを満足させることは、WordPress 開発者が行うことで定評があり、WordPress の競合他社でさえこれを知っています. スタートアップや Web 開発について最も話題になっている人の中には、WordPress について話し続けている人もいます。 彼らのウェブサイトを閲覧していると、WordPress 開発者に売り込むページが必ずあるという共通点があります。 どこを見ても、誰もが WordPress 開発者に興味を持っています。

2022 年が WordPress 開発者の年であると私が言う理由は、すべてのパブリッシャーが必要とするものをマスターし、それらのニーズは変わっておらず、加速しているだけだからです. 同様に、すべてのパブリッシャーは、Google のような検索エンジンからのオーガニック トラフィックを必要としています。 それは新しいですか？ いいえ、明らかにそうではありません。 基本的に同じ記事が何年にもわたって投稿されており、WordPress 開発者はこれを行う専門家です。

A/Bテストはどうですか？ それとも、コード A/B テストなしですか? それは空想です。 それは革新的ですよね？ これからは、これらの新しいツールをスクランブルして学習する必要があります。 まあ、あなたがそうしないことを除いて、あなたは何年もこれをやっているからです. 同様に、このアイデアは 8 年前にも VC の資金を獲得しました。 というか、ここは変わらない。 No Code A/B テストはまだありますが、これらすべてを行う方法はすでにわかっています。 あなたはすでにこれらすべての専門家です。 それはすばらしい。

また、ページ エクスペリエンスをランキング要素として使用する Google 検索の最近の変更についても、多くの人が知っています。 ページ エクスペリエンスとは、ページ速度などのことを意味し、Core Web Vitals の更新としてこれについても知っているかもしれません。 これまでに Google がこのような変更を行い、対応しなければならなかったことはありますか? そうですね、実際にはいつもそうですよね？ そして、あなたはそれを行う方法を知っています。

はい、それは新しいツールですが、ウェブサイトを高速化することは重要なことであり、Google は長い間ページの速度をランキング要因として使用しており、サイトへの訪問者が長い間満足しているかどうかを推測しようとしました。 . これらはすべて、あなたがすでに熟達している事柄です。ですから、そのようないくつかの点では、世界は変わりません。 このような方法でパブリッシャーにサービスを提供することになると、WordPress 開発者はすでに時代の先を行っているため、これは喜ばしいことです。 あなたはすでに専門家です。

しかし、Web 開発には他にも真の変化が見られる側面があります。 世界が急速に変化している場所。 だからこそ、私は WordPress 開発者にアーキテクトのように考えるようアドバイスしています。 したがって、建築家は顧客からの要件をアートと組み合わせます。 アーキテクトはまた、建築材料またはソフトウェアとインフラストラクチャを意味するかどうかにかかわらず、要件とアートを適切なテクノロジーと組み合わせます。

つまり、利用可能なすべてのテクノロジーを使用できる必要があり、新しいイノベーションを活用する必要があるということです。 新しいことを学ばなければならないことは混乱を招く可能性があるため、それは恐ろしいことかもしれませんが、それも仕事の一部です. 私たちがソフトウェア開発者になることを決めたとき、ソフトウェアに関することの 1 つは、ソフトウェアは常に変化するということです。 そのため、優れたソフトウェア開発者や優れたアーキテクトになるには、最新の情報を常に把握して、さまざまな仕事に適したテクノロジを選択する必要があります。

つまり、A/B テストや SEO のようなものは非常にゆっくりと変化し、基本的にはまったく変化していないかもしれませんが、テクノロジーはその上にある必要があり、それについて次の 20 分間で話したいと思います。 それらのいくつかは何ですか？ では、これらのエキサイティングなテクノロジーの新しい変化のうち、採用する必要があると思われるものは何ですか? 私たちの宇宙における興味深い変化の温床として私が見ているものを垣間見せたいと思います.

したがって、ユーザーが期待する最大の変化は、適応型デジタル エクスペリエンスと呼ばれるものです。 これはパーソナライゼーションに似ていますが、それ以上のものです。 ユーザーは、サイトのルック アンド フィールと機能が、ログインしていない場合でも、特定の環境や条件、さらには履歴に適応することを望んでいます。パーソナライズされた適応型のデジタル エクスペリエンスを提供すると、ユーザーは Web サイトと実際、Web サイトが順応性がある場合、コンバージョン率が向上し、ユーザーがより長くサイトに留まり、より多くのリンクをクリックするなどのデータが大量にあります。

言い換えれば、メディア企業として、より多くのクリックはより多くの広告収入を意味します。 e コマース企業として、より多くのコンバージョンはより多くの収益を意味します。 テクノロジー企業やオンラインで商品を販売するあらゆる種類の企業として、e コマースでなくても、より多くの人が関与するということは、より多くのリードや収益が得られることを意味します。 したがって、すべての場合において、より適応性の高いデジタル エクスペリエンス、つまり顧客の満足度の向上は、文字通りクライアントの収益の増加を意味します。 それがとても重要な理由です。

私たちにとって良いニュースは、Web の進歩の多くが、これらの適応型エクスペリエンスを提供する能力を解き放つことです。 それでは、これを説明しましょう。 いくつかの例を示しましょう。 これはどのように作動しますか？ これが実際の例です。あるオンライン マガジンでは、HubSpot フォーラムを使用してリードを収集する必要がありました。 HubSpot フォーラムを選ぶ理由そのため、HubSpot フォーラムはプログレッシブ フィールドと呼ばれる手法を使用しています。

これが意味することは、ユーザーがフォームに入力し、ホワイト ペーパーをダウンロードするか、何かを取得するための情報を提供した後、HubSpot はそのことを記憶しているため、そのユーザーが次に何かを取得したいときに、再度その情報を求められることはありません。 つまり、その人はより多くの情報を入手し、サイトにもっと関わり、煩わされなくなる可能性が高くなります。

これは、アダプティブ エクスペリエンスの好例です。 しかし、トレードオフがあります。 HubSpot フォーラムやこの例の他のフォーラムなど、このサードパーティのスクリプトを使用すると、Web サイトの速度が低下しました。 実際、彼らのライトハウス モバイル スコアは 100 点満点中わずか 40 点でした。これは、サイトの速度が遅く、SEO で上位にランクされないことを意味します。 つまり、このアダプティブ エクスペリエンスが必要ですが、速度の問題が発生しています。 あなたはそれについて何をしますか？

そこで、Partytown と呼ばれるこの新しい手法の出番です。Partytown は、このようなサード パーティのスクリプトをブラウザの JavaScript エンジンのメイン スレッドから移動し、別のスレッドにロードします。 したがって、これは、サイトがより迅速にインタラクティブになることを意味し、ユーザーがアクションを実行したり、対話したりすることを妨げられず、同じクールで適応性のある機能を備えた Partytown を使用するだけで、灯台のスコアが 40 から 90 に変わりました.

したがって、非常に優れた適応型スクリプトを使用できますが、遅くはなく、遅くはありません。 カッコいい。 これは、アーキテクトとして、顧客の Web サイトを素晴らしいものにするために行うべきことです。 これが JavaScript を高速化する方法です。 パフォーマンスのもう 1 つの大きな部分はメディアです。これは既にご存知かもしれませんが、ちょっと待ってください。 誰もが、特に多くのメディアを持つパブリッシャーは、見栄えのする美しく大きな画像を求めています。

しかし、画像が単純に大きい場合は、ダウンロードが遅くなり、特に携帯電話やモバイル ネットワークではサイト全体の速度が低下します。 そのため、人間には同じように見えますが、はるかに小さいため、はるかに高速にロードされる新しい画像形式があります。 WebP について聞いたことがあるかもしれません。 しかし、AVIF、AVIF については知らないかもしれません。AVIF は WebP よりもさらに小さいですが、肉眼では同じように見えます。

そのため、AVIF 画像に切り替えるだけで、その雑誌サイトや実際のサイトを劇的に高速化できます。 ここに面白いことがあります。 私は言った、あなたはおそらくこれを知っているでしょう。 昨年、AVIF についてプレゼンテーションを行いましたが、数か月しか経っていませんでしたが、1 年経った今、それを使用していますか? いいえ、ほとんど誰も使っていません。 W3Techs によると、WebP を使用しても AVIF を使用している Web サイトは 0.1% 未満であり、使用している Web サイトは 4% 未満です。

つまり、これらはある意味で古い、または知っておくべきテクニックですが、それでも使用すれば最先端です。 これは、ウェブサイトを高速化するための非常に簡単な方法であり、ユーザーにとってはもちろん、画像フォーマットを使用した SEO にも適していますが、一般的にはまだ実行されていません。 WordPress は AVIF をサポートしていませんが、WebP 画像はサポートしています。

したがって、通常の WordPress を使用しているクライアントにとっては WebP で十分なのかもしれませんし、AVIF を自動的にサポートする方がずっと簡単なため、これがヘッドレス WordPress を使用するもう 1 つの理由かもしれません。 クライアントの要件を調整し、技術的な能力を調整し、これらを組み合わせる正しい方法を見つけ出すのはあなた次第です。 しかし、建築家として、これを完全に無視するのは得策ではないと思います。 クライアントを助けるのにとても簡単な方法なので、ここでいくつかのテクニックを開発する必要があると思います.

そこで、フロントエンドで起こっているもう 1 つの革新を見てみましょう。それは、デスクトップと電話のユーザー設定です。 5 年前には存在しなかったこれらの新しい Web ベースの設定があり、クライアントの Web サイトへの訪問者は、これらの設定が尊重されることを期待しています。 つまり、モーションの削減、ウェブを好む私のような人々のフォントサイズはすべて少し大きい、ライトモードとダークモードの設定、時間帯によるものか、いつでもユーザーの好みによるものか、アクセシビリティなどがあります。さまざまな方法で Web を操作する人々にとっても、Web サイトが適切に機能するようにします。 たぶん、視覚障害者やその他の特別な状況のために、時には規制のために。

これはユーザーにとっては良いことだと思いますが、これらすべてをサポートするサイトを実装する必要があるため、あなたにとっては大変な作業です。 そして、ここで別の問題があります。 適応性のあるサイトを構築するとき、それがこのようなデバイス機能であろうと他のものであろうと、ユーザーに依存するものであろうと、それをどのようにテストしますか? これらすべての異なる状況で、これが正しく機能することをどのように保証しますか?

私たちが慣れ親しんでいるのと同じように、この時点で、自分のサイトを携帯電話のサイズでテストし、次に iPad でテストし、次にラップトップでテストして、スーパー ワイド スクリーンでもう一度テストするかもしれませんが、それは私がテストした 3 つまたは 4 つのことです。 さて、それぞれのケースで、フォントサイズを非常に大きく設定した場合はどうなるでしょうか。 それはまだ正しく見えますか？ それをテストしていますか？ ライトモードとダークモードはどうですか？ これは、テストする必要があるものの 2 倍です。

したがって、フォント サイズ、ライト モード、アクセシビリティ、さまざまな種類のブラウザを使用することなど、これらすべてによって、テストしなければならない要素の組み合わせが倍増します。 それはちょっと難しいです。 そのため、一部の人々にとっては、自動テストのために到達するものです. これらのケースのいくつかは、人間が毎回すべてを見るのではなく、自動化されたテストによって処理できる可能性があります。

それは良いことですが、完全な答えではありません。自動化されたテストでは、ダーク モードのサイトが正常に見えるかどうかがわからないからです。 それは本当に人間が判断しなければならないことです。 したがって、このテストはまだパズルです。このテスト パズルに役立つ次のテクノロジを紹介するので、少し後で説明します。

次にお見せするのは、CSS と HTML で実現できることを個人的に非常に楽しみにしているものです。 実際、JavaScript でこれを実行するためのコードを個人的に作成したこともあります。 そして今、それは CSS と HTML にネイティブに組み込まれるようになりました。つまり、どこでも利用できるようになるということです。 また、Performant と他のすべてのツールがそれをサポートします。 そして、私はこれに非常に興奮しています。

それで、それは何ですか？ そのため、CSS メディア クエリに精通しているかもしれません。 したがって、これにより、画面全体のサイズに基づいて、異なるレイアウトまたはルック アンド フィールを提供できます。 しかし、CSS コンテナー クエリと呼ばれるアダプティブ レイアウト用の新しい機能が追加されました。 そのため、画面全体のサイズによってレイアウトの流れが異なるのではなく、単一のコンポーネントをそのサイズまたは周囲のコンポーネントだけに基づいて異なる方法で表示できます。

たとえば、ここに表示されているようなコンポーネントがあり、幅の広いバージョンと幅の狭いバージョンがあります。 今では、携帯電話ではナロー バージョン、ラップトップではワイド バージョンが必要になるかもしれません。 それが私たちの通常の考え方です。 しかし、ワイド バージョンで実際に 3 つの列がある場合はどうなるでしょうか。 したがって、各列には狭いマイクが必要です。

現在の CSS がそれをサポートしていないことがわかります。 画面全体が広いと言っているだけなので、そうではありません。画面は広いかもしれませんが、列にいるので、電話のように振る舞う必要があります。 それがコンテナ クエリの機能です。 とても興奮しています。 現在、これは、Web ページ全体としてではなく、コンポーネントの観点から Web ページについて考えることへのシフトである、さらに大きな傾向の一部にすぎません。 ページの断片。

PHP 開発者として、いくつかのものを分離することに慣れています。 スタイルはここに、機能はそこに、ページ全体のレイアウトはそこに、といった具合です。 しかし、コンポーネントへの移行はより大きな変化です。 ページ内のピースは、これらの再利用可能な個々のコンポーネントで構成する必要があると言っています。 CSS や HTML などの Web の基盤となるテクノロジーは、このコンポーネントで見たように、より広いページではなく自分自身のサイズをどこに置くべきかを考えるように、コンポーネントに向かって進んでいます。

もちろん、グーテンベルクにもこのような考え方が見られます。 そのため、WordPress ユーザーはこれらの長いページを作成しなくなりました。 ブロックを組み立てています。 ブロックはコンポーネントです。 テキストやタイトル、画像などのコンテンツの断片でも、列やタブなどのレイアウトでも、あらゆる種類のものであっても、再利用して好きなように組み立てることができるユニット。

そしてもちろん、完全なサイト編集では、これはさらに進みます. コンポーネントであるブロックを使用してページ全体をレイアウトすることは、WordPress で行っている方法であるため、WordPress 開発者として取り残されないようにするために、これは受け入れなければならない変化です。 HTML や CSS などの基盤となる技術から見ても、WordPress がすでにどこへ行って、Gutenberg や完全なサイト編集でどこに向かっているのかを見るにしても、すべてがコンポーネントで物事を考えなければならないことを示しています。コンポーネントのようなものを開発するかもしれません。

これは、ヘッドレス Web サイトや JavaScript の世界など、フロントエンド開発のより広い Web を見たときにも当てはまります。まったく同じ話です。 したがって、react、view、angular などの JavaScript フレームワークは、ほとんどの人がそのうちの 1 つを使用しており、最初からコンポーネント ベースでした。 長年。 物事を別々のファイルに入れるのではなく、コンポーネントを別々のファイルに入れ、それらを再利用します。

つまり、ヘッドレスで JavaScript を使用する場合でも、WordPress を使用する場合でも、HTML と CSS を生で記述するだけでも、コンポーネントについて考える必要があります。 そのため、非常に価値があります。 これは、オブジェクト指向プログラミングがデータとコードをカプセル化した方法に似ています。 同様に、Web コンポーネントはルック アンド フィール、動作、つまりデータとコードもカプセル化し、それらを再利用可能にします。これは素晴らしいことです。

もう 1 つのことは、再利用可能で構成可能であることに加えて、個別にテストできることです。 これは、私たちが話していたテストの話に戻ります。 そのため、ボタンのようなものであっても、コンポーネントを取得して、これらのさまざまなコンテキストでテストできます。 テキストが大きい場合と小さい場合のボタンの外観はどうなりますか? ボタンはさまざまな種類のブラウザでどのように表示されますか? ライトモードまたはダークモードでのボタンの外観など。

ボタンだけを単独でテストすると、あらゆる種類の組み合わせをテストしたり、バグを修正したりするのがずっと簡単になります。 そして、その後テストを続ける必要がない、この素晴らしい再利用可能なボタンがあります。 したがって、個別にテスト可能な一連のコンポーネントを用意することで (これは簡単です)、最初から機能するページを作成できるようになりました。 これは、これらのさまざまな状況でうまく機能するこれらの Web サイトをテストして構築するにはどうすればよいですか? への回答の一部です。

つまり、コンポーネントは、アーキテクトとして Web サイトにアプローチする必要がある方法だと思います。 したがって、WordPress 開発者として、あなたはすでに世界の多くを理解しています。 サイト運営者と連携する方法を理解しています。 彼らの要件を実際の生活に変換する方法を理解しています。 コードとアートと要件を組み合わせて、素晴らしく効果的な Web サイトを作成する方法を理解しています。

コツは、取り残されるのではなく、アダプティブ エクスペリエンスやその背後にあるツール、コンポーネントを構築するためのコンポーネントなどを活用できるように、この新しいテクノロジを学習して導入することです。 DE{CODE} でのプレゼンテーションは、まさにそれを実現するのに役立つように設計されています。 そのため、DE{CODE} にはヘッドレス WordPress のトラックがあり、クライアントにヘッドレスを使用するタイミングとヘッドレスを使用しないタイミングを学ぶことができます。 数分でヘッドレスをゼロから始めるのに役立つワークショップがあります。 そのため、それについて少しでも興味がある場合は、それらをチェックしてください。

また、e コマースの分科会もあり、WordPress やその他のトピックを管理しています。 そして、私のアドバイスは、あなたが一日を過ごし、これらすべてのセッションを見て、できることを吸収し、メモを取るなどしながら、あなたが言うその1つ、2つ、または3つのことを探すことです。私がしようとしているものです。 そういったことを学んでいきます。 私はそれらのものをプロジェクトに持ち込もうとしています。 私はそれが得意になるつもりです。 たぶん、既存のクライアントにも戻って、これを使用するようにサイトをアップグレードしましょう.

ですから、建築家として取り去り、実際に実践するいくつかのことのようなものに注意してください. ですから、これらのパブリッシャーを喜ばせ続け、新しいフロンティアに拡大し続け、アーキテクトとして成長し続けてください。今年 2022 年は、WordPress 開発者として最高の年になるでしょう。 ありがとう。