ある中卒がWeb系エンジニアになるまでと、それからのこと

うつ病で高校を中退したり、たこ焼き屋のオヤジにホームページとたこ焼きを作らされたり、そのホームページが訴えられそうになったり、弁護士を目指したりした後にエンジニアになった人が書くブログ

vueファイル内でscssとjQueryを使う

2020/06/29の日報

Hanasot開発の日報、第3日目です。
今日は

  • html, scss, jsに分かれている既存のページをvueファイルに直す
  • リセットcssを導入
  • jQueryを導入

を行いました。
時間としては、

  • Hanasot開発 60min
  • 日報ブログ 65min

です。
運動は

  • レバー・プッシュアップ 左右16repsずつ→11repsずつ→10repsずつ

です。

html, scss, jsに分かれている既存のページをvueファイルに直す

以前トンテキさんにデザインとコーディングをしていただいたトップページをvueファイルに直していきます。ご依頼段階ではLaravelで構築することになっていたので、HTML, SCSS, js(jQuery)で構成されていました。
GitLab上で「トップページを作成」というマージリクエストを作成して、ブランチを切って始めます。

f:id:chusotsuengineer:20200630000106p:plain
完成品はこちら

vueファイルは

  • template(HTMLを書くと思ってください)
  • script
  • style

という3つのタグで構成されることが多いです。
今回は「HTMLファイル」、「SCSSファイル」、「jQueryで記述されたjsファイル」の3つでトップページが構築されているので、それらを上記の3つのタグに振り分けていきます。

templateタグ内にHTMLを記述する

まずはtemplateタグ内にHTMLを書くことからですね。通常spaのvueプロジェクトだとheadタグなどはindex.htmlに記述して、bodyのコンテンツに当たる部分をvueファイルにすることになると思います。インデントや閉じタグ漏れに気をつけて書いていきましょう。 1点気をつけないといけないのが、templateタグ直下にタグは1つしか存在できないということです。
つまり

<template>
  <header>
  </header>
  <main>
  </main>
  </footer>
  </footer>
</template>

という構造はアウトです。

<template>
 <div>
    <header>
    </header>
    <main>
    </main>
    </footer>
    </footer>
 </div>
</template>  

このようにdivタグで囲うなどして対処しましょう。画像はsrc/assetsフォルダに格納して、相対パスで指定してください。

styleタグ内にscssを記述する

次にstyleタグ内にscssを記述していきます。 vueファイルでは

f:id:chusotsuengineer:20200629233530p:plain
scoped属性とlang属性をつけておく
このように、scoped属性をつけることでこのvueファイル内でのみスタイルを有効化し、lang属性にscssを指定することでscssで記述することができるようになります。
ただ、scssを適用するためにはプロジェクトに

  • node-sass
  • sass-loader

をインストールしなければいけません。

npm install node-sass sass-loader -D

を叩いてnpmでインストールしましょう。
中身は普通にscssを書いちゃってOKです。

scriptタグ内に処理を記述する

普通はvueの処理を書くのですが、今回はjQueryで既に実装済みなのでjQueryのコードを書いていきます。詳しくは下で。

リセットcssを導入

その前にリセットCSSを導入しておきましょう。今回は normalize.css を使います。

npm install normalize.css

を実行して、App.vue(起点となるvueファイル)に

<script>
import 'normalize.css';
export default {
  name: 'App',
}
</script>

と書けばOKです。

jQueryを導入

そしてjQueryですね。あんまり無いパターンかとは思いますが、使うときは使うので手順を残しておきます。
まずは

npm install jquery

ですね。これでnpm経由でjQueryがインストールされます。
その後jQueryを使いたいvueファイルで、

<script>
import $ from 'jquery'; //$でjQueryを呼び出す
export default {
  name: 'hogehoge',
}
//この下に処理を書く
</script>

としましょう。
spaなのでcreatedフックで処理を書いて、destroyで削除しないと他のページで何らかの影響が出るかもしれませんが、出たらその時対処しましょう。一旦はこれでOKです。

すべて終わったら

npm run build

からの

firebase deploy

しましょう。 ブランチをマージして今日は終わりです。

所感

ブログを書くのに時間がかかる

今日の開発は小一時間で終わるものだったんですが、日報をブログにまとめる作業がどうしても1時間程度かかっちゃいますね。
筋トレの休憩中にちびちび書き進めてはいるもののもう少し短縮したいところです。
まあ書いていくうちに早くなるでしょうから、気にしなくてもいいかなあ。