どうも、カムノです。

はじめまして。

開発をとりまとめています。

つまりこの会社の肝(キモ)です。

今後の私の動向に注目してください。

 

 

このCHEATのサイトは私が半分ぐらい作っています。

まだどんどん改善したいところや作りたいページがあるのですが、
色々あるなあと思いつつ、まだ着手できていません。

 

そのCHEATホームページですが、Vue.jsを使って作成しています。

 

Vue.js とは?

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

 

ね? 全くわかりませんね。

そういった方のために、Vue.js布教を目的として、今回記事を書いてみたいと思います。
そのため、ノウハウとかは実は全然ありません。
今後詳しく解説などもしていければなと思っています!

Vue.jsはまだトラブル解決の記事なども少なく、phpなどの歴史のある言語と比べるとまっだまだだな〜という感じかと思います。

少しでもユーザーが増えて、Vue.js使いが増えれば幸いです。

 

 

作り方のイメージとしては、それぞれのセクションがコンポーネントになっていて

図で表すとこんな感じです。
分かりづらいですよね。

 

実際のコードの様子

今回CHEATホームページで使ったコードの一部は、この様な形。

ページには、コンポーネントを以下のように並べるだけです。
(コードの完成形はこうなります。
非常に管理しやすいと思いませんか?)
※CSS部分は外しています!

 

この上のコードで、CHEATのTOPページができあがります。

 

もちろんこれだけでは中身がありませんので、各コンポーネントを作成しています。

各パーツ部分は・・・

【html自体】

 

【script部分】

このようなコードを、importしている数だけ用意しなければなりません。

 

また全ページで使う共通処理は、Mixinをつかって各コンポーネントに継承させています。

 

ね、簡単でしょ?

ちなみに、レスポンシブ対応はウィンドウサイズから自動計算したフォントサイズをベースに指定することで、remで指定した要素が勝手に調整される仕組みです。

この仕組みがあれば、例えばマーケティング観点でどうしても文字列を段落ちさせたくない時などに、自動計算して段落ちしないようにしてくれるので、LP制作の時とかに便利かもしれません。

 

 

ひとまず、以上で説明終わり!

Vue.jsの魅力を1%でも伝えられたのかどうかわかりませんが、今後はVue.js使いの人にも頼ってもらえるようなトラブル解決方法や、ノウハウを伝えていければと思います。

今までhtml/css中心のマークアップで構築していた方には、もちろん少し取り組みづらい構築の仕方になるのですが、慣れれば強力な武器になると思います。
(年収が上がるのでは)

どんどん新しい技術が出るweb/プログラムの世界なので、新しいことにチャレンジしていきましょう!!!

 

 

そんな中、私も実はもう1つ今取り組んでいることもありますので、これもまた随時公開していきたいと思います。

では、また・・・

まとめ

SHARE

kamuno
TEXT BY kamuno

RECOMMENDED POSTこの記事もおすすめ!