jQueryオワコン問題をプログラミング歴3ヶ月が一生懸命考える

jQueryオワコン問題をプログラミング歴3ヶ月が一生懸命考える:

はじめに

2018年12月現在、僕のプログラミング歴は3ヶ月。10月より某プログラミングスクールに通っていました。

学んだことといえば、Railsでのアプリケーション開発とHTMLとCSSとJavaScriptを使ったフロンエンドの実装。

Railsいろいろ作れたし、新しい言語とかに挑戦してみようかなと考えていたところ、

「jQueryはオワコンなのか？」

という議論が盛り上がっているのをどこかでみました。

そもそも

「JavaScript = jQuery」

というレベルの僕にとって、なぜこの議論が起きたのか全く把握できませんでした。

だってjQueryっておしゃれなビュー画面作れるし、今流行りのajax通信もできるじゃないですか。
何が不満なの？って思ったわけです。
しかし、バッチバチの初学者なので、わけも分からずこういった刺激的な意見に流されてしまいがちです。

そこで、この議論について一生懸命調べて考えてみました。（色んな人の意見まとめただけ）

自分も初学者でフロントエンドの事情とか全然わかんないよーって人の参考になればと思います。

また、初学者ゆえに、間違ってる箇所などあると思います。

どしどし指摘していただければ幸いです。

なぜjQueryオワコン議論が起きたか

大体の流れ

(PWAを作るぞ)
↓
SPAを作るぞ
↓
非同期通信必須だぞ & JavaScriptでHTMLを書き換えるぞ
↓
jQueryだとしんどいぞ

おそらくこんな流れだと思います。

出てきた単語一個ずつが意味不明なので、一つずつできる範囲で解説していきたいと思います。

PWAってなに

GoogleDevelopersが提供するはじめてのプログレッシブ ウェブアプリによると

プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

（GooleDevelopersはGoogleが関連するソフトウェアやオープンソースのソフトウェア開発に興味を持つ開発者向けのサイト）

特徴としては

・オフラインでも閲覧可能

・ホーム画面にアイコンで追加可能（インストール不要）

・アプリのようなUI/UX

・プッシュ通知が可能

つまり
ブラウザで見れるのにめちゃくちゃアプリっぽいサイト！

PWAの導入事例

・Twitter

・Suumo

・タウンワーク

・Tinder

SPAってなに

SPAとは

SPAとは、単一ページ アプリケーションのトラッキングによると、

単一ページ アプリケーション（SPA）は、最初にページを読み込むときに、サイト全体の移動に必要なリソースをすべて読み込んでおくウェブ アプリケーションまたはウェブサイトです。ユーザーがリンクをクリックしてページを操作すると、以降はコンテンツが動的に読み込まれます。このアプリケーションは通常、アドレスバーの URL を更新することで従来のページ移動をエミュレートしますが、最初の読み込み以降にページ全体の読み込みがリクエストされることはありません。

・Gmail

・Facebook

・Twitter

をWebで開いてみると、ページの読み込みをすることなく画面遷移ができると思います。

（URLは変わります）

こういった単一ページで構成されたWebページをSPAというそうです。
PWAはネィティブアプリのような動きをWeb上で再現する必要があるため、SPAの導入が必須となる。

SPAに必要な技術

非同期通信

サーバーからのレスポンスを待たずに次のリクエスト送れる。

ロード画面とかがない。

JavaScriptでHTMLを書き換える技術

JavaScriptは何かをクリックしたときに何かを表示する、といったサイトに動きを加えるもの。

この技術を使ってHTMLを書き換える技術がSPAには必要。
↑jQueryオワコン議論の大きな要因の一つだと思われる

JavaScriptでHTMLを書き換える大変さ

RailsのようなMVCモデルでは実際にユーザーが見るビューを用意して、このビュー画面に遷移させるため、モデルやコントローラーにいろいろ記述する。

SPAでは単一ページで構成されているように見せるため非同期でページを更新させる。

非同期通信を使用するので、これらのビュー画面を表示させるためのHTMLをJavaScript側で記述して用意する必要がある。
もはやJavaScriptでMVCモデルを再現しないといけない。

これがめちゃくちゃ大変。なのだと思う。

もうそれjQueryの仕事じゃない

jQueryはそもそもJavaScriptを便利にしたもの。

HTMLを書き換える書き加えるみたいなことはそもそも向いてない。

だから、SPAを作らないといけない開発者からするとオワコンって思われちゃう

結局jQueryはオワコンか

結論　「人によって違う」

JavaScriptを使って何をしたいかによって、jQueryの立ち位置が変わってくるという話でした。

・ jQueryがいらない人

SPAとかバンバン開発する人にとってはいらない。

・ jQueryが必要な人

静的なページに動きをつけたい人

SPAの開発に携わっていない人にとっては必要。

JavaScriptの記事を検索したら、jQueryということはよくある。

おわりに

「jQueryはオワコンなのか」という議論を通じて、

フロントエンド開発のいま、みたいなところに少しだけ触れることができました。

その中で、エンジニアは目まぐるしく変わる環境に対応していく事が必要なんだなということを感じました。

むしろそうやって常に勉強していかないと、こういった意見に流されていしまいがちです。

また、これからのキャリアを考えると、jQueryの代わりに使われているなにかを勉強することもいいのかなと思いました。

知らないこと(JavaScriptのフレームワークなど)が多すぎるので、これから勉強して随時内容を追加、更新していくつもりです。

参考資料

ぶっちゃけSPAってどうなの？
まだjQueryで消耗してるの？ これからはVue.jsでラクにいこう
フロントエンドエンジニアはjQuery以外のライブラリを覚える必要があるのか Qiita
MVCモデルについて Qiita
SPAはじめてガイドブック
jQueryってなに？超初心者向け入門講座
ウェブサイトのPWA化がもたらす利点とは？