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

slick画面読み込み時に一瞬縦並びになるバグ対応

## ロード時に一瞬縦並びになるのをCSSで解決する

### JSを使用せずに解決する

“`javascript
$(“.main-slide”).slick({
adaptiveHeight: false,
autoplay: true,
dots: false,
infinite: true,
speed: 2000,
slidesToShow: 1,
arrows: true,
prevArrow: ‘

‘,
nextArrow: ‘

‘
});
“`

“`html

[React Native] react-native-draggable-gridviewのセルサイズ変更

# 0. 背景
react-native-draggable-gridviewを使うことで、ドラッグ可能なリスト形式のビューを表示できる(FlatListにドラッグ機能を追加したようなもの)
しかし、デフォルトではpropsでwidthしか指定できず、セルサイズを正方形でしか表示できない(widthは縦、横両サイズに反映される)

# 1. 目的
react-native-draggable-gridviewのセルサイズを長方形で表示
→propsでheightを指定できるようにする

# 2. 環境
– React : 16.8.6
– React Native : 0.63.4

# 3. 準備
react-native-draggable-gridviewのインストール

`npm install react-native-draggable-gridview`

react-native-responsive-screenのインストール(端末画面の比率でセルサイズを指定できる)

`npm install react-native-responsive-screen`

# 4

手書き風アニメーション(vivus.js)

## はじめに
`vivus.js`という素晴らしい、プラグイン？を使用したのでメモとして残します。
まだ理解し切ってないので、本当にメモ書き程度のまとめです。

## 完成イメージ

## 手順
illustratorで新規作成

・「base」「mask」のレイヤー作成

・「base」レイヤーに文字を書く

・文字のオブジェクトの上で「右クリック」→「アウトラインを作成」

・そのまま(選択した状態で

React + Contentful で「おみくじアプリ」を作ってみる

## はじめに
「Vueはちょくちょく使ってるけど、React触ったことないんだよなぁ」
「Contentful…なんだか今後使う事ありそうだし、使ってみたいなぁ」
そんなフロントエンジニアが、**React + Contentful で “おみくじアプリ”** を作った際の備忘録です。

## やる事
– React導入
– Contentful導入
– つなぎ込み
– 実装

## React導入
公式のドキュメント通り

“`
npx create-react-app react-omikuji
“`
で環境が出来ます。（爆速！最高！）

“`
cd react-omikuji
“`

で環境に移動して

“`
npm start
“`

でローカル環境が起動します。
[新しい React アプリを作る – React公式ドキュメント](https://ja.reactjs.org/docs/create-a-new-react-app.html)

## Contentful導入
### サインアップ
[公式ページ](https://www.contentful.c

Qiita で ES2015+ を意識せずにコーディングしている記事が 25% 程度ある

2021 年。JavaScript (ECMAScript) は常に進化し続けているが、初学者含めて日本の JavaScript 使用者は何割ぐらいの人が ES2015+ を意識してコーディングしているのか気になったので調べてみる。

# 動機

変数は `var` ではなく `const` や `let` を使った方がスコープを安心して使用できるし、関数は `function App () {}` ではなく　`const App = () => {}` で良い。
分割代入やテンプレート文字列、スプレッド構文、`map` なんかも便利だと思う。
どんどん使っていけばいいし、新しく学ぶ人は当然 ES2015+ で学んだほうが良いと思う。
でも、それを知らずに学び始める人、知らずに居続ける人もいるのかもしれない、とふと気になった。

# 調査方法
Qiita に投稿された記事から ES2015+ を意識してコーディングしている／意識せずにコーディングしている記事数（※）を Qiita の検索機能から抽出し、母数に対する割合を求める。

ES2015+ を意識しているか否かは、記事内のコード

推し声優のラジオ番組をON AIR一時間前に通知する

# まえがき

皆さんは[超A&G+](https://www.agqr.jp/timetable/streaming.html)というラジオ放送局をご存知でしょうか？
主に声優さんがパーソナリティを担当する番組を配信しているインターネットラジオです。

# 作ろうと思ったきっかけ
在宅作業がデフォルトになったことにより、声優さんのラジオ番組を誰にも気兼ねなく聴ける環境になったので、これを機に推しの声優さんがパーソナリティを務めるラジオを聴くようになりました。

ただ、まだ声優ラジオを聴くのが習慣化されていないせいで、自分の好きな声優さんが超A&Gでラジオ番組をもっているかどうか、また持っていても、やっている時間を忘れてしまって聴く機会を逃していました。

「じゃあ録音すれば？」との声が聞こえてきそうで、実際、[技術書典で本を買った](https://techbookfest.org/product/5652340726038528?productVariantID=5754925483032576)りして、録音プログラムを組んだりはしたのですが、録音したものを片っ端から聞いているのか

Vim & VSCodeのフォーマッタを自作する（分析SQLを例に）

## 概要
[こちら](https://qiita.com/kai_data/items/6c119c43ad3626226dfc)の「分析SQLスタイルガイド」を拝見し、**SQLのフォーマッタには需要がある**と感じて早速作り始めてみた。とりあえず動くようになったので、これまでの一部始終を記事にする。具体的には、以下の内容を扱う。

1. [Prettier](https://prettier.io/)という既存のフォーマッタをコマンドやエディタから利用する方法
2. Prettierのプラグインとして任意の言語のフォーマッタを実装する方法（分析SQLを題材にする）

普段から分析SQLを書くがフォーマッタは使ったことがないという人は、まずこの後のPrettierの紹介を読んでほしい。きっと使いたくなるはず。

▼ちょっと画質悪いけど、1月23日現在の開発進捗。とりあえず動く。
![before_after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540947/0e524785-e7ab-82

【Java】java.lang.NullPointerExceptionを避ける方法

#プログラミング勉強日記
2021年1月23日
Javaでコードを書いているときに、よく出てくるNullPointerExcptionの意味と、NullPointerExcptionにならないようにする方法をまとめる。

“`:java.lang.NullPointerException
Request processing failed; nested exception is java.lang.NullPointerException
“`

#NullPointerExceptionとは
　参照型の変数の値にnullが格納されているとき、それを参照しようとしたときには発生する例外である。

> NullPointerException（ナル・ポインタ・エクセプション、ヌル-）は、プログラミング言語Javaにおける例外の一つである。
null値（定義されていない値）の参照型変数を参照しようとした時に発生する。NullPointerExceptionは実行時例外と呼ばれるjava.lang.RuntimeException クラスのサブクラスであるため、try-catch節に

Axiosで外部ファイルをロードしてFileにする / Data URI schemeをFileにする

– 外部リソースをAxiosでロードし`File`オブジェクトに変換する
– Data URI schemeを`File`オブジェクトに変換する

“`javascript:uriToFile関数
import axios from ‘axios’

function uriToFile(uri, fileName) {
if (!uri) return Promise.resolve(null)
return uri.startsWith(‘data:’)
? convertDataUriToFile(uri, fileName)
: loadUriToFile(uri, fileName)
}

function convertDataUriToFile(dataUri, fileName) {
const byteString = atob(dataUri.split(‘,’)[1])
const mimeType = dataUri.match(/(:)([a-z/]+)(;)/)[2]

const length = byteString

コメントは書かなくていいよ

どんな言語にも共通することですが、コメントは基本的に書かなくていいんです。
プログラミングの入門書にはよく「わかりやすくコメントを書きましょう」と書いてありますよね。
それを鵜呑みにした初心者プログラマーはこんなコードを書いてしまうことがあります。（jsを例にします）

“`javascript
// 配列を初期化する
let language = [‘JavaScript’, ‘Python’, ‘Ruby’, ‘PHP’, ‘Java’, ‘Swift’];

// C言語を追加
language.push(‘C’);

// 配列でループ
for (value of language) {
// コンソールに出力
console.log(value);
}
“`

**全行にコメントをつけるなど絶対にやめましょう。**
このコードの場合はコメントはまったくなしで良いです。

## コメントを書いたときの弊害

* 「配列を初期化する」など、ほとんどの人がコメントがなくても理解できるコードにコメントをつけるのは、わかる人からすると冗長に感じてイライラさせてしまうかもしれ

Webサービスにおけるダークモード対応方法

先日、携わらせていただいている[Spotlight](https://spotlight.soy)というサービスのデザインリニューアルをしました。
その際にダークモードに対応したので、それの知見共有です。

## ダークモードの対応方法
CSSでの対応です。
こんな感じで対応したい部分をメディアクエリの中に書き込みます。

“`css
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
}
}
“`

それだけ！

## ダークモード、ライトモードの切り替え方法
これが苦労しました。
Spotlightでは以下仕様でダークモードに対応しています。

未ログインのユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定していないユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定しているユーザー → 設定に合わせる

コードにするとこんな感じ。

“`javascript
document.documentElement.setAttribut

【Vue.js基礎第1回】環境構築・ディレクティブ

#はじめに
Vue.jsの基礎について複数回に渡ってまとめていきます。今回は「環境構築」と「ディレクティブ」についてです。動作確認済みのコードも記述しています。※内容は初学者向けです。

#準備
今回はCDNを用いて導入。Vueの公式ホームページより最新のCDNを取得。bodyタグの直前に記述。別のファイルにJSを記述する場合は、CDNの後に挿入する。
https://jp.vuejs.org/v2/guide/installation.html#CDN

“`cdn.html

//本記事ではここにVueで操作したい内容を記述

“`

`new Vue`でインスタンスを生成し、html内のVueを使用する場所をel要素で指定する。

“`vue.js
new Vue({
el

初めて作ったChrome拡張で使用した汎用性が高いと思われるコード

# どんな拡張？
Firefoxアドオンの「定期的にチェック」がリニューアルに伴い消えてしまい、作者も活動を休止しているようなのでChrome拡張に移植しました。
定期的にチェックしたいページを１日毎、１週間毎というように定期的に表示します。
半年ごとに表示するなどしてリマインダー代わりに使うこともできます。

ダウンロードはこちら→ https://chrome.google.com/webstore/detail/check-periodically/fpmgbnmhlmbknpkdlgdmockhiojelddp

# 基本コード
Chrome拡張開発入門はすでにたくさんあるのでここではカンタンな拡張でも使うような基本的なコードを紹介します。

## データ操作
manifest.jsonの`permission`に

大なり（>）、大なりイコール（>=）使わないプログラミングのすすめ

大小比較の演算をするとき、大なり（>）、大なりイコール（>=）を使わずに、小なり（<）、小なりイコール（<=）を使いましょう。 JavaScriptを例にしていますがどの言語でも使えるテクニックです。 ## 例１ たとえば変数`hoge`が1以上100未満か判定する条件を例にします。（JavaScript） ```javascript let hoge = 20; // good if (1 <= hoge && hoge < 100) {} // bad if (hoge >= 1 && hoge < 100) {} ``` goodとbad、どちらもテストには合格するコードですが、どちらが読みやすいでしょうか？ goodの方が、`1 <= hoge < 100`と読むことができるので、読みやすく感じるのではないでしょうか。 ## 例２ 変数`fuga`が50未満かつ変数`piyo`が30以上かを判定するコードを例にします。（JavaScript） ```javascript let fuga = 20; let piyo = 30; // good if (fug

Vue.jsの代わりにAlpine.jsでデータバインディング

# はじめに

最近、Alpine.jsというライブラリを知りました。
Vue.jsに影響を受けているようで書き心地は似ているのですが、データバインディングに特化していてVue.jsよりも軽量なので、SPA用途でなくデータバインディング用途でVue.jsを使用しているという場合は、代替になり得ると感じました。

Vue.jsと比較すると以下の点でメリットがあると感じます。

1. 軽量
1. データオブジェクトをPOJOで定義できるので、thisのコンテキストが明確

# 試してみる

APIがシンプルかつ日本語ドキュメントもあるので、基本的にはそれを見てもらえればと思いますが、Vue.jsの雰囲気で書こうとした場合にいくつか引っかかったので、その部分を共有出来たらと思います。
日本語ドキュメント：https://github.com/alpinejs/alpine/blob/master/README.ja.md

というのもAlpine.jsは「HTMLに属性値としてJavaScriptが書ける」ことを強みにしており、属性値で書くパターンとscriptタグで分けて書くパターンが、ド

node.jsのローカルサーバーでクライアントサイドjavascriptが動かない

# はじめに
* 素人がタイトルの問題で詰まったので解決方法を残しておきます
* 解決方法の一つは@Suibari_chaさんの記事を大いに参考にさせてもらいましたが（ほぼそのままです）、「javascriptが動かない」でググると見つけづらかったので一応記載させていただきました

# 解決方法1
下記記事のSuibari_chaさんのcssを読み込む方法：[Node.jsでhttpサーバを立てた際にCSSが読み取れない場合の対処法について](https://qiita.com/Suibari_cha/items/48da8519d6f363925b6a)

と同様に、javascriptのMIMEタイプを指定します。
サーバー起動時に「.jsはJavaScriptとして扱う」
というのを教えてあげないといけないということみたいです。
（node.jsなんだからそれくらいデフォルトで分かってくれよと思いますけども）

# 解決方法2
expressを使います

まず、expressをインストール

“`
npm install express
“`

下記のサーバー起動のスクリプト

[フロントエンド] うわっ…Componentの凝集度、低すぎ？


# 0. はじめに

有名OSSのコミッターから、コピペで動かすマンまで、彼らは等しくプログラマと呼ばれます。10xプログラマという言葉があるように、同じプログラマでもその生産性には天地ほどの開きがあります。

プログラマの生産性は、1968年の[Sackmanらの研究](https://dl.acm.org/doi/10.1145/362851.362858)以来、ソフトウェア工学でも熱い研究テーマの一つですが、未だにプログラマの生産性を測る指標は確立されていません。

一方、広木大地氏は自著「[エンジニアリング組織論への招待](https://www.amazon.co.jp/dp/B079TLW41L)」で、エンジニアリングを不確実性を削減する行為と定義しました。プログラミング能力を