ホームページ制作・Web制作・Web集客のことならITS｜鳥取県米子市

そろそろvuejs始める

2021-05-02 最終更新日:2021-05-02

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。

3大フレームワークと呼ばれているReact（facebook）、Angular（google）、Vue（Evan You）とvueだけ個人開発です。2014年にリリースされた後発のJavaScriptフレームワークですがとっつきやすさは一番かと思います。実はReact、Angularも構ってみましたが敷居が高い気がします。すぐに試せるVueはおすすめです。

現バージョンは2.6.12、バージョンv3.0.11 コードネームは日本の漫画が多いです。

2020.9.18 v3.0.0 One Piece：ワンピース
2019.2.5 v2.6.0 Macross：超時空要塞マクロス
2017.10.13 v2.5.0 Level E：レベルE
2017.6.13 v2.4.0 Kill la Kill：キルラキル
2017.4.27 v2.3.0 JoJo’s Bizarre Adventure：ジョジョの奇妙な冒険
2017.2.26 v2.2.0 Initial D：頭文字D
2016.11.23 v2.1.0 Hunter x Hunter：HUNTER×HUNTER
2016.10.1 v2.0.0 Ghost in the Shell：攻殻機動隊
2015.10.27 v1.0.0 Evangelion：新世紀エヴァンゲリオン
2015.6.13 v0.12.0 Dragon Ball：ドラゴンボール
2014.11.7 v0.11.0 Cowboy Bebop：カウボーイビバップ
2014.3.24 v0.10.0 Blade Runner：ブレードランナー
2014.2.15 v0.9.0 Animatrix：アニマトリックス
Vue.js

追い風CSS（tailwindcss）が結局楽かも

2021-04-29 最終更新日:2021-04-29

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。時は過ぎいろいろと触っているとなんだかんだでtailwindの方が楽なんじゃないかと思った次第です。

なぜかというとbootstrapで書いても結局自前でCSSを記載していくことになります。かなり手間と時間もかかります。 Tailwindならクラス名とか考えなくて良いし、htmlにタグをどんどん入れていくだけで割と出来てしまうので、それならと導入してみたら結果良かったので紹介します。まだ慣れが必要ですが結構気に入りました。bootstrapのgrid + tailwindcssにして使ってます。

現バージョンはv2.1.2

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

エラー処理について

2021-01-24 最終更新日:2021-01-24

COJPドメンを取得する際に「登記年月日」という項目があります。その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。半角英数字にして下さいというよくあるエラーです。当然半角英数字で入力しているのに。。

わからないのでサポートに聞いてみました。

javascriptのundefinedの判定

2021-01-17 最終更新日:2021-01-18

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示されるのでその高さを取得します。それから固定ヘッダーの高さも取得してその高さを計算します。

let adminBar_height = $('#wpadminbar').height();
let navBar_height = $('.navbar').height();
const sum = adminBar_height + navBar_height;
console.log(sum); // undefined;

この式でアドミンバーが必ずあるわけじゃないのでundefinedになることに気がつきませんでした。。

Webpack5にアップデートしてエラーの対処方法2つ

2021-01-09 最終更新日:2021-01-24

webpack4（4.41.5）から webpack5（5.12.1）にあげました。特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たのでエラーとともに対処方法ご紹介いたします。変更箇所はwebpack.config.jsの設定内容になります。