js

そろそろ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

もっと見る

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の設定内容になります。

もっと見る

JavaScriptライブラリデータベースのご紹介

  • 2019-03-28  最終更新日:2019-03-28

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。

どのJSライブラリが人気かそしてトレンドになっているかがわかるサイトになっております。 ライブラリのジャンル分けもされており、どのような目的で使われているかもわかるところが良いですね。

そして使い方やそのライブラリのサイト案内もされておりとても良いですね。

もっと見る

指定数値までカウントダウンアップアニメーションjQuery countTo

  • 2018-04-29  最終更新日:2018-04-29

数値をカウントアップやカウントダウンのアニメーションを簡単に行うことができるプラグインのご紹介です。data属性で指定できて簡単そうなものを選びましたがすでに3年前のものですね。同じ名前のプラグインがありますがこちらの方が使いやすかったので選びました。あまり有名ではなさそうです。ですが機能は豊富でいろいろと使えそうです。

以下は同じようなカウントアニメーションができるタイプのものです。countUp.jsが有名どころでしょうか。

もっと見る

javascriptでモバイル判定

  • 2018-04-22  最終更新日:2018-04-22

ワードプレスにもwp_is_mobile()という関数がありますが「スマートフォン」と「タブレット」が一緒にモバイルと判定されているかなりざっくりな処理なので同じようにjavascriptでもざっくり判定を作成してみました。PCとそれ以外という感じだと思っていただければわかりやすいと思います。

アンドロイドやiOSなどにわかれるようにしてあります。

もっと見る

小学一年生のためのひらがなカタカナ神経衰弱

  • 2017-12-02  最終更新日:2018-01-05

私の娘は遊ぶことが大好きです。でいつも何して遊ぶが口癖になっているほど遊びが大好き、当然勉強は嫌い。。。それでゲーム感覚で勉強が出来る方法がないかと思案したわけですが、カードゲームが好きなのでカードゲームに勉強の要素を付け足してみた次第です。

スマホやタブレットなどがあればかなり有効です。

もっと見る

電話番号の正規表現をJavaScriptを使ってチェック

  • 2017-08-19  最終更新日:2017-08-19

さて今回はフォームの中での電話番号正規表現についてご紹介します。

電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回はハイフンありなしどちらでもいけるようにします。

チェックするプログラムはJavascriptです。jQueryでも良いですね。

もっと見る

ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

  • 2017-06-03  最終更新日:2017-06-04

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。

CSSのフレームワークBootstrap3をお使いの方ならすんなりと入れるかと思います。下記は公式サイト

Validator, for Bootstrap 3

このプラグインは、Bootstrapの中核となるjQueryプラグインに依存しています。bootstrap.jsと一緒に使います。 Validatorプラグインは、主にHTML5の標準属性を介して設定可能な自動フォーム検証を提供します。誰も不気味なフォームを好きではないので、邪魔にならないユーザーエクスペリエンスも提供します。

特徴としてはdata-apiと標準のHTML5属性を使用して設定可能、エラーを通知し、エラーが解決されたことを知らせる、フォームが有効で、すべての必須フィールドが完成するまで、送信は無効です、カスタマイズ可能なエラーメッセージ、 カスタムバリデータ関数、AJAXによる入力フィールドの検証です。

もっと見る

gmapにエリア範囲指定で色をつける方法

  • 2017-04-08  最終更新日:2017-04-08

今回は地図のエリア範囲を色分けしてみたいと思います。材料はgooglemapとgmaps.jsのライブラリを使います。 マーカーを置くというのはありますが、エリア内に色をつけるというのはあまりないと思いますのでご紹介します。

今回は出雲市の市町村合併の様子がわかるようにしたいと思います。平成7年度の出雲市と平成28年度の出雲市を比べてみたいと思います。

もっと見る

anime.jsの使い方

  • 2017-02-18  最終更新日:2017-02-18

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。

anime.jsはとっても軽量でかつ簡単に使えるので去年あたりから人気が出始めているライブラリです。jQuery依存もしていませんのでこのライブラリだけ読み込めばOKです。

⇒anime.js公式サイト

ブラウザサポートはChrome、Safari、Opera、Firefox、IE 10+ですのでモダンブラウザは大丈夫です。

もっと見る

親要素をクリックしたら子要素のリンクを発動させる方法

  • 2017-02-04  最終更新日:2017-02-04

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。

例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。

cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったのでjQueryを使ってご紹介します。

もっと見る

速さ・時間・距離の計算

  • 2017-01-14  最終更新日:2017-01-15

さて、最近は寒くなってきましたね。日本海側は大雪で大変な状態になっています。

外にも出られずちょっとした運動もしずらいですね。室内運動かジムに行くということになりますね。

そんなことを考えてたらマラソンの距離を2時間ほどで走る選手のスピードを計算したくなったので計算式に当てはめて計算してみたところ時速20kmちかくで走ります。駅伝も20kmを1時間ぐらいで距離が短い分少しスピードが速いです。一般人だと100mを15秒ぐらい走ると24kmぐらいのスピードなのでかなり全速で走っていることがわかりますね。

そういえば今年の駅伝は青山学院の3連覇の3冠はすごいですね。原監督の指導方法に秘密があるようですね。余談でした。

もっと見る

clipboard.jsの使い方

  • 2016-08-13  最終更新日:2016-08-13

今回はテキストコピーをボタンひとつで実装する方法をご紹介します。

相手にテキストなどコピーさせたい場合にとても有効です。

clipboard.jsというライブラリを利用すると一発で解決です。使い方も簡単です。ブラウザではChrome、Firefox、IE 9以上、Operaが対象となっており、Safariが対象外となっております。

こちらが公式サイトですclipboard.js — Copy to clipboard without Flash

もっと見る

CryptJSでの暗号と復元

  • 2016-07-23  最終更新日:2016-07-23

今回は暗号文を作ったりそれを復元したりするスクリプトの紹介です。

CryptJSというライブラリを使うと簡単にできます。デモサイトがありますので使ってみてください。

⇒デモを見てみる

もともとはグーグルのプロジェクトでJavaScriptの標準と安全な暗号アルゴリズムの実装crypto-jsからできています。

CryptoJSは、ベストプラクティスとパターンを使用しています。JavaScriptで実装した安全な暗号アルゴリズムのコレクションです。高速であり、一貫性とシンプルなインターフェイスを持っています。

秘密の暗号文を相手に送ったりしてそれを復元したりできます。可逆暗号化をしています。

もっと見る

日付を扱うJavascriptライブラリmoment.jsの使い方

  • 2016-04-02  最終更新日:2016-04-03

今回はJavascriptライブラリのmoment.jsのご紹介です。⇒詳しくは公式サイトにてご確認ください 現在のバージョンは2.12.0です。2016年4月現在

日付を取り扱うアプリケーションを使う場合は必須ですね、あまり使わない場合はdate関数を使っても良いのですが、日付の計算や今日が何曜日とか今年は閏年なのかとかこの日付は期間中の値なのかなど時間や日に関することならこのライブラリーに任せてしまいましょう。

カレンダーとか作る際にも役立ちそうですね。

もっと見る

Unicodeのコードから文字列変換そしてデコード

  • 2016-03-26  最終更新日:2016-03-27

文字コードをユニコードの値から文字列を出力するプログラム関数 String.fromCharCode()というのを使ってプログラムを作ってみます。

これを使うことでちょっとした暗号文が出来ます。暗号って言うほどでもないですが文字を数値に変換してくれるので数値ばかりなので普通に人には分からないと思います。

ただこの数値は分かる人には分かります。しかも文字コード表もありますから見ていけば分かります。簡易の暗号文といったところでしょうか。

もっと見る

BMI値計算プログラム

  • 2016-03-22  最終更新日:2016-03-22

健康志向のブームはいつもありますね。健康に気を使う人多いと思います。

運動してダイエットとかもそうですよね。テレビでもよくやっています。健康な身体作り。

身体が資本というのは病気になって初めて分かるものです。私もあまり運動していないので身体もたるみっぱなしで最近は完全に引きこもり生活です。パソコンでの作業が多いのであまり運動することがないのです。

座りっぱなしもよくないということなのでスタンディングワークしております。何年か前にもやりましたが1ヶ月ほどで1kgはやせました。最近はずっと立ちっぱなしで大変なのでスタンディングワークを多めで座って作業もしています。

病気をしない身体作りというのはとても良いことですね。背筋ともも肉を鍛えるとダイエットには効果的と効いたことがあります。

もっと見る

簡単にHTMLの年月日のプルダウンを作る方法

  • 2016-03-08  最終更新日:2016-04-11

よくフォームなどで年月日のプルダウンを作成するときが多いのでちょっと簡単にプルダンを作成する方法ご紹介します。

1950年から2016年までのプルダウンを書くのはとても大変なのでプログラムを書いて自動化してしまいましょう。

一度書いてしまえばあとは使いまわしていけるのでとても楽です。1〜12月と1〜31日も合わせて作っていきます。ついでに都道府県のプルダウンも作ってみましょう。

もっと見る

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
Perlで500エラー!原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ
WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ
LibSass(node-sass)からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 熊野大社 昨年同様に大晦日の夜に出発しました。子供が大...

10 Jan 2022

アイキャッチ
そろそろvuejs始める

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

02 May 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ