初心者shopify構築者のコード解説
阿部隆宗てっきり僕はShopifyでプログラミングコードを知らないでもいいと思っていたんですが、
ちょっとフォントサイズを変えたりするだけでもコードを駆使しないといけない場面に直面しました。
そこでいろいろ学習したのですが、
そのことをここでシェアしたいと思います。
Shopifyで使われている言語「Liquid」
Shopifyは独自の言語を使っています。
その言語の名はLiquid。
テンプレート言語です。
テンプレート言語とは、
マークアップ言語とプログラミング言語の間の言語のことです。
マークアップ言語とは、文章の構造や意味を定義する言語です。
代表例は「HTML」です。
プログラミング言語はコンピューターに具体的な命令を下す言語のことです。
代表例はいろいろあるのでざっと紹介します。
javascript,python,java,C++,etc...
テンプレート言語は構造を定義するHTMLと、処理を定義するプログラミング言語の間に位置します。
つまりHTMLに加え、
- データの埋め込み
- 条件分岐
- ループ処理
などの処理を可能にしたのがテンプレート言語ということです。
つまりはHTMLとプログラミングの両方を知る必要があるということです。
はい、気が遠くなってきますね。
とりあえずできるところから解説していきます。
{} ； ：
基本中の基本。
{} で囲まれたものは一つのグループとして扱います。
h2{font-size:3rem;
color:blue;}
は
- 大見出し(h2)の
- フォントサイズを30pxにしろ
- そして色は青
という意味です。
途中で ；（セミコロン）と ：（コロン）が出てきましたね？
これにもそれぞれ意味があります。
：（コロン）は
プロパティ：値
のように分ける働きがあります。
プロパティとは情報の種類の名前であり、値はその具体的な内容です。
例えば
color:blue;
は文字の色（color)は青(blue)という意味であり、
色がプロパティ、青が値となります。
そして；（セミコロン）は複数の条件を一つのグループとしてまとめるときに使います。
｛プロパティ：値；
プロパティ：値；｝
のようにまとめるときに使うわけですね。
半角スペースの扱い
じつはプログラミングにおいて半角スペースは基本的に、
コードに影響を与えません。
なので
h2{font-size:16px;
color:red;}
と
h2 {font-size : 16px ;
color :red; }
はまったく同じ働きをするわけですね。
しかし実際にはこんな風には記述されません
h2{
font-size:16px;
color:red;
}
たいていはこんな風にそろえて記述されます。
なぜでしょう？
それは人間の可読性を上げるためです。
結局コードを書くのも修正するのも人間ですから、
このようにそろえておかないと後で大変な目にあいます。
<div></div>
{}と同様に、これもグループ化のためにあります。
{}よりも大きな箱だと考えてください。
<div>から始まり、
</div>で一つのブロックが終わります。
Shopifyで、例えば外国式の住所を日本式に変えたいときなどに、
<div>単位でコードを操作します。
<div>から</div>をまとめて選択し、カットして順番を入れ替えるわけです。
!=
=
は両辺が等しいというのは誰でもわかりますが、
「!=」 というのは見慣れない演算子ですね？
これは両辺が等しくない、という意味です。
こんなものが何に使われるのかというと、実際よく使います。
A != blank
はAは空白ではない、という意味です。
なにか入力することが必須の欄、例えば名前とかクレジットカード情報とかそういうのを記入し忘れていますよ、
とかそういうときに使います。
とりあえず今日はこんなところです。
