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

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

Vue.jsで簡単なアプリをつくってみた

この記事では、私がVue.jsの練習がてらつくったかんたんなアプリについて、コードの紹介を中心にまとめます。

https://github.com/yatsurugi55/vuetify-example

# 前置きなど
私がこのアプリを作る上で確認したかったことは、

– **Vuetify できれいなデザインのアプリがつくれること**
– **Vuetify でのサイドメニュー、ヘッダーなどのつくりかた**
– **Vuex で管理したデータを複数ページからアクセスすること**
– **Atomic Design などの設計原則を Vue.js でためしてみること**

などです。
私は普段 Laravel をメインでつかうのですが、フロント側をつくっていて感じることのひとつに、「JavaScriptできれいにコードかくのむずかしくない?」ということがありました。

バックエンドをつくるときには、業務に関する情報はドメインに、DBに関する情報はリポジトリに集めようといった方針でつくることが多いですが、JavaScript ではどういう単位で、どういう指針で分割すればいいんだろう、

元記事を表示

自分専用のブラウザー拡張機能を作っている話

## はじめに

Web ブラウジング体験をプチ改善したいことって本当によくあります。 Partially Persistent Headers のようなユーザーを邪魔するだけの要素は本当にイライラするので撲滅したい。

– スクロールで出たり消えたりするヘッダー(Partially Persistent Headers)をページ上部に固定したい(「マイナビニュース」「DevelopersIO」など)
– テキスト選択時に出てくるポップアップを間違えて押さないよう非表示にしたい(「Medium」「note」「Yahoo!ニュース」など)
– Amazon の商品ページの URL を `/dp/{asin}` 形式に正規化したい
ブコメの熊を消したい

いずれも数行の CSS または JS で実現で

元記事を表示

閏年の判定方法について

こんにちは!
前回「『閏年判定アプリ』を作った」にて
`new Date()`を使用した判定方法をコメントで教えていただきました。
時間が関係する処理を書くとき、何かと閏年の判定は必要になると思うのでメモとしてここに残します。

詳しくは [前回記事](https://qiita.com/huwg2787x/items/c3265f89d0f9ff74e155) のコメント欄をご参照ください。


まず一般的な方法として

“`javascript
const isLeapYear = year => year%4 === 0 && year%100 !== 0 || year%400 === 0;
“`

という方法があります。
年数が 4で割り切れて かつ 100で割り切れない または 400で割り切れる
閏年の定義をそのまま当てはめて、判定する方法です。


それとは異なり`new Date()`を使用した方法は以下のようになります。

“`javascript
const isLeapYear = year => new D

元記事を表示

Codesandboxの動作がおかしくなった際の対応

Codesandboxはすごくいいサービスですが、なんか時々動作が不安定になることがあり残念だなーと思っていました。

>安定すれば有償コース申し込むのに・・・といつも思ってます。

## おかしくなる現象

Codesandboxではソースを変更しSaveすると即座に結果が反映されます。が、時折、それが行われなくなり、一度そうなってしまうと後は何をしてもうんともすんとも言わない状態になります(プロジェクトを捨てるしかない)。

> Node.js系かつプロジェクト名称を変更した際に多い気がします。

## 動かなくなった際の対応

ずっと放置していたのですが、本家のissuesに対症療法的解決案っぽいのがあり、それを試したところ動いたのでメモしておきます。

* 参考にした元記事
* https://github.com/codesandbox/codesandbox-client/issues/4381
*

私なりの検証情報を付け加えてまとめると

* codesandbox.ioにアクセスしている状態でApplicationのStorageを消す(記事通り)
* 一

元記事を表示

[JavaScript]fetch メソッド

#### コード
“`sample.html