OmniAICreator/Qiita-1.07M huggingface dataset:
CSS初心者のために「CSSで初心者マーク」を作ってみた

#どうも7noteです。

WEB制作初心者の方向けに記事を書いているのですが、だれでも初心者マークくらいはちゃんと作れたほうがいいかなという謎の理由から、CSSで初心者マークを作ってみました。

われこそはCSS初心者だと思う方はぜひ挑戦してみてください。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/74131901-7ae5-a93b-af84-0f3542d0d7a4.png)


## ソース

```index.html
<div class="mark">
  <div class="left"></div>
  <div class="right"></div>
</div>
```

```style.css
.mark {
  width: 100px;
  height: 110px;
  display: flex;
  margin-top: 30px;
}

.mark div {
  width: 50%;
  height: 100%;
  border: 10px solid #000;
}

.mark .left {
  background: #F3E72B;
  border-radius: 25px 0 3px 5px;
  border-right: none;
  border-left-width: 7px;
  transform: skewY(45deg);
}

.mark .right {
  background: #18A094;
  border-radius: 0 25px 5px 3px;
  border-left: none;
  border-right-width: 7px;
  transform: skewY(-45deg);
}
```

## 解説

まぁ、解説するまでのことは何もしていないですが、基本的なところだけさらっと解説。

border-radiusは4方向（左上・右上・右下・左下）別々に指定ができるので、これを利用して左右に四角形を2つ並べて適度に角丸を設定。左の箱なら左上を、右の箱なら右上の角丸を強い目に設定。

borderもデフォルトの太さを左右共通のCSSとして記述しておき、左の箱、右の箱それぞれ別々で指定していきます。
今回は`transform: skewY()`を使って平行四辺形にしているのでborderの太さが上下と左右で変わってしまうので、左右のborderの太さを個別でそれぞれ調整しています。

こんな感じですかね。アイデア自体は簡単なのであとはどのプロパティをつかってどういう設計にするかがわかれば初心者でも簡単に作成できますね。

## まとめ

初心者マークって認知されているわかりやすいデザインでいいですよね。誰が見ても初めてだと自覚している人はまずそこに目が止まるようなデザイン。これってwebデザインでも重要なポイントなのかなって思ったり。ユーザーがひと目で何かわかるものを作るのって、とても重要だと思います。

そんなところでまた思いつきでいろいろなものをCSSで作ってみたいなと思います。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
JavaScriptでFizzBuzz

# 以前Rubyで記述したコード

```rb:Fizzbuzz
def fizz_buzz
  num = 1
  while (num <= 100) do
    if num % 15 == 0
      puts "FizzBuzz"
    elsif (num % 3) == 0
      puts "Fizz"
    elsif (num % 5) == 0
      puts "Buzz"
    else
      puts num
    end
    num = num + 1
  end
end

fizz_buzz
```
[FizzBuzz問題の解説](https://qiita.com/iamu_TECH_CAMP/items/8253c8b123c20b8343c6)
[fizz_buzz問題で使用された表現](https://qiita.com/iamu_TECH_CAMP/items/ac97eeb3a839289f6ff5)

今回は上記のRubyで取り組んだ過去のコードを参考にして
JavaScriptでFizzbuzz問題にトライしてみた

# JavaScriptで記述したコード
以下が作成したコード

```js:Fizzbuzz
for( let i = 1; i <= 100; i ++ ) {  // for文を採用
// (初期値; 繰り返しの条件式; 処理の後にされる式)

  if( i % 15 === 0 ) { // iを15で割り切る事が出来る数字の時
    console.log("FizzBuzz"); // 第1条件の出力結果

  } else if ( i % 5 === 0 ) { // iを5で割り切る事が出来る数字の時
    console.log("Buzz"); // 第2条件の出力結果

  } else if ( i % 3 === 0 ) { // iを3で割り切る事が出来る数字の時
    console.log("Fizz"); // 第3条件の出力結果

  } else { // 上記のどれともマッチしなかった時の処理
    console.log( i ); // その他の出力結果
  }
}
```

## デベロッパーツールで確認
上記のコードをhtmlファイルの`<script></script>`内に記述して
ブラウザにドラッグアンドドロップ

`⌘` + `⌥` + `J`このコマンドでデベロッパーツールを確認すると
以下のように出力されている

```:デベロッパーツール
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
・
・・
・・・
```

1〜100までの数字が順番に出力

`「3の倍数」`のときは数字の代わりに文字列で`Fizz`
`「5の倍数」`のときも同様に`Buzz`

3と5の倍数である`「15の倍数」`のときは`FizzBuzz`と出力

### 補足

他にも書き方がありそうだと思って
>
JavaScript　FizzBuzz

と調べるとなんとまさかの一行で完成させる方法もあるそうです。
今の私には読み進めても全く解らなかったです。残念…
Python で Gif 生成

フォルダ内の画像をgifに。ちょうかんたんなやーつ。

画像を書き込む順番は frame0.png, frame1.png...などと書き込みたい順番にファイル名をつけておくとよろしい。

```python
import imageio
import glob

imageio.plugins.freeimage.download()

anim_file = 'test.gif'　#書き込み先

filenames = glob.glob("/image_dir" + '/frame*.png') #フォルダ内の画像を取得
filenames = sorted(filenames) #名前で並べ替え
last = -1
images = []
for filename in filenames:
  image = imageio.imread(filename)
  images.append(image)

imageio.mimsave(anim_file, images, 'GIF-FI', fps=5) # fps指定できます。
```

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/af66331b-9d31-7a98-5873-95282d0ee584.gif)

サンプル画像に意味はありません。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
(徒然に)疑似量子コンピューター？

# この記事の立ち位置

- 正確性は保証できない
- アマチュアの意見に過ぎない。トンデモかもしれない。各自判断。
- つぶやきであって議論ではない

# 量子コンピューターと疑似量子コンピューター

## アニーリング界隈

組み合わせ最適化問題をイジングモデルに落として解く際に、専用に作られたHWをイジングマシンと呼んでいます。
イジングマシンの実現としては、

- FPGA
- ASIC (application specific integrated circuit)
- CMOS
- GPU
- 物理系
    - 古典系
    - 量子系

など色々考えられます。
FPGAは、HWであるものの論理回路の構成が可変になっています。
なので、（手間はかかるのですが）計算アルゴリズムを変えて色々試したい場合などに向いています。
演算CLK速度は数百MHz程度、何百パラレルの並列演算も出来ます。
対してASICは、基本的に論理回路の構成は固定で、アルゴリズムが変わると作り直しになるらしいです。

注意すべきは、イジングマシンという概念は量子特有のものではないです。

イジングモデルとしては、古典的なモデルと量子的なモデルが考えられます。
古典的なイジングモデルでは、変数はスカラーであり、コストもスカラーです。
量子的なイジングモデルでは、変数は演算子（行列）であり、コストも演算子です。
演算子自体は測定できないので、演算子の固有値や期待値（スカラー）を測定します。

古典イジングモデルと量子イジングモデルを混同した記載などもよくみられます。
注意したいですね。

古典的なイジングモデルは、例えば古典シミュレーテッドアニーリング(SA)アルゴリズムで解くことが出来ます。
SAでは、変数をランダムに変化させ、コスト関数の変化を計算し、コストが下がる場合は許容し、上がる場合も確率的に許容します。
変数を変化→コスト計算→変数をアップデート　が終わるまで、次のiterationは出来ません。
しかし並列処理ができるリソースがある場合は、うまいこと並列に処理をさせること(+若干の修正を入れること)でメリットが得られる場合もあります。
もちろんこれは、（私の理解では）古典確率的アルゴリズム(SA)の時間方向(sequential)計算量を空間方向(parallel)に展開したことと
ほぼ同じです。そのため、古典確率的アルゴリズムの範疇かと思います。
しかしこのような並列処理アプローチが　”疑似量子コンピューター”　”量子インスパイヤコンピューター”　”量子アニーリングの挙動を再現”　などと言われている状況にあります。
ちょっと、しっくりきません。
並列処理アルゴリズムはSAに限らずいくらでも存在しますが、それをわざわざ「疑似量子アルゴリズム」とは言わないはずです。
そもそも、古典的な確率的探索と、量子的な重ね合わせ探索は本質的に全く異なるものです。(混合状態と純粋状態)


量子的なイジングモデルは、例えば量子アニーリング(QA)アルゴリズムで解くことが出来ます。
QAもSAと似ていますが、変数の候補が重ね合わせ状態として同時に探索されることや、変化をもたらすのが量子ゆらぎ（横磁場）であることなどが異なります。
特に、重ね合わせは興味深いです。SAではあくまで変数は1種類しか持てず、それを確率的に上書きしていくのみです。
しかしQAでは、原理的には全変数の候補を重ね合わせとして同時に持っていて、同時に（相互作用しながら）探索が進みます。
もちろん、解の候補も重ね合わせになってしまうので、求めたい解が強く生き残るようにうまく仕向ける（QAをうまく行う）必要はあります。


QAは量子力学の世界のアルゴリズムですが、計算量を別にすれば紙とペンで計算可能です。
（ただし候補間の相互作用も全て計算することになるので、膨大な計算量です）
これを専用HWで並列計算として（近似を入れつつ）行うマシンもあります。
これはQAの(近似あり）シミュレーターとも呼べるものです。
このマシンだけが、”疑似量子アニーリングマシン”と呼ばれてもよいのではないかと思っています。

## ゲート界隈

ゲート界隈では、今の所、”疑似量子ゲートコンピューター”というものは出てきていません。
ただ、アニーリングの場合を考えると、単に古典確率的アルゴリズムに従う計算機が出てきて”疑似量子ゲート”と言い張るパターンも想定されますかね。


# まとめ
「疑似量子」、しっくりこない。
pry-byebug 【Railsのデバッグツール】

#【pry-byebug】

Ruby on Railsを使用した実際の現場でも使われている。
このようなデバッグは初めてなのでしっかり抑えたい。

##pry-byebugのインストール

開発時のみ必要なgemは、group :developmentのブロック内に追記。
　→　本番環境に不要なので、ここに書く。

```:Gemfile
group :development do

　  gem 'pry-byebug'

```

##Docker環境でpry-bybugを使おう

$docker ps
　→　デバッグ対象のコンテナを確認

$docker attach < コンテナ名 >
 →　コンテナ名を指定して、アタッチする。

デバッグをおこないたいファイルに、**binding.pry**を入力する。

**binding.pry**の位置でプログラムが一時停止する。
　→　任意のコードを実行することができる。

exitコマンドでプログラムの一時停止を解除する。
その後、不要になった**binding.pry**を消しておく。

コンテナのアタッチ解除するには。
　→　Ctrl押しながら、pキーを押して、qキーを押す。
[JavaScript] 配列の要素をシャッフルする実装方法

# はじめに

JavaScriptの配列の要素を呼び出すたびに要素数を変えずに
ランダムな順番の配列を生成する関数を生成したので備忘録として残しておく

あまりネットに記事がなかったので、役に立てばと思って書きました！

# 配列の要素をシャッフルする実装方法 ①

### for文を用いて実装する方法

```tsx
/**
 * 配列の要素の値を変更せずに要素の順番を並べ替える関数
 * (e.g) [0,1,2,3,4] => [1,3,2,0,4]
 */
 const shuffleArray = (array) => {
    const cloneArray = [...array]
  
    for (let i = cloneArray.length - 1; i >= 0; i--) {
      let rand = Math.floor(Math.random() * (i + 1))
      // 配列の要素の順番を入れ替える
      let tmpStorage = cloneArray[i]
      cloneArray[i] = cloneArray[rand]
      cloneArray[rand] = tmpStorage
    }
  
    return cloneArray
  }

// 要素が数値の配列でもいける
console.log(shuffleArray([0,1,2,3,4]));
// expected output : [0,3,4,1,2]

// 要素が文字列の配列でもいける
console.log(shuffleArray(['JavaScript','React','Vue']));
// expected output : ['React','JavaScript','Vue']

// 要素がオブジェクトの配列でもいける
console.log(shuffleArray([{id:1,age:23},{id:2,age:24},{id:3,age:25}]));
// expected output : [{id:2,age:24},{id:1,age:23},{id:3,age:25}]
```

# 配列の要素をシャッフルする実装方法 ②

### reduce関数を用いて実装する方法

```js
// reduceを用いた実装方法
const shuffleArray = (array) => {
  const cloneArray = [...array];

  const result = cloneArray.reduce((_,cur,idx) => {
    let rand = Math.floor(Math.random() * (idx + 1));
    cloneArray[idx] = cloneArray[rand]
    cloneArray[rand] = cur;
    return cloneArray
  })

  return result;
}

console.log(shuffleArray([1,2,3,4,5]))
// expected output : [3,2,5,1,4]
```

# 簡単に解説

- **Math.floor()** 
実引数に与えられた数値以下の「整数」を返す
（例） Math.floor(5.95) → 出力結果 : 5

- **Math.random()**
0以上1未満の「乱数」を返す
（例） Math.random() → 出力結果 : 0.39750053425848453

リロードするたびにリストの順番を
ランダムに入れ替えたい時なんかに使えます！

他にもこんな良い実装方法があるとか
知見のある強い人がいたらコメントいただけると嬉しいです！

# 参考文献

[Math.floor | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)
[Math.random | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
maven3+openjdk 11でJarの生成


``` pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.demo</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1</version>
	<packaging>jar</packaging>

	<name>demo</name>

	<properties>
		<maven.compiler.source>11</maven.compiler.source>
		<maven.compiler.target>11</maven.compiler.target>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	</properties>

	<dependencies>
	</dependencies>
</project>

```

①. pom.xmlファイルに
```
<packaging>jar</packaging>
```　
と　propertiesに以下の設定を追加します。
```
<maven.compiler.source>11</maven.compiler.source>
 <maven.compiler.target>11</maven.compiler.target>
```
②　コマンドプロンプトで以下のコマンドを実行する
$mvn clean package
React の onChange におけるお作法の event 中身

## コード

```tsx
import React, { useState } from 'react'

interface appProps {
  name: string
}

const App = (props: appProps) => {
  const [name, setName] = useState(props.name)

  return (
    <>
      <input value={name} onChange={e => {
        console.log(e)
        console.log(e.target)
        console.log(e.target.value)
        setNmae(e.target.value)
      }}/>
    </>
  );
}

export default App;
```


## 出力結果

![スクリーンショット 2021-03-30 23.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355926/eeeb4f7f-2166-6381-ce88-7c73a1c90266.png)
【VBA】8桁の数字から、日付の変換と曜日を求める方法

今回は、8桁の数字から、日付の変換と曜日を求める方法です。

サンプルデータは以下の図をご覧ください。
![サンプル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242278/406e0733-a789-d260-bb5f-a502b04d20dc.jpeg)

↓実演動画
https://youtu.be/uatMG42tjQg

ソースコードは下記の通りです。

```

Sub 日付の変換と曜日計算()

　　' 日付の変換
    Cells(2, 2) = DateValue(Format(Cells(2, 1), "0000/00/00"))
    
    ' 日付から曜日を求める
    Cells(2, 3) = Format(Cells(2, 2), "aaaa")
    
End Sub

```

詳細を説明します。

>Cells(2, 2) = DateValue(Format(Cells(2, 1), "0000/00/00"))

DateValue関数は、文字列を日付に変換する関数です。
Format関数は、値を指定した形式の文字列に変換してる関数です。
第1引数には対象の値、第2引数には、指定したいフォーマットになります。

DateValue関数の詳細はこちら
https://www.tipsfound.com/excel/04datevalue

Format関数の詳細はこちら
https://www.tipsfound.com/vba/05format

>Cells(2, 3) = Format(Cells(2, 2), "aaaa")

日付の変換が完了したら、その値から曜日を求めます。
曜日を求めるにも、Format関数を使用します。

今回は、「〇曜日」と表示したいため、第2引数には"aaaa"を指定することで、
正しく表示されました。

フォーマットの種類については、以下のサイトが参考になると思います。
https://www.sejuku.net/blog/33422

以上が、8桁の数字から、日付の変換と曜日を求める方法でした。
Storybook v6.2でVue3コンポーネントの開発環境を作る

Storybook v6.2で`Vue3`のサポートが~~される為~~された為、早速この開発環境を作ってみます。

# 追記:2021/03/31
当初はRC版をインストールする方法を書いていたのですが、記事を書き終えて数時間後にv6.2が正式にリリースされた様なので正式なv6.2のインストール方法に書き換えました。(タイトルも変更しました。)

~~前提~~

~~Storybook `v6.2`は記事執筆時点(2021/03/30)で`RC版(v13)`です。~~



# 開発環境
- npm:6.14.8
- node:12.20.0
- yarn:1.22.10
- Vue-cli:4.5.11


# 参考

[Storybook for Vue 3](https://github.com/storybookjs/storybook/tree/next/app/vue3)
[Vue: Add Vue3 support #10654](https://github.com/storybookjs/storybook/issues/10654)


# @storybook/vue3のインストール

`@storybook/vue`ではなく、`@storybook/vue3`をインストールします。


```shell-session
yarn add --dev @storybook/vue3
```

# アドオンのインストール


`addon-notes`のみ、リリースバージョンが`5.3.21`になっています。
v6系は`alpha版`になっているのでバージョンを指定します。


```shell-session
yarn add --dev @storybook/addon-knobs @storybook/addon-notes@6.0.0-alpha.6 @storybook/addon-a11y @storybook/addon-essentials @storybook/source-loader
```

# vue-loader@nextのインストール

`v16`以上をインストールする必要があります。
リリース済みの最新版はv15の為、`@next`を指定します。


```shell-session
yarn add vue-loader@next
```

#　各種ローダーのインストール

```shell-session
$ yarn add --dev ts-loader style-loader sass-resources-loader
```


#　scriptsの設定

package.jsonの`scripts`に、下記の設定を追記します。


```shell-session
"storybook": "start-storybook -p 9100",
```

# .storybookディレクトリ内のファイルの設定

main.js(ts)とwebpack.config.jsの使い方はv6.0の時から大きな変更は無さそうです。


##### 追記:2021/04/01
この設定無しで動かしてみたところ、正常に動いていた為この設定は必要では無さそうです。

~~[githubのReadMe](https://github.com/storybookjs/storybook/tree/next/app/vue3)を見る限り、`preview.js(ts)`では下記の様に各コンポーネントやプラグインを別途設定する必要があるそうです。~~

```shell-session
import { app } from '@storybook/vue3';
import HelloWorld from "../src/components/HelloWorld.vue";

// app.use(My Plugin)
app.component('my-component', HelloWorld)
// app.mixin({ /* My mixin */ })

```


# 試しにstoryファイルを1つ作成して動かす

HelloWorld.vueコンポーネントの為の下記の様なstoryファイルを作成して動かすと、添付の様にVue3のコンポーネントをStorybook上で検証する事が出来ます。

```TypeScript
/* eslint-disable @typescript-eslint/no-var-requires */
import { text } from "@storybook/addon-knobs";
import HelloWorld from "../components/HelloWorld.vue";
const textData = require('./notes/sample.md')
const markdown = textData.default

// コンポーネントのメタデータを記述
export default {
  title: "Test/HelloTest",
  parameters: {
    layout: "centered",
    docs: {
      extractComponentDescription: (component: any, { notes }: any) => {
        if (notes) {
          return notes.markdown;
        }
        return null;
      }
    },
    notes: { markdown }
  }
};

export const HelloTest = () => ({
  components: { HelloWorld },
  template: `
    <div>
      <HelloWorld :msg="msg" />
    </div>
  `,
  props: {
    msg: {
      type: String,
      default: text("msg", "default text")
    }
  },
  data() {
    return {};
  },
  methods: {}
});

```

```shell-session
$ yarn storybook
```

![スクリーンショット 2021-03-30 22.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238861/f1acb4a9-16df-30c1-f90b-40c9c1932b50.png)


以上です。
これからどんどんStorybookでVue3のコンポーネントの開発・検証を進める事が出来そうです！
[Drupal] DrushでPHPスクリプトを実行する

今回はdrushでPHPスクリプトを実行する方法を紹介します。

## drush scrを使う方法

ある程度まとまった長さのスクリプトを実行するときは、スクリプトファイルを書いてから`drush scr`で実行します。

### 使い方
- スクリプトファイル（phpファイル)を作成してサーバーに設置（設置場所はどこでもいい）

```php
<?php

use Drupal\node\Entity\Node;

echo '更新したいノードのNIDを入力してください。';
$nid = rtrim(fgets(STDIN));

$node = Node::load($nid);
$node->set('field_a', 'hello');
$node->save();

echo 'NID' . $nid . 'のノードの更新が完了しました。' . PHP_EOL;

```
- `drush scr`を実行

```
drush scr [スクリプトのパス]
```

https://drushcommands.com/drush-8x/core/php-script/

### 実行場所について
スクリプトの置き場所はどこでも大丈夫ですが、Drupalディレクトリ外で`drush scr`を実行すると名前空間のオートロードが効かなくなる（今回のように名前空間で指定したクラスが読み込めなくなる）ので注意です。


### 引数の取得方法について
ファイル名の他に追加で引数を指定したいときは`$_SERVER['argv'])`で取得できます。

```php
<?php

use Drupal\node\Entity\Node;

// コマンドの引数からNIDを取得.
$nid = $_SERVER['argv'][6];
$node = Node::load($nid);
$node->set('field_a', 'hello');
$node->save();

echo 'NID' . $nid . 'のノードの更新が完了しました。' . PHP_EOL;
```
この場合のコマンド

```
drush scr [スクリプトのパス] [NID]
```
## drush phpを使う方法
ほんのちょっと値をチェックしたり変更させたいときは`drush php`の方が便利です。

```
drush php

// シェルが開く
Psy Shell v0.10.6 (PHP 7.3.24-3+ubuntu18.04.1+deb.sury.org+1 — cli) by Justin Hileman
test (Drupal 9.1.4)
>>> \Drupal\node\Entity\Node::load(4)->set('field_a', 'konnichiwa')->save();
=> 2
```
C#を始めて嬉しかったこと

## はじめに

いわゆるSIerと呼ばれる会社に入社して、主にSESでの開発業務に従事してきました。
入社後の研修でJavaを学んだあと数年ほどJavaの開発業務に携わっていましたが、ある時C#で新規開発する現場に配属されることになりました。
この時C#は全くの未経験で、Javaが楽しいと感じていたことから色々と不安が大きかったのですが、結果的にC#にハマり、気が付けばC#をやっている期間の方が長くなって久しいです。
そこで、振り返ってみてC#を始めて良かったな、嬉しかったなと思う事柄を書いていきたいと思います。

### おことわり

システム開発に関わる感想というのは、プログラム言語の違いだけではなく現場の雰囲気や環境に依存するものと理解しています。
この記事ではJavaとC#を比較して書いていますが、Javaを非難する意図は全くありません。
私は長らくJavaの開発現場には関わっていない為「最近はそうでもない」「新しいバージョンのJavaでは出来る」といったこともあるかと思いますが、特に言及しませんのでご容赦ください。
こういった関係から、この記事のタグには"Java"を含めておりません。

## 1. 言語のバージョンアップへの追従が早い

C#を利用した現場では、新しいバージョンのC#がリリースされると比較的早い段階で導入される傾向がありました。

入社時、Javaは1.6(Java SE 6)がリリース済で、1.7(Java SE 7)の情報が出回り始めていたころだったと記憶しています。
しかし、研修では1.5(J2SE 5.0)を学び、開発現場では関わった順に1.4(J2SE 1.4)→1.3(J2SE 1.3)→1.5(J2SE 5.0)といずれも古いバージョンを利用していました。[^1]
C#を始めた後にも短期的にJavaの開発現場にいたこともあるのですが、既に1.8(Java SE 8)がリリースされて1.7の公開アップデートが終了するような頃あいでしたが1.7(Java SE 7)を利用していました。
[^1]: J2SE 1.4というと、ジェネリクスが導入されておらずリストは毎回キャストが必要で、拡張for文(C#のforeachに相当)が無い時代でした。

これらはバージョンアップへの対応が行えなかったという状況でもありましたが、大きな理由は使用するフレームワークが新しいJavaのバージョンでは使えないということでした。

JavaにしてもC#にしてもバージョンアップの度に魅力的な機能追加がありますので、情報としては知っていながらも開発に役立てられないのが歯がゆく感じたものでした。

## 2. フレームワークの選定が不要

"不要"と言い切ったのは言葉のあやですが、C#では.NET Frameworkが多くのAPIを提供しているので、他のフレームワークを選定するまでも無い場面が多かったです。[^2]
例えば、テキストファイルを読み込んで1行ごとに分解した`string`配列を作るなんて処理が1行で書けてしまいます。

```csharp
string[] list = File.ReadAllLines(@"(ファイルパス)");
```

Javaで開発していた頃は、まず何かしらフレームワークやパッケージを探すか、共通メソッドを作るといったところからスタートしていました。
実際の開発現場では実行コストや諸々の条件により.NET FrameworkのAPIが必ずしも使用できるとは限りませんが、簡単な検証用プログラムを書いたり、開発者向けのツールを作る時には効率がかなり良くなりました。

[^2]: Webアプリケーションや大規模なシステムを開発する際にはC#でも何かしらのフレームワークを利用することが一般的なので、フレームワークが不要だとは思っていません。念のため。

## 3. 文字列の比較が`==`で記述できる

実はこれが最も感動的だったのですが、C#は演算子のオーバーロードが出来るので、参照型である文字列(`string`)を`==`で比較が行えます。[^3]

[^3]: 全ての参照型で`==`が使えるわけではありませんが。

```csharp
const string CONST = "CONST";
var a = "CONST" == CONST; // true
var b = "const" == CONST; // false
var c = null == CONST;    // false
```

Javaでは文字列比較は`equals`メソッドを使用すると必ず教えられると思いますが、文字列比較は登場頻度が高いだけに結構なストレスを感じます。

```java
// コマンドライン引数で CONST を渡して実行
public static void main(String[] args) {
    final String CONST = "CONST";
    boolean a = args[0] == CONST;      // false
    boolean b = args[0].equals(CONST); // true
}
```

ちなみに、`"CONST" == CONST`とした場合はコンパイラの最適化によって、リテラル指定した`"CONST"`と定数(`final`)で定義した`"CONST"`の参照が同じになる為、比較結果は`true`になります。[^4]
実際のコードではリテラルと定数を比較することはまず無いと思うので、注意が必要です。

[^4]: このサンプルのために久しぶりにJavaを書いたのですが、「あれ、Javaも`==`で文字列比較できるようになった？」と混乱してしまいました(笑)

余談ですが、Javaで文字列をequalsメソッドで比較する都合から、以下のようなコードを書くと`target`がnullの場合、実行時に`NullPointerException`が発生します。

```java
target.equals(CONST);
```

これを防ぐために以下のように定数を前に書くというルールが決められていることが多かったのですが、理解はしつつも比較対象が左に来ないことがどうしても受け入れられずもやもやしました。[^5]

```java
CONST.equals(target);
```

[^5]: 設計書でも「引数が"CONST"と一致する場合～」と書くことはあっても「"CONST"が引数と一致する場合～」と書くことは無く、設計書とコードを見比べる時に「比較処理間違って実装したかな？」と頭によぎるのでした。

## その他

他にもいろいろと感じたことはありますので、思い出しベースで度々追記していこうかと思います。
見る人によっては思うところがあるかと思いますが、あくまで「私が開発業務に携わる中でこう思った」ということをご理解頂ければ幸いです。
その上でご意見や経験談等ありましたらコメント歓迎いたします。
Material-UIのComponentのスタイルを上書きしたいとき

## Material-UIのComponentのスタイルを上書きしたい！！

Material-UIのAvatar Componentを使用して、縦長の画像を表示しようとしていました。
すると、Avatarのスタイルに、`object-fit : 'cover'`がデフォルトで適用されており、画像全体が入らず、クロップされてしまいました。

そこで、まずmakeStyleを用いて、スタイルの適用を試みましたが、上書きができませんでした。
そこで、色々調べていると、

`createMuiTheme`を使用して、スタイルを上書きできることが分かりました。

実際のコードがこちらです。

```
const theme = createMuiTheme({
    overrides: {
        MuiAvatar: {
        img: {
            objectFit : 'contain',
        },
      },
    },
  })
```

上記のように、overridesと上書きしたいComponentを Mui+'Component名' で指定すると上書きができます。

```
<MuiThemeProvider theme={theme}>
      <Avatar variant="square" src={img}>
      </Avatar>
</MuiThemeProvider>
```

上記のように、上書きを適用させたいcomponentを囲んであげると、`objectFit : 'contain'`が適用されました！！
上手くいって良かったです。
[Linux]デスクトップを「Desktop」にする方法

#Linuxで「デスクトップ」って入力するの超めんどくさい
Linuxの端末上でpathを指定するときに、気持ちよくタブキーを押しオートコンプリート機能(入力補完)を使いながら入力していく人多いと思います(*‘∀‘)
そんな時に、デスクトップとかを指定したい場合、いちいちカタカナに入力切替して「デ」って打って、また戻すの、めっちゃめんどくさくないですか(´Д`)

例えば以下みたいな時に、タブを押すとそのディレクトリ下のファイルが一覧されるわけですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153624/8bbf5146-6347-76f7-2234-dc33299d881b.png)
ダウンロードとか、ドキュメントとかも、いつも思います。
**なんでこいつら日本語やねん(# ﾟДﾟ)**
と。

もしかしたら上級者の方は「そもそもLinuxのデスクトップにファイルなんて置かねーよ」という感じかもしれません。
でもインフォマティクス初心者の私は、windowsのGUIに長年毒された名残で、ついデスクトップ下に色々と置いてしまうのです。

#解決策
そんなことを考えていて、ふと同じ悩みを抱えている人がいるはずだと思い、ググってみました。
そしたら解決策がいっぱい出てきました！
やることは端末を開いて以下のコマンドを打つだけ！

```bash:bash
LANG=C xdg-user-dirs-gtk-update
```
そしたらなんかダイアログが表示されるので，「Don't ask me this again」をチェックし，「Update Names」をクリックすればOKです。
日本語表記だった忌々しいディレクトリたちの表記がすべて英語表記になります！！
これで快適なLinuxライフを過ごせます(/・ω・)/

#参照
以下参考にさせていただいたブログです。
私の記事よりわかりやすいので詳細はこちらをご覧ください！

https://mickey24.hatenablog.com/entry/20090122/1232583960
rubyでinteger型の変数をカンマ区切りで表示する

## やりたかったこと
integer型で保存している値（インスタンス変数）をカンマ区切りで表示をする。

## 解決策　
最初は　**to_s(:delimited)** で表示しようとしていたが、別件のエラーを直そうとしていたところ、
この記述で下記のエラー

```’to_s': wrong number of arguments (given 1, expected 0) (ArgumentError)```
(このエラーについては解決策はネットに乗っていたが、ちょっとわかりずらかったのでやめました)
コードって好みが出るますねぇ、、、

が出たので、別の記述で応急処置を施しました🏥

**応急処置コード**
```インスタンス変数.to_s.gsub(/(\d)(?=\d{3}+$)/, '\\1,')```
正規表現を使った記述ですね、詳しいことは気にせず、使えるものは使います笑
いずれか深掘りしてみようと思う。。。

今回はインスタンス変数をカンマ区切りにしたかったので、インスタンス変数先頭において解決

## 参考文献

http://rubytips86.hatenablog.com/entry/2014/03/28/153843
当選番号の照合プログラム

多くの学びがあったので、備忘録として載せておきます。

以下、問題文の引用

>今日はくじの当選番号の公表日です。
購入者は 1 から 100 までの好きな数字を 6 つ選びます。
抽選では同様に 6 つの当選番号が発表され、購入したくじの数字と一致していた数字の数に応じて賞金が当たります。
あなたは、先日 N 枚のくじを購入しました。
プログラマーであるあなたは、N 枚の宝くじそれぞれについて、 当選番号と一致した数字の数について調べるプログラムを書くことにしました。
ここで、くじの購入例を見てみましょう。


![スクリーンショット 2021-03-30 22.49.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918117/29d296b0-06b4-9990-14f3-83cd514484d9.png)


>上の N = 3 の例では、当選番号と一致した数字は赤で表されており、 上から順に、3 個、1 個、0 個となっています。
なお、例から分かる通り、くじの数字は昇べきの順に並んでいるとは限りません。

解答例

```
numbers = gets.split(' ').map(&:to_i)
n = gets.to_i

n.times do
  ans = 0
  a = gets.chomp.split(' ').map(&:to_i)
    a.each do |i|
      if numbers.include?(i)
        ans += 1
      end
    end
  puts ans
end
```


解き方のポイント

- 2回の繰り返し処理

①宝くじの枚数分 = n回と、
②配列の中身をそれぞれnumbers（当選番号）の数字と照合し、trueの時にだけ+1をカウントする。

##最後に

もっと簡単にcountメソッドとかで処理可能と思ったが、いくら試行錯誤しても出来なかった。
もし別の簡単な方法があれば教えてください！！
フォームに入力された値をJavascriptで扱う

商品の値段設定でフォームに価格を入力して自動で消費税や利益を算出する機能を実施するにあたってどのイベント名を扱えばいいか、結論としてイベント名はinputを使用しました。

今回はフォームに金額を入力するので入力さている間イベント発火をする必要がありました。
そこで使用するのがinputというイベントでした


```javascript:new.js
//一部省略

price.addEventListener('input', () => {
 itemValue = price.value;
 console.log(itemValue)
})
```
コンソールで確認してみるとフォームに1と打ったら1と出力され11と打ったら11と、このように入力している間はイベント発火がされている状態を作ることに成功しました。
awkでディレクトリ内のファイル名の差集合と積集合を出力

# 差集合の出力コマンド

```bash
# dir2にのみ存在するファイルを出力
awk 'NR==FNR{a[$0]}!($0 in a)' <(ls dir1/) <(ls dir2/)
```

# 積集合の出力コマンド

```bash
# dir1とdir2の両方に存在するファイルを出力
awk '$0 in a;{a[$0]}' <(ls dir1/) <(ls dir2/)
```
[Android]思考停止で使っていたcontextを少し掘り下げる

# Contextってよく使うけども…
今まで、ダイアログ等の引数にcontextを要求されると、条件反射でcontextを打ち込んでいましたが、少しだけ掘り下げてみようかなと思います。

前提としてcontextは、奥が深く完全な理解は難しそうなので、ここでは、Activityで用いるContextとApplicationContextの違いについて触れてみたいと思います。

# ApplicationContextとActivityContextの違い
ApplicationContextは、文字通りでアプリ間のライフサイクルと関係していてアプリを起動してから、ずっと生き残って欲しいときに使います。
その為、アプリ間で共有されるローカルデータベースのアクセス等で使われますね。

そして、ActivityContextは流れで分かるかもしれませんが、Activityのライフサイクルと関係しています。その為、ActivityがonDestroy()されると、死にます。
Intentの時に使いますね。

ちなみに、thisもよく使われますが、thisはクラス自体を指します。
勝手な解釈ですが、ActivityContextと同じだと思ってます。  


#終わり
軽ーく説明しましたが、何となくパラメータにセットしていたcontextやthisも意味合いを少しだけ具体的に考えると、プログラミングの理解が深まるかもしれません。

手が止まるくらいなら、理解してなくても動くものを実装する優先でいいかもしれないですが、頭打ちになりがちですよね。

なので、今回はcontextを少しだけ掘り下げてみました。

誰かの役に立ちますように…
vbスクリプト(vbs)でWindowsPCのスリープ回避

9.5分毎にWindowsOSが自動的にCtrlキーを押下することで、
WindowsPCのスリープ回避をするためのVBScript(vbs)プログラムです。

---
Set objShell = WScript.CreateObject("WScript.Shell")
Do
  WScript.Sleep 1000*60*9.5
  objShell.SendKeys "+"
Loop
---

の5行のプログラムをCtrl.vbsとして拡張子vbsのテキストファイルとして保存します。

---
@echo off
echo Periodically push Ctrl key process (Every 9.5 mins)
C:¥windows¥System32¥CScript.exe Ctrl.vbs
---

の3行のプログラムをCtrl.batとして拡張子batのテキストファイルとして保存します。

Ctrl.batをダブルクリックで実行したり、
Ctrl.batをスタートアップに登録したり、
活用してみてください。

※途中で止める場合は、Ctrl.batの実行中に当該ウィンドウでCtrl + Cを押下してyes(Y)を選択します。
jenv環境でmavenコマンドを利用すると.java-versionが無視される

jenvで複数バージョンのJavaを管理していたところ、mavenコマンドがjenvではなくSystemのJavaを参照していたので、jenvを参照するように行った設定のメモ。

# 環境

- OS : macOS 11.2.3
- jenv : 0.5.3
- maven : 3.6.3

# 状況
```bash
$ mvn -version

Apache Maven 3.6.3 (xxx)
Maven home: XXX
Java version: 15.0.1, vendor: N/A, runtime: XXXX
Default locale: ja_JP, platform encoding: UTF-8
OS name: "xx", version: "xx", arch: "xx", family: "xx"
```

# 解決方法
```bash
$ jenv enable-plugin maven
```

```bash
$ jenv version

Apache Maven 3.6.3 (xxx)
Maven home: XXX
Java version: 1.8.0_231, vendor: Oracle Corporation, runtime: XXX
Default locale: ja_JP, platform encoding: UTF-8
OS name: "xx", version: "xx", arch: "xx", family: "xx"
```


# 参考
https://stackoverflow.com/questions/30602633/maven-ignoring-jenv-settings
【Python】DataValidationメソッドを使用して、データの入力規則を設定する

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、条件付き書式に関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/87e3f678-e60b-832a-66f6-1d608e1ed6c4.png)


上記のようなブック「商品リストを」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/3c742f1d-575a-ba67-8c07-c7b0cf530492.png)

この様なリスト入力だ出来る表に変更したいです。

# DataValidationメソッド

```python
validation = DataValidation(type='入力値の種類',
                            formula1='入力可能にする値',
                            allow_blank=空白を無視する場合はTure)
```
データの入力規則を設定するには上記のような
DataValidationを先ず作ります。

type引数には、「日付」「リスト」などの入力値の種類を記述します。

- whole：整数
- time：時刻
- date：日付
- textLength：文字列(長さを指定する)
- list：リスト
- custom：ユーザー設定
- decimal：小数点

# DataValidation.addメソッド

```python
DataValidation.add(セルの範囲)
```

データの入力規則を決めたら、お次は設定するセルの範囲を
DataValidation.addメソッドで記述します。

最後にWorksheetのadd_data_validationメソッドに
最初に作ったDataValidationオブジェクトを設定することで
シートにデータ入力規則が設定できます。

# 最終的なコード

```python
from openpyxl import load_workbook
from openpyxl.worksheet.datavalidation import DataValidation

wb = load_workbook('商品リスト.xlsx')
ws = wb.active

validation = DataValidation(type='list',
                            formula1='"レジ１,レジ２,レジ３"',
                            allow_blank=False)

validation.add('I3:I24')

ws.add_data_validation(validation)
wb.save('商品リスト_リスト追加.xlsx')
```

個人的に、今までリストは

他のシートのセルにリスト内容を入力しておくもの
(リスト内容のセルは非表示で隠しておくもの)

と、思っていたので
そんなことしなくてもリストを作れるというのが衝撃的でした。
djangoで外部サイトのリンクを張るのにハマった話

3時間も時間を使ってしまった戒めとしてメモを残す。

Djangoのテンプレート(index.html)で下記のように書いた。

```html
<p><a href=”https://marketingplatform.google.com/intl/ja/about/analytics/”>Googleアナリティクス</a></p>
```

実行してリンクをクリックすると、下記URLへアクセスしようとしてエラーになった。

>http://localhost:8000/%E2%80%9Dhttps://marketingplatform.google.com/intl/ja/about/analytics/%E2%80%9D

よく考えたらDjangoで外部サイトへリンク張るの初めてであれ？Djangoって特別な記述必要なの？ってなってハマった。ネットの海を検索しまくったが該当する記事はなかった。

結論を言うとURLを囲む「"」が大文字になっていた。コピペしたから気づかなかった。よくありがちなミスだった。

自分は一度やったら二度やる。VS codeの拡張機能で気づけるように作ろうかな。
【jquery,js】文字列をリストタグで表示する[onload,append,html,Dom操作] [js15_20210330]

####  <font color='orange'>処理の概要</font>
テキストエリアに表示した文字列をリストタグで表示する

##### 処理のフロー：
　(1)init()メソッドにてテキストエリアに文字列を挿入する
　(2)ボタン押下後、文字列を取得し、スペースでデリミタする
　(3)リストタグを生成し、デリミタした要素をテキスト挿入する
　(4)生成したhtmlタグをテキストエリアに表示する
　(5)リストをhtml()メソッドにてdom操作する

####  <font color='orange'>画面イメージ</font>


#####画像１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/57805d02-9f25-b80d-04a7-10ce3eeaa192.png" width="400px">

#####画像２
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/83cdf16b-853b-b74c-732f-f992a037149a.png" width="400px">


####  <font color='orange'>ソースコード</font>
```html:index.html
<link rel="stylesheet" href="./css/default.css">
</head>
<body onload="init()">
	<textarea id="initString"></textarea><br>
	<input type="button" id="listMakeButton" value="リストを生成する"><br>
	<textarea id="listHtmlMake"></textarea><br>
	<div id="listDisp"></div>
</body>
```

```javascript:main.js
$(function() {
    $("#listMakeButton").click(function(){
        var text = $("#initString").val();
        var lobjArr = text.split(" ");
        var ul = $("<ul>");
        
        // 配列用にインデックスを調整する
        for (var i= 0; i < (lobjArr.length - 1); i++){
            //タグの生成
            var li = $("<li>");
            //リストタグに配列から取得したテキストを挿入する
            li.text(lobjArr[i]);
            ul.append(li);
        }

        var div = $("<div>").append(ul);
        //htmlをテキストエリアにそのまま挿入する。
        $("#listHtmlMake").val(div.html());
        $("#listDisp").html(ul);
    })
});

function init(){
    var lobjText ="";
    var defaultStr = [
        ["モバイル"],["ランキング"],["Fashion"],
        ["トラベル"],["グループ"],["アカウント管理"]
    ]
    // 文字列の場合は、+で改行。配列の場合は、カンマで改行が可能

    $.each(defaultStr,function(){
        lobjText = lobjText + this + " ";
    })
    $("#initString").val(lobjText);
}
```

####  <font color='orange'>ポイント</font>
html：
(1)htmlが読み込まれる際にonloadにてinit()メソッドを読み込む
js：
(1)自分自身でhtmlタグを挿入出来ないので、div変数を用意し、val()メソッドでdom操作する
(2)同様にul・リストタグを持つ変数を宣言し、タグの中に任意の文字列を挿入する
(3)each構文で取得した要素は、thisで指定出来る

####  <font color='orange'>参考資料</font>
JavaScript(仕事の現場でサッと使える！デザイン教科書)　p183
androidでapkファイルをインストールできない

androidでアプリをアンインストールし、そのアプリのapkファイルをダウンロードしてインストールすると、「アプリはインストールされていません」エラーが出てインストールできませんでした。なお、アプリはplayストアにないものです。

* 機種：huawei nova lite
* Androidバージョン：8.0.0

ネットで調べると、次のような方法が出ましたが、どれを試してもダメ。

* 「不明なアプリをインストールする」設定をONにする
*  PlayストアでPlayプロテクトをoffにする
*  [設定]→[アプリ]で、アンインストールしたアプリが残っていないか？残っていたら消す

「端末管理」でクリーンアップを行い、更に同画面にある「ディープクリーンアップ」で「インストールパッケージのクリーンアップ」をした後apkをインストールすると正常に行えました。
【At Corder】【初心者】ABC086A - Product をRuby で解いてみた


#はじめに
[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～ - Qiita](https://qiita.com/drken/items/fd4e5e3630d0f5859067)

こちらの記事を参考に初心者がAt corderに挑戦します。
目的としては、就職活動でのコーディングテスト対策です。
毎日１問を目標としてコツコツやってきます:thinking:

わからないことは調べる精神です。ちょっとでもわからないなぁ、と思ったことは調べて解説と参考文献を載せますので、同じ内容でわからない人がいれば参考にししてください:baby:


https://atcoder.jp/home

#問題文
正整数a,bの積が偶数か奇数か判別せよ。

# 制約

- 1≤a,b≤10000
- a,b は整数

# 入力 出力

入力

```ruby
a b
```

出力

奇数ならOdd,偶数ならEvenと出力

入力例

```ruby
1 2
```

出力例

```ruby
Even
````

#回答

```rb
a,b=gets.split(" ").map(&:to_i);

if (a*b) % 2 == 0 then
  print("Even")
else
  print("Odd")
end

```

#感想
前回の問題で使ったメソッドを使いました。ちゃんとかけたので嬉しい！
ただ、最初偶数でOdd,奇数でEvenを表示していたので不正解になってしまった。凡ミスはやめなさい！
メソッドを分けたいときのVisualStudio便利機能

# はじめに
以下のメソッドの「// 処理」を別メソッドにわけたいときに使える、
VisualStudioの便利なショートカットの紹介です

```
void Func1()
{
    int a = 0;
    // 処理
}
```

# 通常のフロー

Func2を追加

```
    void Func2(int a)
    {
    }
```
Func2に処理をコピペ

```
    void Func2(int a)
    {
        // 処理
    }
```

Func1から Func2を呼ぶコードを追加

```
void Func1()
{
    int a = 0;
    Func2(a);
}
```

# 便利機能
Func1から Func2を呼ぶコードを追加

```
void Func1()
{
    int a = 0;
    Func2(a);
}
```

`Func2(a);`にカーソルを合わせて、
**Alt + Enter**
**→自動でメソッドが作られる！！**

```
    void Func2(int a)
    {
        throw new NotImplementedException();
    }
```
↑↑ちゃんと引数の型も合わせてくれる

Func2に処理をコピペ

```
    void Func2(int a)
    {
        // 処理
    }
```

以上
Fortranで最初に戸惑ったことなど



プログラミングをCから始めてC++やpythonを主に使っていたが、最近になり、Fortran90で書かれたプログラムに手を加える機会があった。Fortranの言語設計はQiitaでも時々話題になっているようだが、他言語から来て最初に躓いたりしたことのメモ。(似たような境遇の人の後学までに。)


## 勝手にsave属性

```Fortran
program main
   integer :: i
   do i = 1, 5
      call hoge
   enddo
end program


subroutine hoge
   integer :: a = 1
   a= a+1
   write(*,*) a
end subroutine                    
```
の出力結果は、

```
           2
           3
           4
           5
           6
```

つまり、`hoge`の一行目の`a = 1`は一回しか実行されない。これは、変数宣言と同時に初期化すると`save`属性が付くという仕様のため生じる。
この挙動を防ぐには、宣言文とは別に、実行文として`a=1`を行う。
上記の挙動をC/C++で再現するには、 `static`をつけて変数宣言をすればよい。（個人的には余り使ったことがない。）

```C++
#include<iostream>
void hoge(){
  static int a = 1;
  a++;
  std::cout<< a << std::endl;
}

int main (){
  for(int i = 0; i<5; ++i){
    hoge();
  }
}  
```

## 倍精度の数値リテラルには`d0`を
```Fortran
program main
   use, intrinsic :: iso_fortran_env
   implicit none
   real(real64)     :: a = 0.123456789123456789
   real(real64)     :: b = 0.123456789123456789d0
   write(*,'(f20.15)') a
   write(*,'(f20.15)') b
end
```
の出力結果は、（gfortranを利用した際は、）

```
   0.123456791043282
   0.123456789123457
```
で、0.123456789123456789を倍精度型の`a`に代入しても、単精度の0.123456791043282で代入される。
ところが、

```Fortran
program main
   use, intrinsic :: iso_fortran_env
   implicit none
   real(real64)     :: a = 0.0
   real(real64)     :: b = 0.0d0
   write(*,'(f20.15)') a
   write(*,'(f20.15)') b
end
```
の出力は、

```
0.00000000000000
0.00000000000000
```
だからなんだか悩ましい。

ちなみに、 前半のコードも`-fdefault-real-8`というオプション（gfortranの場合）を付けてコンパイルすれば、数値リテラルの扱いが倍精度になり、

```
   0.123456789123457
   0.123456789123457
```
という結果を得ることは可能。
C/C++の浮動小数点リテラルの既定値は倍精度型なので、浮動小数点数リテラルの精度は意識しておかないと忘れがち。
<https://docs.microsoft.com/ja-jp/cpp/cpp/numeric-boolean-and-pointer-literals-cpp?view=msvc-160>

## 配列関係のライブラリは充実している
配列添え字の範囲や配列の大きさなどは標準ライブラリで管理できる。自分で頑張る必要は無い（大事）。

```Fortran
program main
   use, intrinsic :: iso_fortran_env
   implicit none
   integer(int64), allocatable :: a(:)
   integer(int64) ::i
   a = (/1, 2, 3, 4, 5/)

   write(*,*) (size(a))

   do i = lbound(a,1), ubound(a,1)
      write(*,*) a(i)
   enddo
end
```
の出力結果は、

```
           5
                    1
                    2
                    3
                    4
                    5
```
（もっとも、`write(*,*) a` で全要素を出力してくれるのだが。）

## カラムメジャーか、ローメジャーか

これは有名な話なので省略。BLASなどをC/C++から呼び出す時なども気を遣う。とは言うものの、なんだかんだで嵌まりがちなので、気をつけた方がよい。
Razer Tartarus V2(Pro)のホイールにClipStudioのブラシサイズを割り当てたい

# ホイールの上下でブラシサイズ"[","]"を操作したい！

SYNAPSE3のバグで、JISキーボード配列とUSキーボード配列が混同しているため、"["とか"]"入れても@(アットマーク)になったりして戸惑うし、デバイスの不具合にソフトのショートカット設定とかを合わせたくない

# ドライバを入れ直したりするのは面倒
環境を汚したくないので試していないが、SYNAPSE使わないって割り切ればドライバ入れ直したりしてもいいかも。
SYNAPSE自体は便利なので

# こうすればいい
世の中には便利な対応表が存在するので、多少の面倒には目を瞑って表を見ながら合わせる。
https://qiita.com/hachisukansw/items/efd4b3c2df7e6a8b3779
自分の環境の場合はJIS→USだったのでブラシサイズは以下のように設定すれば使えるようになった。

- ブラシ小さく( \[ )  ->  ] (後カッコ)
- ブラシ大きく( \] )  ->  \\ (バックスペース)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467754/a080d981-57e3-0fe7-bdbc-cfdf00175b24.png)

# Razerはもっと頑張ってほしい
本当は売り物なんだからソフト側のアップデートなりで企業が対応すれば済むはずのことなので、一日でも早くこのQiita記事が役に立たなくなることを望みます（威圧）
AlertDialogからmessageのViewを取得したい

## はじめに

AndroidのAlertDialogを使っていると、messageのViewを取得したいことがあります。
検索すると、AlertDialogをそのまま使っているパターンで、messageのTextViewを取得する方法が出てきます。
こんな感じで↓

```kotlin:
val builder = AlertDialog.Builder(context).apply {
    setMessage(message)
}
val dialog = builder.show()
val messageView = dialog.findViewById<TextView>(android.R.id.message)
```

しかし、[ダイアログ](https://developer.android.com/guide/topics/ui/dialogs?hl=ja)によるとAlertDialogはDialogFragmentで包んであげることが推奨されており、AlertDialogをそのままshow()する場面はあまり多くないと思います(少なくとも私の所属するプロジェクトでは)。
サンプルは以下の通りです([ダイアログ](https://developer.android.com/guide/topics/ui/dialogs?hl=ja)から抜粋)。

```kotlin:
class FireMissilesDialogFragment : DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        return activity?.let {
            // Use the Builder class for convenient dialog construction
            val builder = AlertDialog.Builder(it)
            builder.setMessage(R.string.dialog_fire_missiles)
                    .setPositiveButton(R.string.fire,
                            DialogInterface.OnClickListener { dialog, id ->
                                // FIRE ZE MISSILES!
                            })
                    .setNegativeButton(R.string.cancel,
                            DialogInterface.OnClickListener { dialog, id ->
                                // User cancelled the dialog
                            })
            // Create the AlertDialog object and return it
            builder.create()
        } ?: throw IllegalStateException("Activity cannot be null")
    }
}
```

## 問題点
この場合、どうやってmessageのTextViewを取得するか？
DialogFragmentのshowメソッドはvoidなので、冒頭で述べたような方法でshow後にAlertDialogを取得することはできません。DialogFragmentのインスタンスからgetDialog()して、findViewByIdしようとしてもgetDialogがnullを返すようです。
では、どうするか。

## 結論
DialogFragmentの`onStart`でfindViewByIdする。

```kotlin
class MyDialog: DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return activity?.let {
            AlertDialog
                .Builder(it)
                .setMessage("メッセージ")
                .setPositiveButton("OK", null)
                .create()
        } ?: throw IllegalStateException("Activity cannot be null")
    }

    override fun onStart() {
        super.onStart()
        val textView = (dialog as? AlertDialog)?.findViewById<TextView>(android.R.id.message)
        // 色を変える
        textView?.setTextColor(Color.BLUE)
        // 文字サイズを変える
        textView?.textSize = 40f
    }
}
```


無事、文字の色とサイズを変更することができました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360735/b2dfa5db-5fed-4e30-cc5b-1dc020ba08af.png" width=300px>
【エラー解消】rubocop returns empty output! please check configuration

いつからか VScode で ruby-rubocop を使っているときに rubocop が動かなくなっていた。

`command /Users/X/.rbenv/shims/rubocop returns empty output! please check configuration` という Warning が出ていて、ぐぐると which rubocop した結果を Execute パスに貼ったら動いたという記事をよく見かけるが、自分の場合は直らなかった。

empty output ということなので実際にどのような値が帰っているのか `sh /Users/X/.rbenv/shims/rubocop` をしてみたら `cannot load such file -- rubocop-rails` というエラーが出ていた。確かに PC を変えてから gem のインストールはしていなかったのでこれが原因だと分かったのであった。

`gem install rubocop-rails` をして解決

対象の .rubocop.yml ファイルは以下のようになっているはず。


```
require:
  - rubocop-rails
  - rubocop-rspec
  - rubocop-performance
```

この場合は、後 rubocop-rspec と rubocop-performance もインストールする必要がある
Kotlinの繰り返し処理

初めに
===
Kotlinは繰り返し処理（forループ、whileループなど）に複数の書き方があるのでをまとめました

繰り返し処理
===

```kotlin
fun main(args: Array<String>) {
    val array = arrayOf('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
    'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z')

    var start = 0L
    start = System.nanoTime()
    for (item in array) {
        println(item)
    }
    println("======= for (item in array) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    for (i in array.indices) {
        println(array[i])
    }
    println("======= for (i in array.indices) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    for ((index, value) in array.withIndex()) {
        println(value)
    }
    println("======= for ((index, value) in array.withIndex()) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    array.forEach{
        println(it)
    }
    println("======= array.forEach ======== " + (System.nanoTime() - start))
     
    start = System.nanoTime()
    repeat(array.size) {
        println(array[it])
    }
    println("======= repeat(array.size) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    for (i in 0..array.size - 1) {
        println(array[i])
    }
    println("======= for (i in 0..array.size - 1) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    for (i in 0 until array.size) {
        println(array[i])
    }
    println("======= for (i in 0 until array.size) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    var i = 0
    while(array.size != i) {
        println(array[i])
        i ++
    }
    println("======= while(array.size != i) ======== " + (System.nanoTime() - start))
    
    start = System.nanoTime()
    var j = 0
    do {
        println(array[j])
        j ++
    } while(j != array.size - 1)
    println("======= do ======== " + (System.nanoTime() - start))
}
```

最後に
===
用途に合った繰り返し処理を選択しましょう

参考文献
===
https://kotlinlang.org/docs/control-flow.html#for-loops
[検索機能]検索機能におけるURLの特徴と活用例

# はじめに
世の中にはGoogle,Yahoo等検索サービスがたくさんあります。
さらに、検索サービス以外のwebサービスでも、Youtube,Twitter等それぞれの中での検索機能を持っているものがたくさんあります。
それらの多くにはあるURLの特徴があります。

# URLの特徴
Googleで"Qiita"を検索する場合、"Qiita"を入力欄に入れたうえで検索処理を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/e9f8fb24-956d-0728-52f4-4144fba53c6a.png)
その結果は以下のように検索結果ページに遷移し表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/7c98d684-ce76-5c7c-a7ff-1a7490e64a33.png)
そのページのURLは下記のとおり

```
https://www.google.co.jp/search?q=qiita&sxsrf=… ※以下省略
```

URLの中に検索ワード"Qiita"が入っています。ここで入っている"qiita"の役割はもちろん検索ワードであり、
これを"Java"に変えてみると…"Java"の検索結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/b8a55731-7999-83c7-ceed-5c90512acdb0.png)
これはyahoo,youtube,twitter等でも同じです。

```
Google
https://www.google.com/search?q=[検索文]
Yahoo
https://search.yahoo.co.jp/search?p=[検索文]
bing
https://www.bing.com/search?q=[検索文]
wikipedia
https://ja.wikipedia.org/w/index.php?search=[検索文]

Youtube
https://www.youtube.com/results?search_query=[検索文]
niconico
https://www.nicovideo.jp/search/[検索文]

twitter
https://twitter.com/search?q=[検索文]
facebook
https://www.facebook.com/search/top?q=[検索文]
```

## この特徴は何者か
各検索機能のURLにある"q=[検索文]"のような部分はクエリストリング（クエリ文字列、URLパラメータ、リクエストパラメータ）です。クエリストリングによって表示する検索ワードを検索機能に渡しています。
HTTPの2メソッド、GET/POSTのうち、クエリストリングはGETメソッドのみ入ります。

各検索機能でGETメソッドを使っている理由は、サイトの閲覧履歴に検索結果を残すためです。
[こちらも参照：HTTPとは？GETとPOST？](https://qiita.com/norichang/items/7dcb2aedbb67fab341cc)
検索結果のページは履歴から再閲覧・ブラウザバックで再表示できると便利ですよね。

## この特徴の活用例
この特徴は、検索ポータル(ポータルサイト)を作るときに活用できます。
検索ポータルは、インターネットに検索でアクセスするときの入り口となるWebサイトで、
URLの特徴を生かすことで、複数のサイトでの検索を1つのフォームで切り替え実行できます。
仕組みはクエリストリングの前につけるURLを検索サイトにより切り替えるだけ。
[当該コード](https://github.com/HagiAyato/HagiAyato.github.io/blob/master/MySearch/script/script.js)
###[実装例](https://hagiayato.github.io/MySearch/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/9f33a5cd-9741-80c6-7e2c-720b24a789b2.png)
※検索サイトは、javascriptを改変することで自分好みに追加・改変可能です。

# まとめ
各検索機能のURLにはクエリストリングがつき、ここに検索ワードが入ります。
これによってサイトの閲覧履歴に検索結果を残すことが可能になります。
【エラー備忘録】コンソール にtypeerror vue.use is not a function laravelと出る

##状況

Laravelでアプリケーションを作成している時のこと。

サーバーを起動してlocalhost:8000を開くが、画面に何も表示されない。
検証ツールでコンソールを見てみると、

```
typeerror Vue.use is not a function laravel
```
と出ている。

##原因・解決策
関数が定義されていないか、定義したのに読み込まれていないと考え、問題点を探る。


resources/js/app.jsにて

```
Vue.use(VueRouter);
```
という記述しているが、先頭に

```
import Vue from 'vue'
```
をインポートしていなかったので書き加えたところ、正常に表示できた。
初心者が複数言語を同時に勉強すると

#どう進めているのか
ここまで、progateを用いて

・Ruby→１周目
・HTML→初級道場まで
・SQL→SQLIIまで

を同時にすこしづつ進めてきました。
飽き性ということもあり、飽きずにやろうと考えた結果、同時に進めています。
##同時にやってみてどう感じているか
簡単なプログラミングノートに必要な部分のみをまとめながら学習しています。とりあえずなんとかできているのかなというような現状です。

やっぱり、いろいろ同時に進めると、今日はRubyには飽きたからSQLをやろう、というようなことができるので、学習時間を苦がなくのばせています。

同時に複数の言語に触れているので、完全に忘れてしまうということも回避できますし、多少忘れてもノートを見れば思い出せるので問題はないです。
なによりフロント、バックエンド、データベースを同時に触れることで繋がりを意識しながら学べるのは大きな利点となっています。


ただ、細かい文法が混ざってしまうという弊害はあります。
僕の場合、不安になるとノートで確認するといった感じです。
（僕の場合、Pythonもかじっていたので結構混ざります。）
###今からやる人へ
結論としては、進め方は人それぞれの性格や能力に合わせて決めていくのがいいのかなと思います。
僕のように、飽き性な方にとっては割とよいのでは？と感じているので、同時に進めたい人は自分の適性を考えたうえでやるといいと思います。

以上です。先駆者さまの意見も聞いてみたいのでコメントなどよろしくお願いします。
ROS 点群をHSIカラーフィルターにかける

#はじめに
今回はjsk_pcl_rosにあるhsi_color_filterを使用し、入力点群から特定の色の点群を抽出します。

#試す

以下パッケージにサンプルを作成したのでこれを使用します。

https://github.com/hoshianaaa/jsk_pcl_ros_samples

```bash:install
sudo apt-get install -y ros-melodic-jsk-pcl-ros
sudo apt-get install -y ros-melodic-jsk-visualization
git clone https://github.com/hoshianaaa/jsk_pcl_ros_samples.git
cd ~/catkin_ws

catkin build 
または
catkin make

source ~/catkin_ws/devel/setup.bash

```

```bash:実行
roslaunch jsk_pcl_ros_samples hsi_color_filter.launch
```

もとの点群は以下です。
![Screenshot from 2021-03-30 22-29-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/6d08612a-f62b-5386-6a9f-cae07a5811ce.png)

以下のように緑色の部分の点群を抽出できました。
![Screenshot from 2021-03-30 22-29-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/838b126a-b373-0e9a-919a-810e7a74b7b4.png)


#サンプル解説

サンプルは以下のようになっており、jsk_pcl_rosのhsi_color_filter.launchの入力トピックを適切に設定すると使用できます。今回はネームスペースを"hsi_color_filter"トピック名を"points"としています。
![Screenshot from 2021-03-30 21-28-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/c6bd951d-4df0-d23b-f30a-00b59b8e1787.png)

```xml:hsi_color_filter.launch
<launch>
  <arg name="gui" default="true"/>

	<arg name="file_name" value="$(find jsk_pcl_ros_samples)/pcd/region_growing_rgb_tutorial.pcd"/>

	<arg name="rate" value="0.1"/>
	<node pkg="pcl_ros" type="pcd_to_pointcloud" name="pcd_to_pointcloud" args="$(arg file_name) $(arg rate)" output="screen">
		<remap from="cloud_pcd" to="hsi_color_filter/points"/>
		<param name="frame_id" value="base_link" />
	</node>

  <include file="$(find jsk_pcl_ros)/launch/hsi_color_filter.launch">
    <arg name="DEFAULT_NAMESPACE" value="hsi_color_filter"/>
    <arg name="INPUT" value="points"/>
    <arg name="h_max" default="43" />
    <arg name="h_min" default="127" />
    <arg name="s_max" default="194" />
    <arg name="s_min" default="12" />
    <arg name="i_max" default="200" />
    <arg name="i_min" default="80" />

  </include>

  <group if="$(arg gui)">
    <node name="rviz"
          pkg="rviz" type="rviz"
          args="-d $(find jsk_pcl_ros_samples)/rviz/hsi_color_filter.rviz"/>
  </group>
</launch>

```

参考

https://jsk-docs.readthedocs.io/projects/jsk_recognition/en/latest/jsk_pcl_ros/nodes/hsi_color_filter.html
TypeScriptでクラスの型定義をする

#対象
TypeScriptの初心者

##前提知識

- JavaScriptの基礎
- オブジェクト思考

## TypeScriptのクラス型定義

クラスを使う場合もjavascriptと同じ様に定義をすることができます。
そこに型を追加していくだけです！！

```class.ts
class Person {
  name: string;
  age: number;
  constructor(initName: string, initAge: number) {
    this.name = initName;
    this.age = initAge
  }
  incrementAge() {
    this.age += 1;
  }

  greeting(this: Person) {
    console.log(`Hello my name is ${this.name} i am ${this.age} years old`)
  }
}
const quill = new Person('Quill', 38);
quill.greeting();
quill.incrementAge();
```

今回はこんな感じでPersonクラスを作成していきます。
nameとageプロパティをとっています。
まずはここでのオプションを紹介していきます。

```class.ts
//何も指定しないとpublicになる
name: string;
//プライベートにする場合(他のクラスからアクセスできなくなる)
private name: string
//publicとprivateの中間(継承先のクラスでは使用できる、ただし変更はできない)
protected name: string
//読めるだけ
readonly name: string
```

##クラスを継承する場合の書き方

```class.ts
class Person {
  name: string;
  protected age: number;
  constructor(initName: string, initAge: number) {
    this.name = initName;
    this.age = initAge
  }
  incrementAge() {
    this.age += 1;
  }

  greeting(this: Person) {
    console.log(`Hello my name is ${this.name} i am ${this.age} years old`)
  }
}
const quill = new Person('Quill', 38);
quill.greeting();
quill.incrementAge();

class Teacher extends Person {
  constructor(name: string, age: number, public subject: string) {
    super(name, age);
  }
  greeting() {
    console.log(`Hello my name is ${this.name} i am ${this.age} years old`)
  }
}
const techer = new Teacher("Quill", 28, "Math");
techer.greeting();
```

通常bのES6通りextendsで継承することができます。
こちらはES6の話になりますが、継承先でconstructorを使う場合はかならずsuperを使いましょう。


##classにstaticを定義する
TypeScriptでもES6同様にstaticを定義することができます。

```class.ts
class Person {
  static species: string = 'Home sapiens'
  static isAdult(age: number) {
    if (age > 17) return true;
  }
  constructor(public name: string, protected age: number) {
  }
  incrementAge() {
    this.age += 1;
  }

  greeting(this: Person) {
    console.log(`Hello my name is ${this.name} i am ${this.age} years old`)
  }
}
```

今回はstaticを指定しています。
これにアクセスするためには
```
Person.species
```
でアクセスすることができます。
またこれはクラスないでもアクセスすることができます。


お疲れ様でした！

##参考サイト
Udemyの講座
PythonでExcel操作【openpyxl - セルのスタイルを制御する】

### 概要
`openpyxl.styles.`配下に様々なモジュールが用意されており、それぞれ呼び出して設定していく。
全てのモジュールの詳細は：[openpyxl公式ドキュメント](https://openpyxl.readthedocs.io/en/stable/styles.html)

### 実装後イメージ
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233009/4735fe29-64b8-fc0b-6d83-3da717aa977d.png)

###　コード
```python:
import openpyxl as xl
book = xl.Workbook()
sheet = book.active

# 幅(B列の)
sheet.column_dimensions["B"].width = 40 
# 高さ
sheet.row_dimensions[2].height = 40

cell = sheet["B2"]
cell.value = "テスト文字列"

# テキスト配置
from openpyxl.styles.alignment import Alignment
cell.alignment = Alignment( # Aligment === xl.stylex.Alignment
    horizontal = "center", # 水平位置
    vertical = "center" # 垂直位置
)
# 羅線
from openpyxl.styles.borders import Border, Side # Border = 罫線, Side = 罫線スタイル
cell.border = Border(
    top = Side(style = "thin", color = "000000"), # Sideを代入しないと "TypeError: expected <class 'openpyxl.styles.borders.Side'>"
    right = Side(style = "thin", color = "000000"),
    left = Side(style = "thin", color = "000000"),
    bottom = Side(style = "thin", color = "000000") 
)
# フォント
from openpyxl.styles import Font
cell.font = Font(
    size = 14,
    bold = True,
    italic = True,
    color = "FFFFFF" # 白
)
# 背景色
from openpyxl.styles import PatternFill
cell.fill = PatternFill(
    fill_type = "solid", # ベタ塗り
    fgColor = "FF0000" # 赤
)

book.save("cell_style.xlsx")
```