バニラJs | zip358.com

自サイトのバニラJS（javascript）をvue.jsへ書き換えた話．

2024.09.22

おはようございます．先日、友が東京から帰ってきてたみたいでお見上げを貰いました．いつも頂いているばかりでお返ししないといけないなって思うのですが、いつ帰って来るのかがさっぱり分からないのでお返しできないでいる．

さて、今日は自サイトのバニラJS（javascript）をvue.jsへ書き換えた話を書きます．少し前からバニラJSからvue.jsへ変更しようと思っていたのだけど、変更する意味が見いだせずにいた.

先日からReactを仕事で触りだしてなるほど、ちょっと便利かもって思い出したので勉強がてらに自サイトをvue.jsに編集しました．

自サイトの全部を置き換えていないけれど、置き換えたほうが良さげな部分は置き換えた形になります．尚、vue.jsをモジュール呼び出しで使用したい場合は呼び出す参照ファイルに下記のタグを追加すると呼び出せます．またモジュールファイルのインポートの書き方も記載しときます．参考にしてみてください．

<script src="./js/example.js" type="module"></script>

import { ref, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

明日へ続く．

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年09月22 06:00日

タグ

createApp, from, gt, import, javascript, JS, js&quot, lt, module&quot, react, ref, script src, script&gt, type, vue.js, インポート, お見上げ, バニラJs, モジュールファイル, モジュール呼び出し,

Cloudflare（クラウドフレア）良いね．

2024.04.04

Logging

おはようございます、cloudflare（クラウドフレア）というサービスをご存知でしょうか？これを使用すれば無料でサクサクっとウェブサイトやサービスが作れてしまいます．ただ、PHPなどは動かないようです、動かすことが出来るのはvue.jsやReact.js系です．当然、それらに付随するフレームワークは動きます．

自分もつい最近クラウドフレアでお試しにReact.jsを動かしてみました．

因みにReact.jsを身に付けようと思ってごりごりとコードを書いています、今までバニラjsを使っていたのでお作法を覚えるのがちょっと苦ではありますが、仕事で必要なので身につけようとしています．

当分、React.jsを覚えていたら食いっぱぐれはない言語なのかもなぁって思っています．

明日へ続く．

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2024年04月04 06:00日

タグ

cloudflare, php, React.js, React.js系, vue.js, ウェブサイト, お作法, お試し, クラウドフレア, コード, ご存知, サービス, それら, バニラJs, フレームワーク, 仕事, 苦, 言語, 身, 食いっぱぐれ,

jsのincludesっていう関数。

2024.03.13

Logging

おはようございます、jsのincludesっていう関数をつい最近しりました…。遅っ。こういう関数あるだろうなっては思っていたのですが調べようともせずバニラJsを使っていましたが、これからは便利なincludesという関数を使用していきたいと思っています。

includesの説明はchatGPTにしてもらいましたので、それをそのまま引用する形になります。includesとは特定の値が配列に存在するかどうかを判定するために使用されます。このメソッドは真偽値（trueまたはfalse）を返します。以下に、includesメソッドの基本的な説明と例を示します。

例えばこんな感じにコードを記載します。

const fruits = ['apple', 'banana', 'orange'];

const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true

const hasGrape = fruits.includes('grape');
console.log(hasGrape); // false

これどんなときに使用するか？例えばmap関数でデータをチェックし一つでもtrueが存在する場合は後続処理を行わせたいなど、いちいち配列の中を廻さなくても一行書で判断することが可能になり、とても便利かなと個人的には思います。

明日へ続く。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2024年03月13 06:00日

タグ

ChatGPT, console.log, const fruits, const hasBanana, const hasGrape, false, fruits.includes, hasBanana, hasGrape, includes, includesメソッド, JS, map関数, true, バニラJs, メソッド, 後続処理, 真偽値, 配列, 関数,