エンジニアのみなさんも、そうでないみなさんもこんにちは。

突然ですが、みなさんはコーディングする時どのようなCSSのメタ言語をお使いですか？

現代の主流は、LessとSass(Sass/Scss)といわれていますが、筆者もSassを愛用しています。

そんなSassに切り替えてから筆者が感じた点をご紹介していきます。

Sassの導入記事についてはこちら↓

カラーコードなどで変数機能が活きる

Sassでは、

$○○○:△△△;　(どちらも任意)

のように最初に「$」をつけると変数として定義して記憶してくれます。

そこでこの機能が活躍するのが、カラーコードです。

#fffや#333など、単純なコードの色であればそれほど手間はかかりませんが、

自分で決定した複雑なカラーコードであると毎回コピペして…というのは面倒ですよね。

そんな時に例えば、

$orange:#FFB443

と変数orangeを設定すれば、

color:$orange

/* コンパイル後 */
color:#FFB443

と出力されます。

変数のいいところが、メンテナンス性の向上にもあります。

変数に格納すれば、#FFB443で設定している箇所を一気に変更したい時も修正が一箇所（変数の記述）だけですみます。

@mixinを用いたレスポンシブ(メディアクエリ)設定

mixinとは、@mixin ××(関数名のようなもの)と一度記述すれば、

何回でも@include ××で@mixinで記述したCSSを引用できる機能です。

しかも、引数も使うことができます。

使いこなせれば非常に便利です。

そして代表的なmixinの使い方としてご紹介したいのが、

メディアクエリをincludeで記述する方法です。

まず例として以下のようにmixinを定めます。

@mixin pc{
  @media (min-width:(800px)) {
    @content;
  }
}

モバイルファーストでWebサイトを作成した際に、

800px以上の画面幅のデバイスで閲覧した時に切り替えるメディアクエリを設定したい場合、

.title{
  margin-top:1em;
  font-size:0.8rem;
}

↓

.title{
  margin-top:1em;
  font-size:0.8rem;

  @include pc{
    font-size:1.5rem;
  }
}

と、追加すればコンパイル後は

.title{
  margin-top:1em;
  font-size:0.8rem;
}

 @media (min-width:800px){
   .title{
     font-size:1.5rem;
   }
}

と出力されます。

この記述の利点は何より、

同一のクラスのメディアクエリであればファイルの下部などではなく、ほぼ同じスペースに記述できるので、

記述の重複などのミスがなくなり、デバイスごとにクラスを探したりすることがなくなります。

筆者がSassの中で最も感銘を受けた機能かもしれません。

目的、パーツごとのファイル分けで管理できる

普通のサイトであれば、ページごとに別々のスタイルシートを読み込むのが一般的かと思います。

しかし、Sassの@import機能で一つのシートに複数のSassファイルを読み込み統合することができます。

筆者はいつも以下のように設定をしています。

header.php

style.scss

@import 'foundation/vars';
@import 'foundation/reset';
@import 'foundation/mixin';
@import 'foundation/base';

@import 'layout/header';
@import 'layout/btn';
@import 'layout/top';

まずヘッダーにはstyle.scssのコンパイル後のファイル(.cssでも.min.cssでもどちらでも可)を読み込みます。

そして、style.scssには読み込みたいファイルを全て@importして、保存をして正常に保存が完了しているか確認します。

そうすると、上から書いたファイルを順番にそれぞれコンパイルしたファイルを生成してくれるのです。

このファイル管理の仕方だと、

• ページが異なっても同じデザインのパーツを管理できる
• 命名規則をしっかり定めれば、チーム内で共有しやすい

といったようなメリットが生じます。

まとめ

いかがだったでしょうか。

今回は筆者が実際に感じたSassについてのメリットなどをご紹介しました。

今まで使ったことがない機能があった方は、ぜひ今回を機にマスターしてみてください。

こんにちは！突然ですがあなたはdlタグ、tableタグ、ul,olタグの違いを説明できますか？

明確な違いを理解して使わなければ、SEO対策がとても不利になってしまいます。

SEO対策についての記事はこちら↓

また、これらのタグはGoogleなどの検索エンジンにサイトの構造を理解させるために、表やリストが登場するサイトでは必要不可欠です。

筆者がSEO対策を練る際に得た様々な知識を本記事にまとめさせていただきました。

どのタグも見たことがない！なんて方にもわかりやすく紹介していきますね！

1. 1.最初にオススメすること
2. 2.dlタグ
3. 3.tableタグ
4. 4.ulタグ、olタグ
5. 5.まとめ

最初にオススメすること

まず、dlタグの中では項目によって<dt>や<dd>を使い分けます。

最初はdtとddどっちがどっちで、どういう意味なんだっけ？って混同しますよね。

これは略している英語の意味を覚えるのが一番わかりやすいです。

そちらも項目ごとに合わせてご説明いたします。

dlタグ

dl = definition list（定義）の略であり、定義リスト(説明リスト)のことを指します。

dlタグの中で使えるタグは、<dt>と<dd>の二つです。

dt:定義する用語（Definition Term）

dd:用語の説明（Definition Description）

使用例

定期公演について
　　開催日時：8/12 10:00～
　　開催場所：日比谷野外音楽堂

↓

<table>
  <caption>定期公演について</caption>
<dl>
  <dt>開催日時：</dt>
  <dd>8/12 10:00〜</dd>

  <dt>開催場所：</dt>
  <dd>日比谷野外音楽堂</dd>
</dl>
</table>

dtとddを横並びにしたいときは、floatなどを活用しましょう。

また、使用例のように<dt>の後に毎回：(コロン)などの一定の文字が来る場合は、dt::afterといった擬似要素でコーディングする方がスタイリッシュなコーディングになりますね！

tableタグ

tableタグの中では、<tr>/<th>/<td>を用います。

tr:テーブルの列（Table Row）

th:テーブルの見出し（Table Header）

td:テーブルのデータ（Table Data）

使用例

定期公演について

↓

<table>
  <caption>定期公演について</caption>
  <tr>
    <th>開催日時</th>
    <td>8/12 10:00〜</td>
  </tr>

  <tr>
    <th>開催場所</th>
    <td>日比谷野外音楽堂</td>
  </tr>
</table>

使い方としては、<table>の中に<tr>、<tr>の中に<th>と<td>を適宜追加していくような形です。

thやtdの個数には特にルールはありません。

また、<caption>は<table>のすぐ下に一つだけ挿入できるタグです。

tableの題名があてられるときは積極的に使いましょう。

ulタグ、olタグ

ol:順序つきリスト（Ordered list）

ul:順序なしリスト（Unordered list）

使用例

カレーの具材の種類
　・人参
　・じゃがいも
　・お肉

カレーの作り方
　1.肉と野菜を炒める
　2.カレールーを入れる
　3.とろみがつくまで弱火で煮込む

↓

<caption>カレーの具材の種類</caption>
<ul>
  <li>人参</li>
  <li>じゃがいも</li>
  <li>お肉</li>
</ul>
<caption>カレーの作り方</caption>
<ol>
  <li>肉と野菜を炒める</li>
  <li>カレールーを入れる</li>
  <li>とろみがつくまで弱火で煮込む</li>
</ol>

順序が関係ないものには<ul>、関係あるものには<ol>を用います。

本サイトの目次は<ol>で構成されています。

デフォルトの状態だと、<ul>にはlist-style-type:disc（黒点）,<ol>にはlist-style-type:decimal（半角英数字）というCSSがついております。

そのまま用いても構いませんが、黒点や数字の分の幅は考慮されずに出力されるので、CSSで調整をしましょう。

list-style-typeには色々な種類があるので、好みのものを用いてください。

まとめ

いかがでしたか？

ぜひタグを正しく使ってSEO対策をして、検索上位に出るようなサイトを作ってください。

みなさんJavaScriptをご存知ですか？

JavaScriptはWebページを動的に作ることができる言語です。

ユーザーの動きに合わせてコンテンツを表示したり、UIを変更したりする際に使われいて、WebサイトやWebアプリケーションを作る際には欠かせないものです。

JavaScriptには様々なフレームワークがあるため、一体どれから勉強すればいいのかわからない方も多いかと思います。

そんな方のために、今回はJavaScript入門者におすすめな「Vue.js」の使い方をご紹介したいと思います！

簡単なチュートリアルもあるのでよろしければ挑戦してみてください！

Vue.jsってどんなフレームワーク？

Vue.jsはとにかく「シンプル」なフレームワークです。

他のJavaScriptのフレームワークに比べて文法の制約が少なく、学習コストが低いです。そのためJavaScript入門者には非常におすすめなフレームワークになっています。

Vue.jsは初めから備わっている機能は必要最低限で、必要なものがあればパッケージを追加でインストールする必要があります。

ですが入門したてのうちは高度なパッケージが必要になることはあまりないと思うので、少しづつ慣れながら機能を増やしていけば特に問題はないかと思います。

逆に初めから大規模な開発で使う目的でJavaScriptのフレームワークを学びたい方にはあまりVue.jsはおすすめできません。

そのような方には、少し学習コストは高くなりますが、ReactやAngularJSがおすすめです。

vue-cliでなぞなぞアプリを作ろう

vue-cliをインストールしよう！

vue-cliとはVue.jsの開発を手軽に始めるための環境が備わっているシステムです。

これをインストールすることですぐにVue.jsを使うことができます。

vue-cliをインストールするためにはnpmとnodeが必要なので、もしインストールしていない方は別途インストールする必要があります。

ターミナルやコマンドプロンプトで以下のコマンドを実行し、バージョンが確認できればインストール完了です

$npm install -g vue-cli  
$vue --version
2.9.6

$vue init webpack <プロジェクト名>でプロジェクトを作成します。

今回はnazonazo_appというプロジェクト名で作成したいと思います。

$vue init webpack nazonazo_app

Project name #<エンター>
? Project description #<エンター>
? Author #<エンター>
? Vue build #standalone
? Install vue-router? #Yes
? Use ESLint to lint your code? #Yes
? Pick an ESLint preset #Standard
? Set up unit tests #No
? Setup e2e tests with Nightwatch? #No
? Should we run `npm install` for you after the project has been created? (recommended) #npmかyarn

プロジェクト作成の際に色々聞かれると思いますが、プロジェクト名やAuthorはエンターを押してデフォルトのまま、あとは上記の通りに設定してインストールしてもらえばいいかと思います。

最後のインストーラーの選択はお好みのものを選んでもらって構わないです。

ではTo get startedに従ってローカルサーバーに立ち上げてみましょう！

表示された http://localhost:8080  にブラウザでアクセスすると以下の画面が出てくるかと思います。

これでvue-cliを使う準備は完了です！

2-2. ファイルを編集してみよう！

では早速vue-cliを編集していきます！

vue-cliをエディタで開くと「src」というディレクトリがあり、そこを開くと以下のようなディレクトリ構成になっているかと思います。

このcomponentsディレクトリに入っているコンポーネントがVue.jsでは非常に便利なものになっています。

VueのコンポーネントはHTML要素をインスタンス化し、再利用可能にします。

また今回の内容には含まれていませんが、routerを使うことでコンポーネント間を簡単に遷移できます。

vue-cliをインストールした段階で入っている「HelloWorld.vue」はローカルサーバーにアクセスした際に表示されるトップページに使われています。

では試しにHelloWorld.vueを開き<template></template>の中身を全て削除してみましょう。

そうするとトップページが以下のようになるかと思います。

HelloWorld.vueに書いてあった内容がごっそり抜けてしまいました。

これでトップページにHelloWorld.vueがコンポーネントとして使われていることがわかりました。

なぞなぞを出題しよう！

ではいよいよなぞなぞアプリを作っていきましょう！

今回はHelloWorld.vueを編集してアプリの画面を作ります。

vue-cliのコンポーネントは

<template></template>

<script></script>

<style></style>

の３つに分かれていて、<template></template>の中にHTML、<script></script>の中にJavaScript、<style></style>の中にcssを書いていきます。

ちなみにstyle で、<style lang=”scss”>と指定するだけでsassが使えるようになるので、sassに慣れている方は使ってみてください。

SASSについてまとめている記事はこちら

ではまず<script></script>の中身を以下のように編集していきます。 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide_answer: true,
      true_or_false: null,
      your_answer: null,
      selected_question: null,
      questions: [
        {
          question:"リンゴとみかんと桃をトラックの荷台に積んで走っている。 このトラックが急カーブで落としたものは?",
          correct_answer:"スピード",
          explain:"カーブはスピードを落とさないと危ないから"
        },
        {
          question:"幼稚園、小学生、中学生、高校生、大学生、専門学生、大学院生。 一番大きいのは?",
          correct_answer:"幼稚園",
          explain:"幼稚園以外の選択肢は人間"
        },
        {
          question:"登山した人が必ずすることは？",
          correct_answer:"下山",
          explain:"山を登ったら山を下るから"
        }
      ]
    }
  },
  methods:{
    trueOrFalse: function(){
      if(this.selected_question.correct_answer == this.your_answer){
        this.true_or_false = "せいかい！！！"
      }else{
        this.true_or_false = "はずれ"
      }
      this.hide_answer = false
    }

  },
  mounted: function(){
    var random = Math.floor( Math.random() * this.questions.length );
    this.selected_question = this.questions[random]
  }
}
</script>

dateの中では変数を定義しておきます。

hide_answer: true →trueの時に解答を表示しないようにします。

true_or_false: null →解答が正解かはずれかを出力します。

your_answer: null  →入力された回答がバインディングされます。

selected_question: null →questionsからランダムに選択された問題が代入されます。

questionsにはなぞなの問題文、答え、解説を入れておきます。

trueOrFalseメソットは「答える」ボタンが入力された時に発火します。

dataの中の値を参照するときはthisをつけます。このメソットでは、入力された回答と問題の答えが一致してるかを確認し、一致していれば「せいかい！！！」を表示し、正しい解答と解説を表示します。

一致していないときは「はずれ」を表示し、同じく正しい解答と解説を表示します。

mountedの中に書かれた処理はページが読み込まれるたびに実行されます。

mountedの中ではquestionsからランダムに問題を選んで、selected_questionに代入しています。

<style></style>の中身は以下のように編集します。

<style scoped>
input{
  border: solid 1px black;
}
.hide{
  display: none;
}
</style>

デフォルトのcssとほぼ変わりないですが、

.hide{
  display: none;
}

で正誤と正しい解答・解説を隠しているところが重要なポイントです。

最後に<template></template>の中身です。

<template>
  <div>
    <p>問題</p>
    <p>{{selected_question.question}}</p>
    <p>回答</p>
    <input type = "text" v-model = "your_answer"><br>
    <input type="button" value="答える" @click="trueOrFalse()">
    <div :class = "{hide:hide_answer}">
      <p>{{ true_or_false }}</p>
      <p>答え：{{ selected_question.correct_answer }}</p>
      <p>解説：{{ selected_question.explain }}</p>
    </div>
  </div>
</template>

templateではます、テキストボックスに入力された値で「v-model」でdataの中にあるyour_answerをリアルタイムで書き換えています。

これはVue.jsで大活躍する「双方向データバインディング」という機能です。データの変更をUIにリアルタイムで反映させることができるため、動的なWebページを作る際に非常に便利です。

@clickではボタンがクリックされた時にtrueOrFalseメソットが呼び出されるようになっています。

その下にある「:class = “{hide:hide_answer}”」は少し見慣れない書き方ですが、これもVue.jsの便利な機能です。

これは「dataにあるhide_answerがtrueの時、hideクラスが付与される」という意味です。

hide_answerの初期値はtrueになっており、hideクラスが付与された状態のため、ページが読み込まれた時点では正誤や解答・解説は隠れている状態です。

「答える」ボタンが押された時にtrueOrFalseメソットによってhide_answerがfalseになるとhideクラスが外れるため、正誤と解答・解説が表示されるようになるという仕組みです。

Javascriptでは　{{}} の中身に変数を入れることでhtmlに埋め込むことができます。

<script></script>に書いたmounted内の処理のおかげでページを読み込むたびにランダムで問題が選択されるので何度かリロードしてみてください。

これでなぞなぞアプリの完成です！

最後に

いかがでしたでしょうか。Vue.jsとvue-cliを使えば少ないコードで簡単なwebアプリを作ることができます。

vue.jsには他にも便利な機能がたくさんあるので、これを機にVue.jsに挑戦してみてはいかがでしょうか？