『Shopify x JavaScript を学ぶ』 Vol.2 JavaScriptを使って使って使う UI実装編 #ShopifyJS [テキストのみ講座]
『Shopify x JavaScript を学ぶ』 Vol.2 JavaScriptを使って使って使う UI実装編 #ShopifyJS [テキストのみ講座]
![『Shopify x JavaScript を学ぶ』 Vol.2 JavaScriptを使って使って使う UI実装編 #ShopifyJS [テキストのみ講座]](http://daily-trial-pocket.com/cdn/shop/files/2.png?v=1765400779&width=800)
講座の内容
- ShopifyJS 第2弾 のUI実装 制作物
- JavaScript 超重要なところ基礎 5個だけ！ [第二弾版]
- JavaScript でUI実装 [自分で実装]
- JavaScript でUI実装 [ライブラリ使用で実装]
- JavaScript でUI実装 [ライブラリ+自分で実装] の雰囲気
『Shopify x JavaScript を学ぶ』 Vol.2 JavaScriptを使って使って使う UI実装編 #ShopifyJS
こんにちは。Shopify x JavaScript を学ぶシリーズの Vol.2 へ、ようこそ。
以前の「Vol.1 JavaScriptの基礎」の教材をまだ見ていないよって方は、こちらから。
ShopifyJS Vol.1 リンク
JavaScriptがなぜ大事なのか。『この時代に Shopify x JavaScript を学ぶ意義』などは全て上記の #ShopifyJS 第1弾の冒頭に書いています。興味ある方、忘れちゃった方はぜひ！
※ Shopify x JavaScript シリーズは全3回を予定しており、今回はその2つ目の教材（第二弾）になります。
こんな方にオススメ
- Shopify と Liquid は、できるようになってきた。でも JavaScript って難しそうだから、手が出せていない。
- JavaScript 少しはじめて見たけど、全然意味がわからない。。
習得できるスキル
- Shopify で JavaScript を使う方法がわかる
- 最短で JavaScript の基礎が学べる
- Shopify上で 自作セクションを実装できる
- Shopify上で ライブラリを使ったセクションを実装できる
- Shopify上で ライブラリ x 自作実装の雰囲気を知れる
講座内容
構成としてはこのようになっています。
- ShopifyJS 第2弾 のUI実装 制作物
- JavaScript 超重要なところ基礎 5個だけ！ [第二弾版]
- JavaScript でUI実装 [自分で実装]
- JavaScript でUI実装 [ライブラリ使用で実装]
- JavaScript でUI実装 [ライブラリ+自分で実装] の雰囲気
実際にどのような実装をしていくんだろう？あまりイメージ湧かないですよね。こんなの作るよ！というのがあった方が分かりやすいと思うので、早速今回の講座で作る UI一覧をみていきましょう💪
Shopify UI実装① トップへ戻るボタン
Shopify UI実装② ファーストビューに時差式で順番に画像を表示していく
Shopify UI実装③ 画像フェード切り替えセクション
Shopify UI実装④ スライダーセクション
Shopify UI実装⑤ スライダーセクション（自動再生&ふわっと）
Shopify UI実装⑥ ドラッグで流れるスライダーセクション
Shopify UI実装⑦ スクロールでふわっと表示
Shopify UI実装⑧ タイピングしている風にテキスト表示
Shopify UI実装⑨ スライダーやタイピング風、ふわっと表示を使ったFVセクション
どうだったでしょうか？？
こんなの作れるのか！とワクワクしてくれましたか？
ちなみに全て Shopify用のセクションコードとして書いていくので、コピペで実務で使っていただいて問題ございません！
※1 ちなみに、この記事では AI を使ったアイデアの壁打ちはしましたが、全て自分の知識で 一語一句 自分でキーボードを叩いて書いていますのでご安心を。
※2 今回は実務で使えるセクションが9つあるため、1セクション1,500円(税抜) を想定した金額とさせていただいています。
講座提供者
デイトラShopifyコース, Shopifyアドバンスコースメンター。「Howdy顧客タグ割引アプリ」「Howdyセット販売アプリ」などHowdy Shopify Appシリーズ開発者。Shopify専門のフリーランスエンジニア歴 5年半。沖縄に移住してフリーランスエンジニア、個人開発をしながら、University of York Master of Computer Science も卒業。
受講要件
- Shopify と HTML/CSS/Liquid は軽く理解しており、テーマ開発において JavaScript を使っていきたいと考えている人
よくある質問
JavaScriptを学習したことがないのですが、受講できますか？
JavaScript学習したことがない方、もしくは、JavaScript学習で挫折してしまった方向けの内容となっておりますので、問題ございません。
Shopifyを知らないのですが、受講対象ですか？
ShopifyとHTML/CSS/Liquidを先に学んでから受講されることをおすすめします。
すでに他のプラットフォームで同じShopifyJSのVol.2を購入しました。同じ内容ですか？
はい、こちらは他のプラットフォームで購入されたものと同じ内容となっております。
ShopifyJSのVol.1を購入していないのですが問題ないですか？
こちらはVol.1 を購入している方に向けて書いている教材になります。ぜひVol.1の後に学習されることをおすすめします。
![『Shopify x JavaScript を学ぶ』 Vol.2 JavaScriptを使って使って使う UI実装編 #ShopifyJS [テキストのみ講座]](http://daily-trial-pocket.com/cdn/shop/files/2.png?v=1765400779&width=1445)