『Shopify x JavaScript を学ぶ』 Vol.1 JavaScriptの基礎　#ShopifyJS [テキストのみ講座]

最近ひしひしと感じているのが「Shopify x JavaScript」できる人の少なさです。Shopify と JavaScript できるだけで結構な差別化できるのに！そして、出来ること凄く凄く増えるから提案の幅や対応できる幅もめちゃめちゃ広がるのに！勿体ない！！！

でも意外と Shopify と JavaScript にフォーカスして体系的にまとまっている教材って少ない気がします。なら自分で書いちゃえ！と思い始まったのが今回の『Shopify x JavaScript を学ぶシリーズ』です。

これから複数回に渡って「 Shopify x JavaScript 」というテーマに絞って講座を作ってみることにしました。

また JavaScript の実装部分に関しても、これが正解のコードです！という教え方よりも、どのような思考法でその実装にするのか、どのような部分をポイントにして実装方法を考えるのかというプロセスを詳しく書いています。なぜこれをするかというと、多くの書籍や教材では最初に最適化されたコードをポンっと出されており、自分自身 最初からレベルの高いコードだったら分かりにくい部分が多く、なぜその実装にしたのかが分からないと実務で使えないという悩みがありました。個人的には、この実装のプロセスを解説することで理解力って上がるんじゃないかなと思っています。

そして、一般的な JavaScript 本だとJavaScript で出来ること全てを網羅しています。逆に言うと、項目が多すぎて、どれが優先順位高くて、何が出来るかのイメージがぼやけてしまうことが多いです。本を読んだ後に「結局 JavaScript で何が出来るんだろう？」「大切なことは何だったのか？」「Shopifyで使うにはどうするの？」となってしまう場合が多い気がします。私は当時そうでした。これだと時間も労力も勿体無いです。

このコンテンツでは JavaScript で必要なことに優先順位をつけて、Shopifyに特化して、最短スピードで実務まで持っていけるように構成してあります！

ただ正直、あまり「Shopify x JavaScript」が出来る人材増えすぎても個人的に嫌なので、安価で多くの人に届いて欲しいというよりは、ある程度の価格帯にして本当に興味のある少人数に届けば良いなと思っています。その代わり届いた少人数の人には、ちゃんとJS使えるようにめちゃめちゃコンテンツ練ってあるので安心してください。

Shopifyの基礎やLiquidの基礎理解がまだだよって人は デイトラのShopifyコース & Shopify アドバンスコース があるのでぜひ。（私も デイトラ の Shopify コースでメンターをしています！）
→ デイトラ Shopify コース リンク

まず最初にJavaScript で出来ること、JavaScriptを使う目的 を書いています。個人的には、ここがイメージできていると、JSの学習効率が格段にアップします。そして、JSの基礎は思い切って 6個 にしました！！ 今回の note では Shopify x JavaScript で本当に本当に必要な6個だけ 覚えてください。そして、JSの大事な操作を網羅し、実際にタブ切り替え、アコーディオンセクションを実装してみます。

今回は初回ですが、最終的にはこのShopify x JavaScriptシリーズ（たぶん全3回くらいになる予定）を通して JavaScript を使って Shopify テーマ上でのHTML/CSS/Liqiudの1000倍くらいのいろんな実装が出来ること想定しております。

余談ですが、Shopifyが最近出した最新のテーマ Horizon では、デフォルトでJavaScript ファイルが たくさん存在しているのをご存知でしょうか。もし今後 Shopifyテーマ開発で Horizon が標準になったりしたら、もはや「Shopify x JavaScript」は避けては通れない課題です。必須科目です。逆に言えば、その時点で JavaScript を理解でき、使用できる人の需要が跳ね上がると予想しています。

また昨今のAIブームで、ChatGPTなどの生成AI にJavaScriptを書かせておけば良いじゃん。と言う人もいるでしょう。正直この時代に 生成AI を使わない選択肢はありません。でも「JavaScriptが分かっている人が 生成AI を使ってJS を書く& コード効率化する」のと「JavaScriptが分からない人がとりあえず生成AIでJSコード生成する」のでは、成果物に天と地ほどの差が出ます。簡単な処理なら、そんなに差はないかもしれません。でも複雑な処理になればなるほど、その差が現れてきます。それに JavaScript を理解して、生成AIを使うからこそ、差別化になって自分の強みが生まれると僕は思っています。生成AIあるから JavaScript 出来なくて良いや！ではなく、JavaScript が出来る状態で 生成 AI 使って爆速開発しようぜって話です。

この教材シリーズには、僕の5年間の Shopify と JS の知見 全部詰め込んでいます。
これを機に「Shopify x JavaScript」という貴重な人材になってください！

早速感想もいただけたので載せていきますね！

※ちなみに、この講座では AI を使ったアイデアの壁打ちはしましたが、全て自分の知識で 一語一句 自分でキーボードを叩いて書いていますのでご安心を。