- 1. excel 風jsライブラリ
- 2. 【JavaScript】関数とオブジェクト⑰ super
- 3. 無料のナビゲーションライブラリ
- 4. Azure IoT Hub と Azure Functions と LINE Notify による通知を組み合わせる（簡単な動作テスト）
- 5. Azure IoT Hub へのデータ送信と Azure Stream Analytics による可視化の下準備を試す（公式ドキュメントやサンプルをピックアップしつつ）
- 6. javascript演習 １１日目/３０日
- 7. 【学習記録⑮】Vue Routerを用いてURLごとに表示を切り替えてみる！
- 8. JavaScriptのthisを理解する
- 9. はじめてのJavaScript⑯「関数リテラル」
- 10. pythonが好きなjavascript使いが喜びそうなat()メソッド
- 11. 【Vue / Nuxt】inputコンポーネントにenterでフォーカス移動する
- 12. 【学習記録⑭】transition-groupを用いてリストのトランジションを実装する！
- 13. Next JS での TypeError: Failed to construct 'URL': Invalid URL
- 14. 最近webpackで環境構築したので利用したプラグインまとめてみた
- 15. 【学習記録⑬】カスタムトランジションクラスとAnimate.cssを用いてアニメーションを実装する！
- 16. JavaScript メモ ：定数、変数
- 17. はじめてのJavaScript⑮ 「function命令」
- 18. Javascriptのイテレータとジェネレーターを簡単に触ってみた
- 19. React-Hook-Formの使い方（Part2：RHFとyupでバリデーション）?
- 20. React-Hook-Formの使い方（Part1：RHFだけでバリデーション）?
excel 風jsライブラリ
excel 風 jsライブラリのまとめ
* SpredJS https://www.grapecity.co.jp/developer/spreadjs (commercial)
* slickgrid https://github.com/6pac/SlickGrid (MIT)
* hansontable https://handsontable.com/ (commercial/MIT)
* jspreadsheet https://bossanova.uk/jspreadsheet/v4/ (MIT)
【JavaScript】関数とオブジェクト⑰ super
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/3cb497a27e534f20d5c1
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.supersuperとは継承元の関数を呼び出すキーワード
####例1
superの使用例
“`js
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}hello() {
console.log(‘hello ‘ + this.name);
}
}class Japanese extends Person {
constructor(name, age, gender)
無料のナビゲーションライブラリ
2021年に、いくつかの人気のあるライブラリとナビゲーションビルダープラグインをWebサイトに導入しました。
#Webナビゲーションとは何ですか？
ナビゲーションはWebサイトの不可欠な部分であり、その主な機能は、ユーザーがWebサイトの主要なセクションに簡単に移動できるようにすることです。 ナビゲーションを設計する際の最初の条件は、ユーザーが簡単にアクセスして使用できることです。 次に、より便利な機能と美しいデザインを組み合わせます。#Vertical Fixed Navigation
垂直ナビゲーションをすばやく簡単に作成できます。 これにより、ユーザーはページのコンテンツをより一般的に表示し、サイトのセクションにすばやく移動できます。 右側の各ボタンにカーソルを合わせると、重要な情報が自動的に表示されます。 私が気に入っているのは、コンテンツを編集し、各ナビゲーション要素のスタイルを設定する方法の詳細な手順です。
そして、その後に調査をしていた際に以下の記事を見かけました。
– [Azure IoT Hubで受け取ったデータを利用する方法（Azure function） – Qiita](https://qiita.com/kmaepu/items/016608d1b810a9bd6470)
つい最近、以下のようなことをやっていたのがあり、ふと上記の 2つの内容を組み合わせたものを動かしてみたいと思って、今回の記事の内容を試しました。
– [Azure Functions と LINE Notify の組み合わせ（Node.js を利用、ポータルで開発） – Qiita](https://qiita.com/youto
Azure IoT Hub へのデータ送信と Azure Stream Analytics による可視化の下準備を試す（公式ドキュメントやサンプルをピックアップしつつ）
公式ドキュメント等を見ながら、Azure IoT Hub を試していきます。
（参照した公式ドキュメント・サンプルの情報は、記事の中に記載していきます）## リソースの作成とデバイス登録
以下の公式ドキュメントの「IoT Hub の作成」・「IoT ハブに新しいデバイスを登録する」の項目の内容を進めていきます。●Azure Portal を使用して IoT Hub を作成する | Microsoft Docs
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-create-through-portal以下は、IoT Hub のリソース作成が完了した後です。
そして、試していく。 pic.twitter.com/TJAPpocM28
— you (@youtoy
javascript演習 １１日目/３０日
覚えたこと
splice()とslice()の違い
・spliceメソッドを使うと元になった配列要素が変更されてしまう
sliceメソッドは元の配列を変更しない
・slice()は文字列型のメソッド“`javascript
arr.slice([start[, end]])
splice(start, deleteCount)
“`配列の最後から一定数文字を取得して、
配列をつなげて、特定の文字が含まれてるかどうか調べる“`javascript
arr.splice(-secretCode.length -1 , pressed.length – secretCode.length);
if(arr.join(”).includes(secretCode)){
}
“`
【学習記録⑮】Vue Routerを用いてURLごとに表示を切り替えてみる！
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はVue Routerを用いてページごとに表示を切り替える方法について記載していきます。## Vue Router
`Vue Router`はVue.jsにおいてルーティングを制御するためのライブラリです。https://next.router.vuejs.org/
※現在僕の学習環境はVue.js 3のため、Vue Routerのバージョンは4で動作確認をしています。
## セッティング
まずはVue Routerをインストールします。“`console
npm install vue-router@4
“`https://next.router.vuejs.org/installation.html
## ルートファイルの設定
上記にて`vue-router`をインストール後、`router.js`などのファイルを作成し、以下のようにrouterの設定を行います。
インストールした`vue-router`から`createRouter`, `crea
JavaScriptのthisを理解する
## thisとは
**呼び出し元のオブジェクトへの参照を保持するキーワードのこと**`this`の参照先は、実行コンテキストによって変わります。
実行コンテキストには「グローバルコンテキスト」や「関数コンテキスト」があり、今回は関数コンテキストにおける`this`について見ていきます。関数コンテキストにおける`this`の場合は、呼ばれた関数ごとに参照先が変化します。
## consoleで「hello Taro」と表示する場合
“`javascript
const person = {
name: ‘Taro’,
hello: function () {
console.log(‘Hello ‘ + this.name);
},
};
“`この場合、`this.name`の`this`は自身のオブジェクトの`person`を参照します。
## helloメソッドを呼び出してみる
“`javascript
const person = {
name: ‘Taro’,
hello: function () {
console
はじめてのJavaScript⑯「関数リテラル」
#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.関数リテラルとは？](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057#2-%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E3%81%A8%E3%81%AF
)
[3.実際どのようなものか？](https://qiita.com/Stack_up_Rising/items/a6f0211beea531c9c057#3-%E5%AE%9F%E9%9A%9B%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%82%82%E3%81%AE%E3%81%8B
)
[4.構文](https://qiita.com/Stack_up_Rising/items/a6f0211beea531
pythonが好きなjavascript使いが喜びそうなat()メソッド
最近、気づいたんですが`.at()`というメソッドが追加されたみたいです。
できることは、整数値をパラメーターとして受け取って、インデックスにある要素を返すというメソッドです。タイトルのpython好きなの部分に響きそうなのは、整数値なので、負の値が使えるということです。
何が嬉しいかというと、配列の最後の要素からカウントバックができるという事です。多分、下記を見ていただくのが分かりやすいと思います。
### 例
“`py
arr = [1,2,3,4,5,6]
print(arr[-1]) # 6
“`Javascriptの場合だと、最後の要素
“`js
// without .at()
const arr = [1,2,3,4,5,6];console.log(arr[arr.length-1]); // undefined
console.log(arr.slice(-1)[0]); // 6
“`“`js
// with .at()
const arr = [1,2,3,4,5,6];
console.log(arr.at(-1)); // 6
`
【Vue / Nuxt】inputコンポーネントにenterでフォーカス移動する
input内でenterを押下した際に次のinputにフォーカスさせる処理、よくありますよね。
フォーカスしたいinputがコンポーネントの時に悩んだので備忘録です。#子コンポーネントの書き方
“`Input.vue
【学習記録⑭】transition-groupを用いてリストのトランジションを実装する！# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は`transition-group`を用いて`v-for`等の複数のタグが作成される場面でトランジションを実装していきたいと思います。## transition-group
`transition-group`は`v-for`属性等を用いて複数のタグが作られる際にそれらに対してまとめてトランジションを適用したい場合に付けます。
例えば以下の場合、`transition`タグで囲っても正常にトランジションは動作しません。```vue:example.vue
{{ number }} ```
https://v3.ja.vuejs.org/guide/transitions-list.html
また、`transaction-group`タグを用いる際は必ず`key`属性を付ける必要があります。
https://v3.ja.vuejs.org/guide/migr
Next JS での TypeError: Failed to construct 'URL': Invalid URL
# エラーメッセージ
TypeError: Failed to construct 'URL': Invalid URL nextjs```
import Image from "next/Image";
...
...
```next/Imageでのエラー。
## 原因
不明。
いくら検索してもパッケージにまつわる話しか出てこなく、また、特に該当ソースやコンフィグファイルをいじっていないに関わらず例外を投げられるようになったため、パッケージマネージャー関連の問題と予想。## 解決
結局。プロジェクト全体を作り直して解決した。
やはりパッケージのバージョンの依存関連だろう。
最近webpackで環境構築したので利用したプラグインまとめてみた
#はじめに
こんにちは〜
最近フロントエンドの環境構築の勉強でwebpackを利用しました。
その際、プラグイン多いな！！！
と感じたので、自分なりにプラグインをまとめてみました！#そもそもwebpackって？
コンポーネント化が進む時代・・・build時に各種ファイルを1つにバンドルしてくれるプリプロセッサがwebpackです。公式の画像がわかりやすいので添付します。
このように、webpackが依存関係も込でいい感じにファイルを1つにまとめてくれます。
あとは、バンドルしてくれたファイルを読み込めば解決になります。素晴らしいですね！
このバンドル時に数々あるプラグインを利用することでより便利になりますので、今回はそちらを紹介いたします。
#プラグイン一覧
| プラグイン名
【学習記録⑬】カスタムトランジションクラスとAnimate.cssを用いてアニメーションを実装する！
# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はカスタムトランジションクラスとAnimate.cssを用いてアニメーションを実装する方法について記載していきます。## カスタムトランジションクラス
[前回の記事](https://qiita.com/Ooooooomin_365/items/7e56e784b2065c33f213)では`transition`コンポーネントのname属性に任意の名前を付け、その属性を用いてstyleタグ内にて組み込みのトランジションクラスへCSSを適用しました。
今回利用する`カスタムトランジションクラス`は任意のクラス名を組み込みのトランジションクラスのように使いたいとき（説明が難しくてこんな表現ですみません...）に利用します。
例えば、今回利用する`Animate.css`ではライブラリが用意したクラス名をトランジションクラスに利用したいのですが、前回の記事の内容ではクラス名は組み込みのものを利用しているため、ライブラリが用意したクラスを利用することができません。
そこで任意のクラJavaScript メモ ：定数、変数
##定数
プログラムの中で値に付けられる名前のこと
・定数を作るには、constとというキーワードの後に定数名を書いて、定数を使いますよと宣言する必要がある。
例）const price = 200;
・上記の＝（イコール）は右の値に左の値を当てはめるという意味。これを代入という。
・再代入できない。##変数
・変数を作るには、letもしくはvarとというキーワードの後に変数名を書いて、変数を使いますよと宣言する必要がある。
・再代入できる。
例）
let prece =100;
console.log(price * 10);
console.log(price * 20);price = 150;(再代入）
consoleはじめてのJavaScript⑮ 「function命令」
#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.function命令とは？](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#2-function%E5%91%BD%E4%BB%A4%E3%81%A8%E3%81%AF
)
[3.構文](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#3-%E6%A7%8B%E6%96%87
)
[4.例題](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Rising/items/cebb01c8c08f85e9705a#5-%E3Javascriptのイテレータとジェネレーターを簡単に触ってみた
#イテレーター
イテレーターとは反復操作を行う際に使用するオブジェクトになります。イテレーターでは２つのプロパティを持つオブジェクトを返すnext()メソッドをもつことによってイテレータープロトコルを実装するオブジェクトになります。
言葉では理解しにくいと思うのでまずはコードで確認してみましょう。```JS:JS
function genIterator() {
// genIteratorのreturnで返すものがイテレーター
return {
next: function() {
return {
done: true/false, //ループ継続の可否
value: 値 //返却されるもの
}
}
}
}
```
コードを確認できたところでまずは簡単に0~3までを出力するイテレーターを作成してみましょう。```JS:JS
function genIterator(max) {
let i = 0; //iの初期化
return {
next: function() {React-Hook-Formの使い方（Part2：RHFとyupでバリデーション）?
## はじめに
Part1ではRHFの使い方。Part2でははRHFとyupを合わせて利用する方法を見ていきます。次回のPart3ではさらにMUIとの併用を見ていきます。※これはpart2になります。part1は以下リンク
https://qiita.com/shunnami/items/98c0c03e3eb59b5c9c57## パッケージインストール
```
yarn add yup hookform/resolvers
```## yupの使いかた
RHFの使い方はpart1で勉強しました。あとはyupの使い方を理解すればすぐに合体させて利用することができます。またyup自体も使い方は簡単です。
すでに詳細な使い方を説明している記事があるので以下を参照してください。
※2ページ目まで読めば次の項目をスムーズに読むことが出来ると思います。```
https://codezine.jp/article/detail/13518
```## 組み合わせる
### yupの定義
まずは、バリデーションをyupで定義します。
yup.object().shapeに渡すReact-Hook-Formの使い方（Part1：RHFだけでバリデーション）?
## はじめに
初見時に公式を読んで「どういうこと？」となったためまとめます。公式読んでスッキリしていない方はこちらを読んでからならスムーズに読めるかもしれません。
また、この記事はpartに分けています。part1ではRHFだけのバリデーション。part2ではyupとの併用。part3ではMUIのバリデーションを行います。## パッケージインストール
```ts
npm install react-hook-form
yarn add react-hook-form
```
## RHF基本的な使い方
詳細な使い方を説明する前にinput要素の値の取得からバリデーションという一連の流れを説明します。まずはじめにinput要素にRHFのregisterという関数を適用することで、input要素をRHFから参照できるようにします。次に適用するバリデーションをregister関数に登録します。最後にsubmitボタンを作成しonSubmitで発火する関数をRHFから取得します。
では次の項目から上記で説明した内容とエラーメッセージの出し方の詳細な方法を説明します。
### 目次
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた