JavaScript関連のことを調べてみた2021年07月16日

[Rails] jQueryプラグインslickを使ったカルーセルスライダーの実装

スライダー実装時にslick以外の手段も手段も検討したのですが、その中でもslickが１番使い勝手がよさそうだったので、slickに決めました。

なので今回は、jQueryのプラグインであるslickを使って、カルーセルスライダー（スライドショー）の実装をしていきます。

デモは[slickの公式サイト](https://kenwheeler.github.io/slick/)か、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/)で、確認してみてください。

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

– jQueryが使える状態
– FontAwesomeが使える状態
– 使用する画像は各自用意して、assets/imeges直下に配置してください
– homes/topで実装

####スライダーの仕様
スライダーは自動で切り替え、手動で切り替え、両方できるように実装していきます。

– 自動で画像が切り替わる
– 矢印クリックで、画像切り替え
– 下のドットクリックで、その画像に切り替え

以上前提をふま

Denoでshift-jisのテキストを読み書きしたい

# 読み込み

utf8なら`Deno.readTextFile`で読める。

“`ts:utf8
const str = await Deno.readTextFile(“hello.txt”);
“`

utf8以外なら`TextDecoder`を使う。
エンコーディング一覧 → [TextDecoder.prototype.encoding](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/encoding)

“`ts:shift-jis
const bytes = await Deno.readFile(“hello.txt”);
const decoder = new TextDecoder(“shift-jis”);
const str = decoder.decode(bytes);
“`

# 書き込み

utf-8なら`Deno.writeTextFile`で書ける。

“`ts:utf-8
const str = “悔しいならまだ戦えるね”;
await Deno.writeTex

vue.jsで作る落ち物パズルゲーム

## はじめに

ずっとパズルゲーム系のアプリを作成してみたくて、ついに作成してみました。
意外とWeb上での落ち物ゲーの作り方の記事が少ない印象だったので実装ポイントをまとめてみました。（ググり方が悪いだけ）
まだ、駆け出しなのでうまくまとめられませんが、読んでいただけると幸いです。

## 成果物　
https://sugiyama-vuejs.netlify.app/
[](https://gyazo.com/9612cc2e99d332610e15058c02ff6f05)

## ポイント

### 使用技術

– Vue.js 2.6.12
– vuetify 1.11.3

### 参考URL
考え方のベースはこちらの記事を参考にさせていただきました。とても助かりました。ありがとうございます！！
>https://note.com/syun77/n/n34aae4a81940

### 初期表示&リトライ
初回とリトライ

templateをtemplateらしく使う

“`html:index.html

“`
テンプレートタグなるものを使いたいとき、調べた限りだとcloneして要素にデータを挿入してappendChildするように、ということだった。
参考 : [Qiita – template要素の使い方、知ってます？](https://qiita.com/saka212/items/ac77e778b7e323749e61 “template要素の使い方、知ってます？”)
この「要素にデータを挿入」の処理が気に入らず、テンプレートらしく使う方法を考えたのでメモ。

##templateをこういう感じで書きたい
“`index.html