環境構築編

• DAY 1

  はじめに

  詳しくみる

  レッスンを始める
  • 目次
  • 01  学習を始める前に①
  • 02  学習を始める前に② - 上手に質問するためのポイント
  • 03  学習を始める前に③ - 解説動画を見やすくする方法
  • 04  学習を始める前に④ - スポンサー企業様を紹介
  • 05  学習を始める前に⑤ - デイトラコミュニティのご紹介
  • 06  Google Chromeをインストールしよう！
  • 07  Shopifyの開発ストアを作成しよう！
  • 08  アカウントの種類を学ぼう！
  • 09  「Hello World!」を表示させてみよう！
  • 10  デイトラ学習に参考になる記事や動画のご紹介！
• DAY 2

  ローカル開発環境を構築しよう①

  詳しくみる

  レッスンを始める
  • 目次
  • 01  開発学習用テーマをセットアップしよう
  • 02  ストアデータをインポートしよう①
  • 03  ストアデータをインポートしよう②
  • 04  VSCodeと拡張機能をインストールしよう
  • 05  【参考】Shopifyデベロッパーの言語学習の順序について
• DAY 3

  ローカル開発環境を構築しよう②

  詳しくみる

  レッスンを始める
  • 目次
  • 01  Shopify CLI インストール準備
  • 02  Shopify CLIをインストールしよう
  • 03  Shopify CLI コマンドの使ってみよう！
  • 04  ローカル開発環境とライブテーマ・その他のテーマとの関係

基礎知識編

• DAY 4

  テーマのディレクトリー構造を学ぼう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  Shopifyテーマの概要
  • 02  テーマのフォルダ構造とファイルについて
  • 03  学習環境を準備しよう
  • 04  レイアウトファイルを理解しよう
  • 05  テンプレートファイルを理解しよう
  • 06  セクションファイルを理解しよう
  • 07  ブロックファイルを理解しよう (最新 Shopify Editions 25 Win 〜 )
  • 08  スニペットファイルを理解しよう
  • 09  コンフィグファイルを理解しよう
  • 10  アセットファイルを理解しよう
  • 11  ロケールファイルを理解しよう
  • 12  おさらいとコードの関係
• DAY 5~7

  OS1.0からOS2.0へ移行する方法を学ぼう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  OS1.0からOS2.0の移行の全体像
  • 02  OS 2.0の開発準備
  • 03  各テンプレートファイルとサイトマップ
  • 04  404ページ
  • 05  固定ページ
  • 06  問い合わせページ
  • 07  問い合わせフォーム
  • 08  商品詳細ページ
  • 09  コレクションページ
  • 10  コレクションリストページ
  • 11  カートページ
  • 12  ブログページ
  • 13  ブログ記事ページ
  • 14  検索ページ
  • 15  ホームページ（TOPページ）
• DAY 8

  セクショングループについて学ぼう！

  詳しくみる

  レッスンを始める
  • 目次
  • 01  セクショングループを学ぼう
  • 02  ヘッダーセクショングループを作ろう
  • 03  フッターセクショングループを作ろう

Liquid編

• DAY 9

  Liquidの基礎

  詳しくみる

  レッスンを始める
  • 目次
  • 01  Liquidの基礎を学ぼう
  • 02  Liquid 構文について
  • 03  Liquid 基礎知識について
  • 04  Liquid学習用のテーマを準備をしよう
• DAY 10

  オブジェクトについて学ぼう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  オブジェクトとは
  • 02  オブジェクト学習の準備をしよう
  • 03  シンプルプロパティを学ぼう
  • 04  コレクションプロパティを学ぼう
  • 05  リレーションプロパティを学ぼう
  • 06  グローバルオブジェクトを学ぼう
  • 07  各オブジェクトを学ぼう
• DAY 11

  【追加】オブジェクトを使った実践カスタマイズに挑戦してみよう！

  詳しくみる

  レッスンを始める
  • 目次
  • 01  テンプレートオブジェクトを呼び出して表示してみよう
  • 02  問い合わせフォームをアレンジしてみよう-オブジェクト編-
  • 03  カートへ商品を直接追加できる「パーマリンク」を作成してみよう
  • 04  購入完了メールを変更してみよう
• DAY 12

  タグについて学ぼう -条件編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  タグの全体概要
  • 02  条件分岐を学ぼう
  • 03  ローカルの学習環境を準備しよう
  • 04  If文を学ぼう
  • 05  elsif を学ぼう
  • 06  else を学ぼう
  • 07  Unless文を学ぼう
  • 08  Case 文を学ぼう
  • 09  And と Or (複合条件文)を学ぼう
• DAY 13

  タグについて学ぼう -繰り返し編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  繰り返し文を学ぼう
  • 02  For文を学ぼう
  • 03  繰り返し文のパラメーターを学ぼう
  • 04  Forloopオブジェクトを学ぼう
  • 05  ページネーションを学ぼう
• DAY 14

  タグについて学ぼう -変数・テーマタグ編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  変数を学ぼう
  • 02  Assignを学ぼう
  • 03  Captureを学ぼう
  • 04  decrement increment を学ぼう
  • 05  Theme Tags（テーマタグ）
  • 06  renderタグを学ぼう
  • 07  sectionタグを学ぼう
  • 08  js・styleタグを学ぼう
• DAY 15

  【追加】タグを使った実践カスタマイズに挑戦してみよう！

  詳しくみる

  レッスンを始める
  • 目次
  • 01  問い合わせフォームをアレンジしてみよう -タグ編-
  • 02  Googleなどの検索エンジンにページが表示されないようにしよう
  • 03  「商品タグ」を使って自由に表示をコントロールしよう
  • 04  コレクションページの並び替えの各項目を非表示にしてみよう
• DAY 16

  フィルターについて学ぼう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  フィルターを学ぼう
  • 02  文字列関連フィルター
  • 03  数値関連フィルター
  • 04  配列関連フィルター
  • 05  【追加】Liquidで配列を扱うための新しいフィルター「find」「find_index」「has」「reject」
  • 06  画像・ファイル関連フィルター
  • 07  その他の主なフィルター
• DAY 17

  【追加】フィルターを使った実践カスタマイズに挑戦してみよう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  セール商品に割引率を表示させてみよう
  • 02  ラベルを表示させてみよう
  • 03  配列の作り方を学ぼう

JSON・Schema編

• DAY 18

  JSON・Schema ついて学ぼう

  詳しくみる

  レッスンを始める
  • 目次
  • 01  テーマの全体像から見るJSONとSchemaについて
  • 02  学習環境を準備しよう
  • 03  JSONについて学ぼう
  • 04  Schema について学ぼう
• DAY 19

  Schemaの設定について学ぼう -基本の入力設定 -

  詳しくみる

  レッスンを始める
  • 目次
  • 01  Schemaの設定について学ぼう
  • 02  サイドバー設定について
  • 03  テーマにおける入力設定について
  • 04  基本の入力設定 全体概要
  • 05  論理的設定
  • 06  数値入力設定
  • 07  テキスト入力設定
• DAY 20~21

  Schemaの設定について学ぼう -特殊な入力設定① -

  詳しくみる

  レッスンを始める
  • 目次
  • 01  Specialized Input Settings 全体概要
  • 02  学習環境を準備しよう
  • 03  ブログ記事設定
  • 04  ブログ設定
  • 05  コレクション設定
  • 06  コレクションリスト設定
  • 07  商品詳細設定
  • 08  商品リスト設定
  • 09  ページ設定
  • 10  メニュー設定
  • 11  リンク設定
• DAY 22

  Schemaの設定について学ぼう -特殊な入力設定② -

  詳しくみる

  レッスンを始める
  • 目次
  • 01  テキスト概要 全体像
  • 02  学習環境を準備しよう
  • 03  インラインリッチテキスト設定
  • 04  リッチテキスト設定
  • 05  インプットテキストアライン設定
• DAY 23~24

  Schemaの設定について学ぼう -特殊な入力設定③ -

  詳しくみる

  レッスンを始める
  • 目次
  • 01  視覚的なカスタマイズに関する設定
  • 02  学習環境を準備しよう
  • 03  カラー設定
  • 04  背景色設定
  • 05  カラースキーム設定
  • 06  フォントを設定
  • 07  画像を設定
  • 08  ビデオ設定
  • 09  ビデオURL設定
• DAY 25

  Schemaの設定について学ぼう -特殊な入力設定④ -

  詳しくみる

  レッスンを始める
  • 目次
  • 01  高度なカスタマイズ
  • 02  HTML設定
  • 03  LIquid設定
  • 04  メタオブジェクト設定
  • 05  メタオブジェクトリスト設定
  • 06  さいごに

オリジナルセクションを作ってみよう

• DAY 26

  【追加】オリジナルセクションを作ろう -基礎編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  セクションの基礎
  • 02  開発環境を準備しよう
  • 03  オリジナルセクションのベースを作成しよう
  • 04  オリジナルセクションのCSS設計を学ぼう
  • 05  スペーサーを作ってみよう
  • 06  上下の余白を設定しよう
  • 07  本番環境へ反映させよう
• DAY 27

  【追加】オリジナルセクションを作ろう -セクション編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  HTMLにLiquidを組み込もう
  • 02  Schemaを設定しよう
  • 03  テーマの既存のクラスを使ってみよう
  • 04  Newsセクションのタグのカラーを実装しよう
  • 05  本番環境へ反映させよう
  • 06  【自由課題】セクション設定での応用
• DAY 28

  【追加】オリジナルセクションを作ろう -セクションブロック編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  ブロックの概要
  • 02  セクションブロックを設定しよう
  • 03  セクションブロックを作成しよう
  • 04  ブロック化するための調整をしよう
  • 05  本番環境へ反映させよう
• DAY 29

  【追加】オリジナルセクションを作ろう -テーマブロック編-

  詳しくみる

  レッスンを始める
  • 目次
  • 01  テーマブロックについて
  • 02  テーマブロックを設定しよう
  • 03  テーマブロックをセクションに組み込もう
  • 04  本番環境へ反映させよう
  • 05  オリジナルセクションのまとめ
  • 06  さいごに