検索結果0件」

    【衝撃】IT業界でWordPressはプログラミングとみなされない

    【衝撃】IT業界でWordPressはプログラミングとみなされない

    こんにちは、シンヤです!
    先日、以下のようなツイートをしました。

    IT業界未経験者には酷ですが、WordPressはプログラミングとみなされません
    なぜなら
    ・誰でもできるから
    ・主流はフロントとバックを切り離す開発だから
    ・APIが使えないから
    ・Gitと非常に相性が悪いから
    ・UXが非常に悪いから
    ・JAMstackがあるから
    ・全てにおいて中途半端だから
    ブログで解説します

    こちらのツイートについて、深掘りして解説していきたいと思います。


    WordPressは技術的には、オワコンの枯れた技術

    こちらは表現力を高めるために、あえて強めの口調で言いました。
    というのも、本当にその通りだからです。

    今からIT業界に参入するなら、WordPressの勉強に注力するのだけは、辞めた方がいいです😅
    ベテランの技術者で、WordPressの技術に投資しろという人は、見たことがありません。

    ブログを作って稼ぐとか、自分の商品を作って売り込むためのメディアを作るとかなら、話は違いますけどね。

    あくまで「IT業界で技術者を目指すなら」、WordPressの技術に自分の時間を投資するのは、馬鹿げたことだということです😅
    理由は主に、以下の通りです。

    1. 誰でもできるから
    2. 主流はフロントとバックを切り離す開発だから
    3. APIが使えないから
    4. Gitと非常に相性が悪いから
    5. UXが非常に悪いから
    6. JAMstackがあるから
    7. 全てにおいて中途半端だから

    それぞれ詳しく解説いたします。


    1. 誰でもできるから

    WordPressはノウハウが豊富というのもありますが、技術者ではない人でも少し勉強すればできます。
    理由は・・・

    動的な処理を一切作ることができないから

    これになります。
    動的処理とはかんたんにいうと、

    • 新規登録・ログイン
    • ECサイト
    • 独自決済
    • APIとの連携
    • ネイティブアプリとの連携
    • チャット機能
    • ある入力をした場合の、画面の切り替え

    などなどですね。
    要するに、ユーザーが入力した情報によって、画面が流動的に切り替わる機能です。

    新規登録やログインやECサイトは、プラグインなどを使えばできます。
    ただ動作が非常に不安定で、運用リスクが高すぎるので、個人的にはおすすめしません😱

    このように、流動的に画面の見た目が変わるサイトのことを、「Webアプリ」といいます。
    WordPressができることは、「Webサイト作り」です。
    両者の違いを具体的にまとめると・・・

    • Webサイト:ホームページづくり
    • Webアプリ:プロダクトづくり

    さらに噛み砕いていうと、

    • Webサイト:静的なコードしか書けない
    • Webアプリ:動的な処理を書く必要がある

    例えばWebアプリは、

    • ログイン前の画面
    • ログイン後の画面
    • ログイン後、あるボタンを押した場合の画面
    • 特定のパラメーターがある場合の画面
    • スマホアプリからログインした場合の画面
    • メール通知やPush通知

    などなど、考慮しなければいけない流動的な要素が、いくつも絡み合いながらデザインを作っていきます。
    これが、「Webプロダクト」と呼ばれるものなのです。

    Webサイトは基本的には、このような「流動的に見た目が変わる要素」というものがありません(ログイン前後の画面ぐらい)。

    ユーザーが求めるものが多様化した現代では、求められているものは「Webアプリ」です。
    Webアプリ作りの需要が高いから、エンジニアの需要が高いのです😅
    Webサイト作りは・・・

    • 数が多すぎて飽和して、価値が下がっている
    • 無料でWebサイト作りができるようになった(NoCode)
    • Webサイトの代替サービスがたくさん出てきた
    • サイトを作っても、売り上げにアップに結びつかないと気づかれてきた

    という感じで、Webサイト作り時代がもう価値が低い時代となりました。
    つまり必然的に、Webサイト作りしかできないWordPressの付加価値も、非常に低いのです😱


    2. 主流はフロントとバックを切り離す開発だから

    フロントとは表側、つまり「ユーザーの目に見える技術」のことを指します。
    バックとは裏側、つまり「ユーザーの目に見えない技術」のことを指します。

    正確には、フロントは「フロントエンド」、バックは「バックエンド」といいます。

    IT業界の技術は、大きく分けて「フロントエンド」「バックエンド」「インフラ」の3つで構成されています。
    さらに噛み砕いていうと、

    • フロントエンド
      • Webで目に見える画面を作る技術
    • バックエンド
      • ログイン後の処理やAPIなど、裏側の機能を作る技術

    これらは、それぞれ以下の技術が主流です。

    • フロントエンド
      • React.jsやVue.js
    • バックエンド
      • Go言語やRuby

    なぜ切り離しているのかというと・・・

    技術的に求められるものが多様化したので、切り分けた方が効率がいいから

    端的に言い表すと、上記のようになります。

    WordPressはReact.jsやVue.jsのように、SPA(SinglePageApplication)でもないし、動的処理やAPI開発もできません。
    複雑な処理ができず、「見た目だけ」作っていく技術を「マークアップ」といいます。

    見た目だけを作るなら、「フロントエンド」も「マークアップ」も違いは感じにくいと思います。
    両者の決定的な違いは・・・

    • マークアップ:静的なもの
      • 基本的に見た目が変わらない
    • フロントエンド:動的なもの
      • 見た目がユーザーの状態によって、流動的に変わる

    上記になります。
    つまりこれは、「Webサイト」と「Webアプリ」の違いと同じなのです。

    マークアップ言語は、複雑な処理を組み込むことができません。
    つまり、「Webアプリ作り」はできないのです。

    前述にも解説した通り、現代に求められているものは「Webアプリ」です。
    WordPressは「マークアップ言語」です。
    動的処理に対応できない「マークアップ言語」を操れるだけでは、エンジニアとはみなされません。

    マークアップ言語しか使えないのに、「フロントエンドエンジニア」を名乗る人が多すぎます。
    これも両者の違いの分かり難さに拍車をかけています😅

    フロントエンドのサンプルコードをお見せいたします

    文字だけだと伝わりづらいので、実際にフロントエンドで書かれたサンプルコードをお見せいたします。

    このブログも、フロントエンド言語の一つである「React.js」によって作られています。
    このブログのトップページの、以下にコードを記載いたします。

    import React, { useEffect } from "react";
    import { Link, graphql } from 'gatsby';
    
    import SEO from '../components/Seo';
    
    import Header from '../components/Header';
    
    import _ from "lodash";
    
    const IndexTemplatePage = ({ data, location, pageContext }) => {
      useEffect(() => {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({'event': 'optimize.activate'});
      }, [location.pathname])
    
      const {edges: posts} = data.allMarkdownRemark;
      const { currentPage, numPages } = pageContext
      const isFirst = currentPage === 1
      const isLast = currentPage === numPages
      const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
      const nextPage = (currentPage + 1).toString()
    
      return (
        <div>
          <SEO title="ようこそ!シンヤのITブログへ" keywords={[`シンヤのITブログ`]} />
          <Header />
          {posts.map(({node: post}) => {
            const {frontmatter} = post;
            return (
              <article className="list__blog u-bb-lighter u-d-flex u-d-flex-wp u-jc-sb u-ai-fs" key={post.id}>
                <Link to={frontmatter.path}>
                  <figure className="list__blog--image">
                    <img src={frontmatter.thumbnail} alt={frontmatter.title} decoding="async" loading="lazy" />
                  </figure>
                </Link>
                <div className="list__blog--contents">
                  <h2 className="title u-mb-8">
                    <Link to={frontmatter.path}>{frontmatter.title}</Link>
                  </h2>
                  <p className="description u-c-darkgray">{frontmatter.description}</p>
                  <div className="u-mt-8 u-d-flex u-d-flex-wp u-ai-c u-jc-sb">
                    <ul className="tags__wrapper u-pa-reset u-bg-reset u-list-none">
                      {post.frontmatter.tags && post.frontmatter.tags.length > 0
                          ? post.frontmatter.tags.map(tag => {
                            return (
                              <li key={tag}><Link className="tag__link u-fw-b u-fs-14 u-bo-radius" to={`/tags/${_.kebabCase(tag)}`}>{tag}</Link></li>
                            )
                          })
                          : ""
                      }
                    </ul>
                    <small className="u-c-lightgray u-fs-13 u-lineh-large">{frontmatter.date}</small>
                  </div>
                </div>
              </article>
            );
          })}
          <div className="u-o-hidden u-mt-40 u-mb-40">
            {!isFirst && (
              <Link className="u-f-left" to={prevPage} rel="prev">
                ← 前のページへ
              </Link>
            )}
            {!isLast && (
              <Link className="u-f-right" to={nextPage} rel="next">
                次のページへ →
              </Link>
            )}
          </div>
          <Link className="button__link u-mt-56" to="/allblog">全ての記事を見る</Link>
        </div>
      );
    };
    
    export const query = graphql`
      query IndexQuery($skip: Int!, $limit: Int!) {
        allMarkdownRemark(
          limit: $limit
          skip: $skip
          sort: { fields: [frontmatter___date], order: DESC }
          filter: { frontmatter: { date: { ne: null } },fields: { draft: { eq: false } } }
        ) {
          edges {
            node {
              id
              frontmatter {
                title
                description
                date(formatString: "YYYY/MM/DD")
                path
                tags
                thumbnail
              }
            }
          }
        }
      }
    `;
    
    export default IndexTemplatePage;

    ご覧のように、HTMLとJavaScript両方を一緒に書いて、さらに動的処理も書き加えています😀


    3. APIが使えないから

    APIとは「Application Programming Interface」の略です。
    ざっくり説明すると、他の会社や第三者が開発した機能を、自分のブログやプロダクトでも使えるようにする技術です😊

    WordPressはこのAPIに対応していません。
    現代のプロダクト開発で、APIが使えないというのはありえません😱

    それもそのはずですが、WordPressが生まれた2003年には、まだAPIはありませんでした。
    対応しているはずがありません😅

    WordPressはバージョンアップを重ねていますが、ほとんどが「セキュリティ関係のアップデート」です。
    表側に目に見える機能の改良は、ほぼ何も行われていません。

    APIを使えるようにするには、表側全てをJavaScriptで作り替えないといけません。

    つまりReact.jsやVue.jsのような、JavaScriptを使って表側を作る技術で、サイトを作り直さないといけないということです😅


    4. Gitと非常に相性が悪いから

    Gitとは、プログラミングの履歴や差分をわかりやすくするために作られた、バージョン管理の技術のことです。
    Gitを使えば・・・

    • ソースコードの管理
    • 過去のソースコードを見る
    • 現在と変更後のソースコードの差分がわかる
    • 過去のソースコードの履歴の保存
    • 複数の人たちとソースコードの共同編集ができる

    などのメリットがあります。
    現在のWebサービスのほとんどが、Gitを使ってバージョン管理を行っています。

    GitはWordPressと非常に相性が悪いです。
    理由を挙げると・・・

    • データベースまでバージョン管理はできない
      • つまりデータベースと紐づいているブログ記事は、バージョン管理ができない
    • Git自体の学習コストが高い
      • Homebrewのインストールや環境構築など、初学者には対応が難しい

    などがあると思います。
    特に「記事のバージョン管理ができない」のは、非常に残念ですね。

    記事のバージョン管理ができれば、例えブログがハックされて記事が消されても、元に戻すことができるからです😅


    5. UXが非常に悪いから

    UXとは「Uxer Experience」の略で、かんたんに言うと「Webサイトやアプリの使いやすさ」のことです。

    WordPressはUXが非常に悪いです。
    なぜなら・・・

    ページ更新のたびに読み込みが発生するから

    ですね。
    他にもあるのですが、この一つに絞りました😅

    React.jsやVue.jsを使えば、最初だけ読み込ませて、ページの切り替えの際は一切読み込みが発生しないサイトを作れます。
    専門用語で言うと、「SPA(Single Page Application」といいます。

    このブログも、何気にSPAで作られています。
    非常にサクサクとページを切り替えられると思います😊


    6. JAMstackがあるから

    JAMstackとは・・・

    • JavaScriptのJ
    • APIのA
    • MarkupのM

    上記のことを指します。

    かんたんにいうと、JavaScriptとAPIを使って、ブログを作ることができる技術のことです。
    JAMstackを使えば、

    • サーバーを使わずにブログが作れる
    • 管理画面がないブログにも、管理画面を導入できる

    このブログも「GatsbyJS」というSSGを使い、「NetlifyCMS」というヘッドレスCMSを使っています。
    上記ができて、UXがいいブログが作れたら、WordPressは必要ありません😊


    7. 全てにおいて中途半端だから

    WordPressのデメリットを一言で表すと、上記になります。

    Webアプリ作りもできず、API開発も連携もできず、バージョン管理もできず、対応できるのは「マークアップ」だけ。
    あまりにも中途半端すぎます。

    単刀直入に言うと、現代の最新技術と見比べて、非常に役不足な技術です。
    なので僕自身は、WordPressの案件は絶対に死んでもやりません😅

    使い古された技術な分、よく知られた技術だからSEO対策のために、WordPressの記事は書いていますけどね😅


    まとめ

    • IT業界ではWordPressは、プログラミングとみなされない
    • 理由は、現代の最新技術と見比べて、あまりにも見劣りしているから
    • Webアプリ作りもできず、APIも使えず、対応できるのは「マークアップ」のみ
    • つまり全てにおいて、中途半端すぎて役に立たない

    以上になります。
    ではでは、またね〜🤗

    • 【衝撃】IT業界でWordPressはプログラミングとみなされない

    広告