OmniAICreator/Qiita-1.07M huggingface dataset:
名前付けアンチパターン WEB+DB PRESS Vol.110 より

WEB+DB PRESS Vol.110 特集記事「名前付け大全」は大変興味深い内容でした。

身の回りのプログラムを眺めていると、なんとも味わい深い名前が使われていたり、人間には理解不能な名前（MAD666みたいなの）が使われていることが多いです。英語がわからないことが理由かと思っていましたが、実は英語圏のひとも名前付けは難しいと感じていることがわかりました。

せっかくなので、記載されていたアンチパターンを身の回りの事例を混じえてまとめてみます。

__注:この文章は、当該記事を読んだ自分が理解できた内容をまとめたものです。元記事の主張とは異なる可能性があります。__

# 名前の意味と挙動の意味がずれている

トイレで用件を済ませて「おしり」と書いてあるボタンを押したら、おしりじゃなくて前が洗われるようなパターンです。
このずれを運用で回避するのは大変そうです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/176ea8f8-cfb7-f0ca-c5e3-874eda0bfe88.png)



# 名前の意味が狭すぎる

トイレで用件を済ませて「おしり」と書いてあるボタンを押したら、おしりを洗ったついでに乾燥して流してくれるようなパターンです。
初見殺しですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/2df4132a-b981-df84-da53-6d3a949f7f8b.png)



# 名前の意味が広すぎる

おしりを洗うボタンに「洗浄」と書いてあるようなパターンです。
どこを/なにを洗浄するのでしょう……？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/19111de1-a725-4beb-41bf-f71bbcbbe28b.png)


# アンチパターンは他にもいろいろ

記事では、さらに以下のパターンが紹介されていました。

* 安易な単語を選ぶ
* 重要な単語を不用意に使ってしまう
* 実装変更により、既存の名前の意味が変わってしまう

どれもやりがちです。


# 名前付けは難しい

名は体を表すといいます。逆に言えば、体を表す名前をきちんと付ける必要があります。
しかも簡潔に、さらにできれば英語でいきたい。
これはベテランにも難しいことです。

# 日本語プログラミングのススメ!?

せめて英語の難しさを取り除くため、日本語でプログラムを書くのはどうでしょうか?

例えばこんなエンティティクラスやテストクラスです。

```c#
class HeroEntity {
    string 名前 { get; set; }
    Enumerable<int> 所属戦隊コード { get; set; }
    bool 生存フラグ { get; set; }
}
```

```c#
class ヒーローサービスのテスト {
    void HttpGetでオブジェクトを一つ取得する() {}
}
```

Javaはクラス名がファイル名になるため難しいですが、他の言語であればいけそうです。
現場によっては、検討の価値あると思います。
地図上にマーカーを落とし、その場所の緯度経度を取得する方法

GoogleMap APIを使い、地図上にマーカーを落とし、その場所の緯度経度を取得する方法を学んだので備忘録のため、書きます。
※APIキーは事前に取得している前提

###緯度・経度の入れ物を作る
new・editのページを想定して作っています。

```html:_form.html.erb
<%= form_with(model: place, local: true) do |form| %>
  <% if place.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(place.errors.count, "error") %> prohibited this place from being saved:</h2>

      <ul>
      <% place.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :latitude %>
    <%= form.text_field :latitude, {id: "target_latitude"} %>
  </div>

  <div class="field">
    <%= form.label :longtitude %>
    <%= form.text_field :longtitude, {id: "target_longtitude"} %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<style>
/* マップを表示する div 要素の高さを必ず明示的に指定します。 */
#map {
  height: 400px;
  width: 600px;
}
</style>

<div id="map"></div><!-- 地図を表示する div 要素（id="map"）-->
```

###javascript部分

```javascript:
  var map;
function initMap() {
 var myLatlng = new google.maps.LatLng(35.681167, 139.767052);
 //インスタンスを作成
 map = new google.maps.Map(document.getElementById('map'), {
  //地図のオプション
  //初期のズームレベル
  zoom: 12,
  //地図の中心点
  center: myLatlng
 });
 //マーカーの初期プロパティを指定
 marker = new google.maps.Marker({
  position: myLatlng,
  //ドラッグを許可
  draggable: true,
  map: map,
 });
 //マーカーのドロップ（ドラッグ終了）時のイベント
 google.maps.event.addListener(marker, 'dragend', function(e) {
  //イベントの引数eの、プロパティ.latLngがmarkerの緯度経度。
  document.getElementById( "target_latitude" ).value = e.latLng.lat(),
  document.getElementById( "target_longtitude" ).value = e.latLng.lng()
 });
}
google.maps.event.addDomListener(window, 'load', initMap);
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap" async defer></script>
```

参考文献：https://mapsflow.blogspot.com/2018/03/maps-javascript-api_22.html
redmineのガントチャートの開始月がイケていないので直してみた

redmineのガントチャートの開始月は、当月開始なので、月初めは前月のタスクが見えなくて使いづらい。なので、開始月を前月からのスタートにするように設定を変更します。

下記サイトを参考にしました。
https://blog.kakakikikeke.com/2012/09/redmine.html

#ソースコードの変更
変更するファイルは```/usr/src/redmine/lib/redmine/helpers/gantt.rb```です。
initialize関数の中のelseが変更対象で、オプションが特に指定されていない（デフォルトの状態）のときは現在の月と年を取得しています。

```
      def initialize(options={})
        options = options.dup
        if options[:year] && options[:year].to_i >0
          @year_from = options[:year].to_i
          if options[:month] && options[:month].to_i >=1 && options[:month].to_i <= 12
            @month_from = options[:month].to_i
          else
            @month_from = 1
          end
        else
          @month_from ||= User.current.today.month
          @year_from ||= User.current.today.year
        end
```

この記述を、下記の通り修正します。```@month_from```の値を-1することで、前月からの開始月の表示になります。また、1月にこの処理を実行すると、```@month_from```の値が0になってしまうので、12に修正のうえ、```@year_from```を前年（-1）にします。


```
      def initialize(options={})
        options = options.dup
        if options[:year] && options[:year].to_i >0
          @year_from = options[:year].to_i
          if options[:month] && options[:month].to_i >=1 && options[:month].to_i <= 12
            @month_from = options[:month].to_i
          else
            @month_from = 1
          end
        else
          @month_from ||= User.current.today.month - 1
          @year_from ||= User.current.today.year
          if @month_from == 0
            @month_from = 12
            @year_from = User.current.today.year - 1
          end
#          @month_from ||= User.current.today.month
#          @year_from ||= User.current.today.year
        end
```


#参考文献
* https://blog.kakakikikeke.com/2012/09/redmine.html
Illustrator javascriptとC#でのPageItem

#illustratorのオブジェクト
illustratorのオブジェクトにはGroupItemやPathItem等色々な種類があるが
その細かい種類に分類せずにとりあえずオブジェクト全般というものがあり、それが

**PageItem**　と　**PageItems**

例えばレイヤー内にGroupやPath、CompoundPath等色々入ってるけど
参照したいプロパティは、表示状態やロック状態等の
どのオブジェクトでも共通の場合にはPageItemを使用するほうが楽
※どの種類のオブジェクトか判断しないで良い為

ということで、良くPageItemを使うのですが
例えば、PageItemsを回して、個々のPageItemのプロパティにアクセスする場合

##javascriptだと以下のようになる

```javascript:pageItem.js
for(var i = 0; i < layer.pageItems.length; i++){
	var pageItem = layer.pageItems[i];
	
	$.writeln(pageItem.locked);
	$.writeln(pageItem.visible);
}
```


##C#のだと…(↓コンパイルエラーになる)

しかし、C#の場合にはPageItemsはあるがPageItemが無い…:cry:

```C#:pageItem.cs
foreach (PageItem pageItem in pageItems)
{
    Console.WriteLine(pageItem.Locked));
    Console.WriteLine(pageItem.Visible));
}
```

**じゃあvarにしたらいいんじゃないの？**

varにすると型がobjectとなってしまう。
っていうかそもそもPageItem自体が無いって話だから型推論もクソも無い:innocent:

###どうすりゃいいの？

###と思いましたがここで登場するはなんとあのダイナミックな奴:muscle:

##C#これが正解

```C#:pageItem.cs
foreach (dynamic pageItem in pageItems)
{
    Console.WriteLine(pageItem.Locked));
    Console.WriteLine(pageItem.Visible));
}
```

###その名の通りdynamicを使います:relaxed:

dynamicの説明はここではしませんが、ざっくりいうと実行時まで型がわからないjavascript的なvarです

なんでわざわざPageItemを実装せずdynamicを使用する仕様にしたのかはわかりませんが
C#でPageItemを使うときはこの方法で出来るようです。

ただ実行時まで型がわからないので、IDEでプロパティの候補が出ないし大文字小文字などの誤字もコンパイルエラーで教えてくれないのでそこがちょっと微妙ですね。
【Shopify | Object】Objectでできること（cart編） 

##cart（全12種）
###cart.attributes
```
<label>What is your Pet's name?</label>
<input type="text" name="attributes[your-pet-name]" value="{{ cart.attributes.your-pet-name }}" />
```
メールテンプレートの注文、チェックアウトの注文ステータスページでアクセスすることができる。
[Shopify UI Elements Generator]
(https://ui-elements-generator.myshopify.com/pages/cart-attribute)で作成できる。

###cart.cart_level_discount_applications
```
{% for discount_application in cart.cart_level_discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}
```
カート**固有**の[discount applications](https://shopify.dev/docs/themes/liquid/reference/objects/discount-application)(割引)の配列を返す。
###cart.currency
```
{{ cart.currency.iso_code }} 
// cart.currencyだけだと機能しない？のでiso_codeを追加すると、JPYなどと出力される。
```
カートの通貨を返す。ストアがマルチ通過を使っていれば、ローカルの通貨を返す。
###cart.discount_applications
```
{% for discount_application in cart.discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}
```
カートの[discount applications](https://shopify.dev/docs/themes/liquid/reference/objects/discount-application)の配列を返す。
###cart.item_count
```
{{ cart.item_count }}
```
カートのアイテム数を返す。
###cart.items
```
{% for item in cart.items %}
  {{ cart.item.product.title }}
{% endfor %}
// product（商品）のtitle（商品名）が表示される。
```
カート内の全てのアイテム([item](https://shopify.dev/docs/themes/liquid/reference/objects/line_item/))を返す。
###cart.items_subtotal_price
```
{{ cart.items_subtotal_price | money}}
// filterでmoneyを指定しないと104500などと表示されてしまう。
```
↓上記moneyを必要とすることは公式にも書かれていました。
![スクリーンショット 2020-06-15 9.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322356/eb91eac5-2d06-5927-93fa-1f6578e0a0fb.png)

税金、カートの割引、送料の含まれていない品目割引後の品目価格の合計を返す。
###cart.note
カートページの注文メモを表示。
```
{{ cart.note }}
```
textareaのname属性に'note'を追加し、{{ cart.note }}を入力するとメモ欄が出力される。
![スクリーンショット 2020-06-15 9.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322356/57ac6b5b-2419-54b0-fb22-e626d1fb073c.png)
![スクリーンショット 2020-06-15 9.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322356/614dfe11-4eae-ebe1-147a-1d79c4a835e8.png)

###cart.original_total_price
```
{{ cart.original_total_price }}
```
割引適用前の小計を返す。
###cart.total_discount
```
{{ cart.total_discount　}}
```
カートの全ての割引を返す。
###cart.total_price
```
{{ cart.total_price　}}
```
割引が適用された後のカート内のすべてのアイテムの合計価格を返す。 
###cart.total_weight
```
{{ cart.total_weight　}}
```
カートアイテムの合計重量を返す。
opossumでサーキットブレーカーを実装する(1)

# 概要
node.jsでサーキットブレーカーパターンを実装したライブラリ「opossum」の利用方法メモです。
バージョンはv5.0.0です。


# サーキットブレーカーパターン

外部システムやあるリソースと連携した処理を行う箇所にサーキットブレーカーパターンを入れておくと以下のような事が実現できます。

- 外部システム/リソースに障害が発生してエラーが多発する場合は、要求された処理を実行しない/処理数を制限する
- 外部システム/リソースがが正常処理できるようになった場合は、正常運転に戻す


具体的には外部システムの障害によってレスポンス遅延などが発生した場合には、リクエスト送信を遮断して連鎖的な発生を防ぐ。または、キャパシティを超えるリクエスト送信を制限してシステム全体のパフォーマンス劣化を防ぐ事ができます。

なので何か障害とか突発的なリクエストが発生した時に、慌てずにすみます、、。
(外部システムとの連携のお話だとネットワークの問題なのでアプリで実装せず、サービスメッシュで対応というのが今どきなんでしょうか)


>サーキット ブレーカー パターン - Cloud Design Patterns | Microsoft Docs
> https://docs.microsoft.com/ja-jp/azure/architecture/patterns/circuit-breaker


##状態遷移
サーキットブレーカーは、「クローズ」、「オープン」と「ハーフオープン」の3つの状態があり、状態によって要求された処理の実行をする/しないが決定されます。
ざっくり書くと下記のような感じです。

![サーキットブレーカーパターン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356515/cec077cc-34ea-d8e9-c772-8f10eb7efa5b.png)

- クローズ(close)
    - サーキットブレーカーの初期状態
    - この状態の時は要求された処理が実行される。
    - 実行した結果、エラーが発生してしきい値を超えると「オープン」状態に遷移
- オープン(open)
    - この状態の時は、要求された処理を実行せずフォールバック処理が実行される
    - 指定した時間が経過すると「ハーフオープン」状態に遷移する
    
- ハーフオープン(half open)
    - この状態の時も要求された処理を実行します。
    - 実行した結果、成功した回数がしきい値に達すると正常な状態に回復したとみなして「クローズ」に遷移します。
    - この状態の時にエラーが多発したら「オープン」に遷移します。


# opossum
githubで「circuit breaker」で言語をJavascriptにして検索して上位にあった「opossum」というサーキットブレーカーパターンの実装を試してみたいと思います。

nodeshift/opossum: Node.js circuit breaker - fails fast ⚡️
https://github.com/nodeshift/opossum

opossumはサーキットブレーカーパターンを組み込みたい処理を非同期な関数にして渡してやれば、にネットワークアクセスだろうが、リソースの読み書きだろうが何でも利用できます。

## 利用方法
オプションは省きますが最低限のサンプルは下記のようになります。
(サンプルの非同期関数は引数に"OK"を渡した時だけ成功するようになっています。\)

- サーキットブレーカーの対象となる非同期関数を実装する。
- opossumに引数で実装した非同期関数を渡す
- fallbackで非同期関数でエラーが発生した場合の処理を実装
- fireで非同期関数の実行


```javascript

const CircuitBreaker = require('opossum');

// サーキットブレーカーの対象となる非同期関数を実装
const asyncFunction = (arg) => {
  return new Promise((resolve, reject) => {
    arg === 'OK' ? resolve(`${arg}!!!`) : reject();
  });
};

// opossumに引数で実装した非同期関数を渡す
const circuit = new CircuitBreaker(asyncFunction);

// fallbackで非同期関数でエラーが発生した場合の処理を実装
circuit.fallback((arg) => {
  return `${arg}!!!`
});

(async () => {
  const ret = await Promise.all([
    circuit.fire("OK"),
    circuit.fire("NG"),
    circuit.fire("OK")
  ]);
  console.log(ret);
})();

```

実行結果は以下のようになります

```javascript

[ 'OK!!!', 'NG!!!', 'OK!!!' ]
```

#次回
次回で、opossumのオプションを指定して下記のようなケースでの利用方法を試してみます。

- 同時実行数が想定したキャパシティを超えそうな場合は処理数を抑制して、キャパシティ超えを防ぐ
- 外部システムで障害が起こった場合に、リクエストを送信しないでフォールバック処理を行う


----
###We're hiring!
AIチャットボットを開発しています。
ご興味ある方は<a href="https://www.wantedly.com/projects/266837">Wantedlyページ</a>からお気軽にご連絡ください！
〔Nameplate and Its details〕

　one of idiomsである伝票モデル viz., 〔注文∋注文詳細〕のone of usages．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235834/00ab7ba6-cacd-1833-2773-7a7dec91a16e.png)
AWS 上に構築した Laravel 環境での sudo php artisan 実行時に環境変数が適用されずにハマった話

AWS Elastic Beanstalk で構築した Laravel 環境で、普段から問題なく実行できていた artisan コマンドが失敗する事態に遭遇しました。
問題の切り分けに苦戦して結構ハマったので原因と解決方法を共有します。

## TL;DR

- `sudo php artisan` の形で実行すると必要な環境変数が引き継がれずに失敗する。
- `sudo su -` で root ユーザーとして実行すれば問題ない。

## 事象

`eb ssh` で EC2 インスタンスにログイン後、以下のように artisan コマンドを実行する[^sudo-php-artisan]もエラーが発生してしまいました。

[^sudo-php-artisan]: 導入しているパッケージの関係で権限の問題があるため `sudo` で実行しています。

```bash
$ sudo php artisan

In ClientResolver.php line 397:

  Missing required client configuration options:

  region: (string)

    A "region" configuration value is required for the "translate" service
    (e.g., "us-west-2"). A list of available public regions and endpoints can be
    found at http://docs.aws.amazon.com/general/latest/gr/rande.html.
```

region 関連の設定が漏れているようですが、関連しそうな環境変数は Elastic Beanstalk の [環境プロパティ](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/environments-cfg-softwaresettings.html) から設定しており、 `env` でも EC2 インスタンスに反映されていることが確認できました。

```bash
$ env | grep AWS_DEFAULT_REGION
AWS_DEFAULT_REGION=us-east-1
```

Laravel 側で設定を上手く読み込めていない可能性も考えましたが、 `dd` で dump しても設定されていることが確認できる状態でした。

## 原因

Elastic Beanstalk やアプリケーションの問題ではなく、 `sudo` コマンド実行時の挙動として必要な環境変数が引き継がれていないことが原因でした。
[`sudo` コマンド実行時の環境変数の扱いは `/etc/sudoers` に記載されている](https://qiita.com/chroju/items/375582799acd3c5137c7) ので、中身を確認してみます。

```
Defaults    env_reset
Defaults    env_keep =  "COLORS DISPLAY HOSTNAME HISTSIZE INPUTRC KDEDIR LS_COLORS"
Defaults    env_keep += "MAIL PS1 PS2 QTDIR USERNAME LANG LC_ADDRESS LC_CTYPE"
Defaults    env_keep += "LC_COLLATE LC_IDENTIFICATION LC_MEASUREMENT LC_MESSAGES"
Defaults    env_keep += "LC_MONETARY LC_NAME LC_NUMERIC LC_PAPER LC_TELEPHONE"
Defaults    env_keep += "LC_TIME LC_ALL LANGUAGE LINGUAS _XKB_CHARSET XAUTHORITY"
```

`env_keep` に記載された環境変数が継承された状態でコマンドが実行されますが、基本的な環境変数以外は特に含まれていないことが分かります。
このため `AWS_DEFAULT_REGION` など幾つかの必要な環境変数が設定されていない状態で artisan コマンドが実行される形となり、前述のエラーが発生したようです。

## 解決方法

`sudo su -` で root ユーザーとして artisan コマンドを実行すれば環境変数が設定された状態なので成功します。

```bash
$ sudo su -
$ php artisan
```

普段はこちらの方法で作業していたのですが、何故か今回は `sudo` で実行していました...。

## まとめ

`sudo` で実行するか `sudo su -` 後に実行するかの違いを意識する場面はあまり多くないと思います。
ただ稀にこういった形でハマることもあるので、 Elastic Beanstalk のようにインフラの詳細をあまり意識しなくても良いサービスを利用していてもこの辺りの挙動は理解しておいた方が良さそうです。
filterを使って、目的のデータのみを抽出する

# 目的
スプレッドシートを二次元配列で扱う際、必要なレコードと不要なレコードをフィルタリングするために、filterを使って選別しました。

```
function filterPractice() {
  const IndexSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  let data_range = IndexSheet.getDataRange().getValues();
  //console.log(data_range);
  //配列の２番目要素が''の場合のみを抽出する
  let status_values = data_range.filter( function(record){return record[2] === ''});
  console.log(status_values);
}

```
Python超初心者の超初心者のためのPython #len関数

環境
windows7　（Mac Book Pro 16inch欲しい）
Visual Studio Code
chrome
python ver3.8.3

この記事はプログラミング初心者かつPython初心者に向けて記述します。

##len関数

len関数とは何でしょう？PCだと文字が見づらいかもしれません。
lエル、eイー、nエヌでlenです。
この関数は引数（ひきすう）に書いた文字列の長さや要素の数を教えてくれます。

「それが何？」と思いますが、様々なコードを書いていると時折見る関数です。
たぶんプログラミングでこの文字列の長さや要素の数が必要なんでしょうね。
ではどう書くのでしょうか？len関数は戻り値を文字数で返す組み込み関数です。書き方は至ってシンプル。

```python:len.py
len('文字列')
```
です。

例えば

```python:len.py
print(len('Michael Jackson'))
#15

print(len('おはよう　World'))
#10
```

このように文字列の長さ（数）を出力してくれます。

次に要素の数です。
リスト、辞書ではこのように出力されます。

```python:len.py

print(len(["Billie Eilish", "Beyoncé", "John Legend"]))
#3

print(len({"Ariana Grande": 1993, "LionelRichie": 1949, "CardiB": 1992}))
#3
```

このように要素の数が取れました。

fin

##目次

[Python超初心者の超初心者のためのPython #Hello World](https://qiita.com/Macchino5/items/ddc0f4abc6168bab3448)

[Python超初心者の超初心者のためのPython #こんがらがりやすいとこ](https://qiita.com/Macchino5/items/25862df5f851d09e55d4)

[Python超初心者の超初心者のためのPython #型（type）と型（type）の確かめ方](https://qiita.com/Macchino5/items/caf4d6936f274cd7502a)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：str編](https://qiita.com/Macchino5/items/23183f8b2a945d8ecc5e)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：int、float編](https://qiita.com/Macchino5/items/9d14ab0c50d228464eac)

[Python超初心者の超初心者のためのPython #.txtファイルを作業中の.pyで読み込む](https://qiita.com/Macchino5/items/6675f1079e9c9ed945bb)

[Python超初心者の超初心者のためのPython #関数1](https://qiita.com/Macchino5/items/c403a2a997a0247adc96)

[Python超初心者の超初心者のためのPython #関数2](https://qiita.com/Macchino5/items/95750957b6ce266add50)
go修行4日目 map型、関数

## map型

```golang

package main

import "fmt"

func main() {
	m := map[string]int{"apple": 100, "banana": 200}

	// 要素全部表示
	fmt.Println(m)
	fmt.Println(m["apple"])

	// 要素追加
	m["banana"] = 300
	fmt.Println(m)
	m["new"] = 500
	fmt.Println(m)

	// ないものを取り出そうとすると0になる
	fmt.Println(m["nothing"])

	// boolean型も返す
	v, ok := m["apple"]
	fmt.Println(v, ok)

	// boolean型も返す
	v2, ok2 := m["nothing"]
	fmt.Println(v2, ok2)
}
```

出力

```
API server listening at: 127.0.0.1:4056
map[apple:100 banana:200]
100
map[apple:100 banana:300]
map[apple:100 banana:300 new:500]
0
100 true
0 false
Process exiting with code: 0
```

## byte型

```golang

package main

import "fmt"

func main() {
	b := []byte{72, 73}
	fmt.Println(b)
	// stringにキャスト ASCIIコード
	fmt.Println(string(b))

	c := []byte("HI")
	fmt.Println(c)
	fmt.Println(string(c))
}
```

```
[72 73]
HI
[72 73]
HI
```

## 関数

```golang

package main

import "fmt"

// 関数
func add(x int, y int) {
	fmt.Println("add function")
	fmt.Println(x + y)
}

func main() {
	add(10, 20)
}
```

```
add function
30
```

### 複数の戻り値をInt型で返す

``` golang
package main

import "fmt"

// 返り値を右にかく
func add(x int, y int) (int, int) {
	return x + y, x - y
}

func main() {
	r1, r2 := add(10, 20)
	fmt.Println(r1, r2)
}

```

```
30 -10
```
VSCode拡張：Live Server：Windows10でローカルネットワーク内からアクセスできるように設定

# 1. 現象

Windows10のVSCodeで起動した[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)に、ローカルネットワーク内の別端末からIPアドレス(192.168.X.Xなど）を指定してアクセスする。

しかし、接続がタイムアウトしてしまう。

# 2. 原因

　Live Server用のポートが閉じられている。

# 3. 対応

## (1) 概要
　Windowsのシステム設定にて、Live Server用のポートを開放する。

## (2) 手順

1.Windowsキーを押す。（ソフトウェア、キーボードどちらでもOK）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/269d1779-ddcc-7870-2155-d1a75499f9d6.png)

2.「セキュリティが強化されたWindows Defenderファイアウォール」と入力。（おそらく、「セキュリティが」ぐらいまで打つと選択肢がでる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/00d6eb6f-736b-6f63-2dd9-bcff492ed330.png)

3. 「受信の規則」> 「操作：新しい規則」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/9bf5712c-7f4a-6e52-fe4f-080ccd1a7594.png)

4.「ポート」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/24e7bcf0-eb64-044d-6b49-f8d434b2c24b.png)

5. 「TCP」、「特定のローカルポート」を選択肢、ポート番号としてLive Serverのポートを入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/d466050c-6374-6b89-ebc9-00632b34c496.png)

6.「接続を許可する」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/5f2dfac5-4b7f-5155-beda-6fea7ae13505.png)

7. 「パブリック」のチェックボックスを外す。（念の為。つけてても接続には影響無いが、公衆無線などで繋がれてしまう。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/0750e212-5063-a10b-b6c0-fcb2b4b0e839.png)


8. 規則の名前を入力して、「完了」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/ae34373c-bb21-af12-d7db-cf4e0ef57a69.png)

9.コマンドプロンプトに「ipconfig」と入力し、端末のIPアドレスを確認する。

10.項番9で確認した、IPアドレスとLiveServerのポート番号を、同一ネットワーク内の別端末のブラウザで入力しアクセス。

以上。
対象シートの任意の範囲を配列で扱い、かつシート名を配列要素の先頭にしてまとめシートへセットする

# コメントはコードの中にコメントアウトして書きました。
```
function pasteItems(){
  // 貼り付け先のシートをインスタンス化する
  const AllOptionSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('AllOption');
  //対象シートをA列の下から上に向かって最終行を取得する
  let last_position = AllOptionSheet.getRange(AllOptionSheet.getMaxRows(), 1).getNextDataCell(SpreadsheetApp.Direction.UP).getRow();
  //最終行に＋１することで、最終行の一つあとのセルを操作する
  let start_position = last_position + 1;
  //取得したいデータ一覧を返す関数を実行する
　let data_values = getDataRange();
  // length method index is 1.
  //貼り付け先のシートへ、取得したデータ一式を二次元配列としてセットする
  AllOptionSheet.getRange(start_position, 1, data_values.length, data_values[0].length).setValues(data_values);
}
//取得したい関数の一覧を取得する関数
function getDataRange() {
  const IndexSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  let data_range = IndexSheet.getDataRange().getValues();
  //ヘッダとなる１行目を削除
  data_range.shift();
  //二次元配列を一次元配列へ変換する
  let original_list = data_range.map(function (record){return record[0]});  
  //処理結果を全て格納する配列を作成する
  let total_data_range = [];
  for(let sheet of original_list){
    //処理対象となるシートをインスタンス化する
    let targetSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheet);
    //A列にあるキーワードを探すためにA列を二次元配列で取得する
    let column_A_values = targetSheet.getRange('A:A').getValues();
    //二次元配列を変換する
    let convert_list = column_A_values.map(function(element){return element[0]})
    //キーワードとなる文字の位置を取得する
    let keyword_OptionId_position = convert_list.indexOf('OptionId') + 1;
    //キーワードを基準に選択範囲を四方向へ延長する
    let extention_range = targetSheet.getRange(keyword_OptionId_position, 1).getDataRegion().getValues();
    // タイトルとヘッダの２行を削除する
    extention_range.splice(0, 2);
    //各要素の先頭にシート名を追加する
    for (let record of extention_range){
      record.unshift(sheet);
    }
    //処理結果を全て格納する配列に格納する
    total_data_range.push(extention_range);
  }
  //3つ分ネストしているので、１つ分ネストを減らし、二次元配列にする
  let flat_array = total_data_range.flat();
  console.log(flat_array);
  console.log(flat_array.length);
  return flat_array;
}

```
業務アプリの銀の弾丸、OOUI本を読む

# OOUI本とは

OOUI、すなわち、オブジェクト指向ユーザーインターフェース（Object-Oriented User Interface）。
この技術は昨年のWEB+DB PRESS Vol.107でも取り上げられましたが、単著となって[オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理](https://www.sociomedia.co.jp/10046)という本として出版されました。図やイラストも多く、大変読みやすい本です。

# 3行でまとめる
* 業務用アプリケーションに関わる人は読んだほうがいい
* タスク指向とオブジェクト指向でUIを分類し、業務アプリケーションでは特に後者のアプローチが有効
* ワークアウトが充実しているので、実践的なOOUI設計の手順を知れる

# 書かれていること
オブジェクト指向の、What（そもそも何か）、How（どのように設計・実装するのか）、Why（なぜ使うのか）が書かれています。業務アプリケーションに限らず、ゲームなどのソフトウェアでも、アイテムを選択する際のUIだったりには適用できる部分が多いと思います（というか、むしろゲームではすでにOOUIで作られている部分が多いかもしれません。。。）
また、SIerだけではなく、自社サービスを作っている場合でも、大抵の場合は運用のためにカスタマーサポートさんたちが使う業務用アプリケーションが作られます。よって、対象読者は結構広い範囲に及ぶかと思います。

流れとしては、Whatが1章に、Howが2〜5章、Whyが6章にまとまっています。
主に扱っているのは、よくあるECサイトや業務アプリケーションです。

## What（1章）
まず、1章で業務アプリケーションのUI設計の手法として、オブジェクト指向とタスク指向を比較しています。
また、なぜ業務アプリケーションがタスク指向で作られてしまうのか、という疑問も「1-5 UIがタスク指向になってしまう背景」で説得力を持って分析されています。

## How（2章〜5章）
2章で設計の概要を述べ、3章でかなり具体的な事例を扱って実践してく様子を解説しています。
4章、5章はしっかりとしたワークアウトとなっています。基礎的な練習から業務ではよくある、段階的に要求が変化していく場合のものもあり、大変参考になります。

## Why（6章）
章のタイトル「オブジェクト指向UIのフィロソフィー」の通り、背景となる哲学からコンピュータにおけるユーザーインターフェースの歴史までを元に、**そもそもGUIはオブジェクト指向である**ということが書かれています。このあたりはUIの専門の方ならご存知かもしれませんが、50年前ぐらいからの流れがコンパクトにまとまっています。

# WebアプリケーションとOOUI
自分が大体Webアプリケーションを作っているので、そのへんとの関連をつらつら書いてみます。

## Webフレームワークにはある程度取り込まれている
RailsのようなWebのフレームワークは、最初からある程度OOUIになるように作られています。手前味噌ですが、そのあたりは別記事である[RailsにおけるOOUI](https://qiita.com/iwtn/items/767bf742286596847c99)に考えをまとめてあります。
この本の中にもありますが、オブジェクト指向UI自体はかなり昔からあり（本の中では「古くて新しい」と表現されています）、そういった意味ではベストプラクティスとしてすでに普及していると考えていいでしょう。ただ、業務アプリケーションではタスク指向で実装されてきた歴史があるようです。

## フロント周り
Webアプリケーションは永続化するのがサーバ側にあり、モードレスで作ることが一定難しいです。しかし、これは近年ではバックエンドのAPI化やフロントエンドの高度化によって解消されつつあります。
オブジェクトの一覧、コレクションを表示する際には様々な表示方法が考えらるので、そのあたりの表現を充実させる必要があるかと思います。時系列や地図表示、それらを組み合わせたものなど、情報の表示の仕方はいくらでもありますし、状況に応じて必要な表示方法も細分化していくでしょう。
また、レガシーなアプリのUIの改善として、今までタスク指向だったUIをオブジェクト指向に変換する仕事は増えるかもしれません。

## 企画者とのやりとりの仕方
機能の実装を提案してくださる方々は、画面のモックアップを書いてくださることが多いです。第4章に出てくる以下の図の右側の部分です。

<img width="477" alt="スクリーンショット 2020-06-15 7.30.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16864/2f04d275-8958-f317-b6ca-9c4cbd2f5e09.png">

（オブジェクト指向UIデザイン 137ページより抜粋）

しかし、ユーザのメンタルモデルであり、アプリケーションの操作対象となるオブジェクトを抽出するところ（図の左上）までをまとめていることは中々ありません。アプリケーションをデザインするのであれば、ユーザーのメンタルモデルであるオブジェクトが何であるのかを明確にしないと、それは設計（デザイン）とは言えないでしょう。これは**アプリの企画者と開発者でデザインをする人が分離されている**ということです。それでは良いアプリケーションは生まれそうにありません。この本の中でも、モデル、インタラクション、プレゼンテーションを行ったり来たりすることが大事だと書かれています。
開発時には、ラフでも良いのでこういった図を使って、企画者と頭の中を揃えるとより良いアプリを作れるようになるかと思います。

また、ここまでモデルがしっかり作られていれば、NoCode系のツールで（簡単なアプリケーションなら）作れてしまいそうです。
弊社（リブセンス）では、10％ルールという形で業務時間の一部を実験的な技術を試したりすることができます。
その時間を使ってAppSheetというNoCodeツール（Googleが昨年買収した）を試してみたところ、モデル（主にデータ周り）を設計し、それを一覧と詳細で表示、新規作成・更新・削除といったOOUIで操作が可能なアプリをプログラミングせずに実装できました。
これはある意味、Railsでアプリケーション部分**だけ**を書いてきたようなITエンジニアには辛い時代と言えるかもしれません。

# まとめ
ざくっと書いてみました。
個人的には、コンピュータを道具としてより扱いやすくしていくために、積極的にオブジェクト指向UIでアプリケーションが実装して行きたいと思います。もちろんタスク指向が向いている場合もあるのですが、そういった場合を見極める方法もこの本の中に書かれています。
そういった意味でも、業務アプリケーションに関わる方であれば職種を問わずおすすめできます。
6章あたりは特に大好物でした。技術に歴史ありですね。
ワークアウトをしっかりやると読むのに時間がかかると思います。しかし、[研修コース](https://www.sociomedia.co.jp/9556)などもあると聞いておりますので、そちらを受けてみるのも良いかもしれません。
dockerでERROR: An HTTP request took too long to complete. と表示されるエラー

# 問題

ERROR: An HTTP request took too long to complete. と表示される。

```
ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug information.
If you encounter this issue regularly because of slow network conditions, consider setting COMPOSE_HTTP_TIMEOUT to a higher value (current value: 60).
```

# 原因？

EC2のメモリ容量不足？


# 解決法

停止コンテナ一括削除

```
$ docker container prune
```
全コンテナ一括削除

```
$ docker rm -f `docker ps -a -q`
```
再起動

```
$ docker-compose up
```

解決！

# 参考
https://qiita.com/boiyama/items/9972601ffc240553e1f3
https://dawaan.com/docker-for-mac-hung/

# コメント
その他、より良い方法や、ご指摘等御座いましたら、ご遠慮なくご教示ください。
宜しくお願いします。
Pythonでアルゴリズム（素数判定）

#はじめに
Atcoder Biginner Contest170にて、エラトステネスの篩の考え方を応用させるというのを見て、エラトステネスの篩すらまともに理解できてないままではいかんと思い執筆を決意しました。
実用性というよりは原理の理解のための記事なのでコンテスト中などにたどり着いた方は[こちら](https://ikatakos.com/pot/programming_algorithm/number_theory/prime_judge)
がおすすめです。(いつも参考にさせていただいているいかたこのたこつぼさんのHPです)
#素数判定
##試し割り法
　まずは、試し割り法と呼ばれる手法を用います。2よりも大きい数で順に割っていき、割り切れたらその数を約数に持つということなので素数ではありません。
　しかし、$N$まで全ての数で割っていく必要はありません。$N$が約数$d$を持つとすると、$N/d$も$N$の約数であり、どちらか小さい方で割れば十分です。小さい方が最大となるのは、これら2つが等しくなるときなので、(小さい方が大きい方を抜かすとそれはもう調べ終わっている) $\sqrt{N}$まで調べれば十分ということになります。
　以上より、この素数判定は$O(\sqrt{N})$で計算可能です。
　ここで、高速化のポイントとして、偶数を約数に持つなら2で割り切れているはずなので、2以降は奇数のみを調べると良いそうです。(今回は考慮しません)

```python
# O(√N)
def is_prime(n):
    if n == 1:
        return True
    for i in range(2, int(n**0.5) + 1):
        if n % i == 0:
            return False
    return True
```
##エラトステネスの篩
　次に、エラトステネスの篩という手法を見ていきます。これは、$N$以下の素数を全列挙してしまうという考えで、判定する対象が複数の場合は前処理さえしてしまえばあとは$O(1)$で判定可能になります。デメリットとしては、大きさ$N$の配列が必要となるので使用メモリがそれなりに大きくなります。
　ではどのように素数テーブルを作成するかを見ていきます。まず、すべての数を素数の候補と考えます。1は素数でないので候補から消しておきます。(配列の都合上、0も含んでしまっていますが素数ではないので消しておくという実装になっています)
　次に、2から順に小さい方から数を見て、もしその数が素数ならばその倍数は合成数となります。よって、倍数全てを候補から消していきます。このように篩にかけて候補から落としていくように見えるからエラトステネスの篩と呼ばれるっぽいです。
　計算量は、少し複雑ですが一応得た知見を垂れ流しておきます。各素数で割ることのできる回数は素数をpとすると$N/p$回で、最初だけ書くと
$$N(1/2 + 1/3 + 1/7 + ...)$$
となります。ここで、$N$までの素数の逆数和は十分大きい$N$に対して$loglogN$くらいらしい(詳しくはgoogle)ので、計算量は$O(NloglogN)$です。まあかなり$O(N)$に近そうだなと思います。
　これにも高速化のコツがあり、最初のループを$\sqrt{N}$までしか回さないとか2以降の偶数は省くとかいろいろありそうなので是非調べてください!(もちろん今回は反映していません)

```python
# O(NloglogN)
def eratosthenes_sieve(n):
    is_prime = [True]*(n + 1)
    is_prime[0] = is_prime[1] = False
    for p in range(2, n + 1):
        if is_prime[p]:
            for q in range(2*p, n + 1, p):
                is_prime[q] = False
    return is_prime
```
返すのは素数テーブルなので、一応使い方も書いておきます。

```python
n = 10
is_prime = eratosthenes_sieve(n)
print(is_prime[5]) # True
print(is_prime[10]) # False
```
#参考文献
・[いかたこのたこつぼさんのHP](https://ikatakos.com/pot/programming_algorithm/number_theory/prime_judge)
・[プログラミングコンテストチャレンジブック](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%82%B9%E3%83%88%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC2%E7%89%88-%EF%BD%9E%E5%95%8F%E9%A1%8C%E8%A7%A3%E6%B1%BA%E3%81%AE%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E6%B4%BB%E7%94%A8%E5%8A%9B%E3%81%A8%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E3%82%92%E9%8D%9B%E3%81%88%E3%82%8B%EF%BD%9E-%E7%A7%8B%E8%91%89-%E6%8B%93%E5%93%89-ebook/dp/B00CY9256C)
CakePHP3のTableクラスでMySQLのBIT型を利用する方法

# Overview
CakePHP3の`Migration`ファイル及び`Table`クラスで、
MySQLの[BIT型](https://dev.mysql.com/doc/refman/5.6/ja/bit-field-literals.html)を扱おうとした際に、調査とひと手間の実装が必要だったのでメモっておく。

#### ちなみに経緯は以下のような感じ
1. CakeアプリでDBにフラグ用カラムを追加したくなった
2. 下記記事などを参照してBIT型にしようと思った  
[MySQLに真偽値を格納する場合はbit(1)型のフィールドが最適 - Qiita](https://qiita.com/ka215/items/379c4d46d0c04b7fdb46)
3. 公式ドキュメントの [Migrations - 3.x](https://book.cakephp.org/migrations/3/ja/index.html#id8) にはPhinxで扱える型リストにはBIT型の記述がなかった
4. ただ調べたところ [Feature Request: MySQL BIT type · Issue #1106](https://github.com/cakephp/phinx/issues/1106) とか [Fix MySQL BIT Column Type (#1106) by shbmira · Pull Request #1248](https://github.com/cakephp/phinx/pull/1248?w=1) などがあるので利用できそうだった
5. `Migration`の記述はそのままで行けたが、`Seed`や`Table`での保存がうまく動作しなかった

# Environment
- CakePHP 3.7.6
- mysqld Ver 5.7.27

# Solutions
- マイグレーションファイルでのBIT型カラムの作成。  
  ここはそのまま型に`bit`を指定して動作した。

```
$table->addColumn('is_flag', 'bit', [
    'comment' => 'フラグカラム',
    'default' => 0,
    'limit' => 1,
    'null' => false,
]);
```

- BIT型カラムがある`Table`クラスで`_initializeSchema`メソッドをオーバーライドして  
  `setColumnType`関数にて、BIT型カラムに対して`boolean`を指定する必要があった。

```
class BitTable extends Table
{
    protected function _initializeSchema(TableSchema $schema)
    {
        parent::_initializeSchema($schema);
        $schema->setColumnType('is_flag', 'boolean'); # BIT型カラムに対して`boolean`を指定する
        return $schema;
    }
    
    ...
}
```

- 上記記述を追加した所、以下のようにCake側では`boolean`として、  
  またテーブルレコードとしてはBIT型の`b'0'`・`b'1'`として扱えるようになった。

```
# 疑似コード
$bitTableRecord->is_flag = true;
$bitTable->save($bitTableRecord);
```
まだDAX Queryの作成に消耗してるの？DAX StudioのQuery Builder機能の紹介

# 概要

DAX Studio 2.11.0にてプレビューとして実装されたQuery Builder機能をご紹介します。




GUIによるPivot形式でDAX Queryを記載できる便利な機能です。

>    ![image-20200612113028809.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/8a44fa5a-e930-0f3f-eb0e-172c020fb182.png)

引用元：[DAX Studio 2.11.0 Released](https://darren.gosbell.com/2020/06/dax-studio-2-11-0-released/)



下記のことが実施可能なため、開発プロセスにもすぐに組み込めます。

-   ディメンション、メジャーの選択

-   メジャーの作成

-   フィルター処理の実施

-   DAX Queryの出力

    



## 事前準備

### ①DAX Studioを起動後、"ファイル"タブを選択

![image-20200612110712894.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/0ba3bd46-ffec-f1a7-b23c-ce0afa9e0ccd.png)



### ②"Options"→"Advanced"→"Show Query Builder Button"にチェックを入れます。

![image-20200612110750793.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/24f4b596-a91a-db15-8655-9e5ef4273260.png)



### ③"Home"タブにある"Query Builder"が表示されていることを確認します。


![image-20200612110855699.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/879fedb6-d661-2eb1-bd60-1fd75c6c3424.png)


## 利用手順

### ①Power BI等のモデルに接続します。

![image-20200612111823567.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/e86cd7d5-9055-fe32-b9fc-669238d7b713.png)


### ②"Home"タブにある"Query Builder"を選択します。

![image-20200612111844551.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/8c2afc0a-9c85-98e5-af87-41127003a999.png)



### ③表示したい項目を、"Columns/Measures"にドラッグします。

![image-20200612112124375.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/9d3842a4-a34a-6c6f-461e-1d35a9b01174.png)



### ④フィルター処理したい項目を、"Filters"にドラッグし、フィルタ条件を選択・入力します。

![image-20200612112232184.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/ed0cee2e-5f43-836d-9156-aea3afc2313c.png)



### ⑤下部にある"Run Query"を選択後、実行結果が表示されたことを確認します。

![image-20200612112356539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/f56ddbb8-cf94-f517-0389-47f3c89e6441.png)



### ⑥"Edit Query"を選択することで、DAX Queryを出力できます。

![image-20200612112524908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281819/f5d90814-52c9-3bcb-2f64-51e70fe227e5.png)



以上です。
【Atcoder】ABC 170 D を茶コーダーが愚直な方法で解いてみた(C++)

#はじめに
**エラトステネスの篩**を知らない茶コーダーが、**連想配列**と**約数列挙**だけ使用して[ABC 170 D問題](https://atcoder.jp/contests/abc170/tasks/abc170_d)を愚直に解きます。

#問題文(公式サイトより引用)

>**問題文**
長さ $N$ の数列 $A$ が与えられます。
次の性質を満たす整数 $i (1 ≤ i ≤ N)$ の数を答えてください。
　・ $i ≠ j$ である任意の整数 $j (1 ≤ j ≤ N)$ について $A_i$ は $A_j$ で割り切れない
**制約**
　・入力は全て整数
　・$1 ≤ N ≤ 2×10^5$
　・$1 ≤ A_i ≤ 10^6$
**入力**
入力は以下の形式で標準入力から与えられる。
　$N$
　$A_1 \, A_2 \, ⋯ \, A_N$
**出力**
答えを出力せよ。

#方針
**各 $i$ に対し、 $A_i$ の約数 $d$ が $A_j$ と一致するかを調べる。**

　※計算量オーダーは$O(N×\sqrt{A_i})<O(10^9)$なのでC++ではギリギリ通りました。

#手順
1. サイズが$10^6$の連想配列$B[1000000]$に $A_1$ ~ $A_N$ を格納
2. 出力の初期値を $N$ に設定
3. 各 $i$ に対して以下を実行

　・$A_i$ の約数 $d$ を検索
　・以下の条件を満たす時、出力から $-1$
$\,\,\,\,\,\,\\,\,\begin{cases}
B[d]>0 & (d≠A_i)\\\
B[d]>1 & (d=A_i)
　　\end{cases}$
　　※入力例2 のように「Aの要素に同じ数が存在する」ケースを通すために、$(d=A_i)$の条件が必要です。

#コード
``` ABC_170_D.cpp
#include <math.h>
#include <iostream>
#include <stdio.h>

using namespace std;
typedef long long ll;

int main() {
    ll N;
    cin >> N;
    ll B[1000001];
    for(ll i=0;i<1000001;i++) B[i] = 0;
    ll A[N];
    for(ll i=0;i<N;i++){
        cin >> A[i];
        B[A[i]]++;
    }
    ll out = N;
    for(ll i=0;i<N;i++){
        for(ll j=1;j<=sqrt(A[i]);j++){
            if(A[i]%j == 0){
                if(A[i] == 1){
                    if((B[j] > 1)){
                        out--;
                        break;
                    }
                }else if(B[j] > 0){
                    out--;
                    break;
                }else if(j==1){
                    if(B[A[i]/j] > 1){
                        out--;
                        break;
                    }
                }else{
                    if(B[A[i]/j] > 0){
                        out--;
                        break;
                    }
                }
            }
        }
    }
    cout << out << endl;
    return 0;
}

```


#最後に
**連想配列**と**約数列挙**だけを使用して解くことができました。
ただし、問題条件が変わるとこの方法ではTLEになる可能性が高いです。
**エラトステネスの篩**を身につける必要がありそうです。
ＡＷＳでRailsを使ったサンプルアプリ作成進行状況

最近Webアプリ開発をしています。はっきりいって正直ステマに近い投稿なんですが、お察しを。
えと、ＡＷＳのＩＤＥを使って、ほかのプログラマと共同制作を最近始めました。

まだトップページのみですが、開発環境は以下のようにこんな感じです

|  |    |     |
|:-----------------|------------------:|:------------------:|
| 開発言語         |    Ruby |   
| フレームワーク          |    Ruby on Rails5 | 
|  クラウドＩＤＥ           |      AWS |
|  データベース          |      sqlite3 |

ＡＷＳ楽ですね
無料枠であればすぐ構築できますし、メンバーに権限わたして一緒に開発進められる

とりあえず、rails new~ でアプリファイル作って、そのあとにsqliteのバージョン更新をして、マイグレーションファイルの更新して
rails db...

rails sでサーバー起動してちゃんと実装できているかつど確認していますが
ルーティング記述は大事ですね。うん

いま制作はこんな感じです。






![IMG-2287 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639057/4f536e2d-f3bd-7834-c195-5ec2bebcd95b.jpeg)
![IMG-2324.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639057/a6f27d99-578a-f207-a00e-a54c7d9faeeb.jpeg)

Ｃｏｏを利用したモックアップはこんな感じ（やり途中）
![IMG-2531.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639057/68914447-c651-3463-8b95-ae7574750cbc.png)
初心者によるプログラミング学習ログ 345日目

#100日チャレンジの345日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
345日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>345日目　6h<br>・前にやった課題サイトのレイアウト見直し　4h<br>・架空LP模写13日目2.0h（<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a>）</p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1272261066878115840?ref_src=twsrc%5Etfw">June 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Ruby on Rails インストール方法【Mac編】

Qiita便利っすね。(Githubあまり慣れてない) 
開発してる最中につまずいても、同じ感じでエラー出て解決方法を解説してくれてる方いるからね。てな訳で、私も技術メモがわりにQittaに残します。

#＃とりあえず私の環境紹介
| 環境              |       バージョン    |    備考                    |
|:-----------------|------------------:|:------------------:        |
| macOS　Mojave    |10.14.6  |Macbookpro2017 13インチ      |
|     Homebrew     |0.95           |                           　|
|       Ruby       |2系    　　　      |        最新バージョン   　　　|
| rails5　　　    　　|5系  　　　　 |        　　　　　　　　　　 |



**Rubyフレームワークである
Ruby on Rails5のインストール方法を紹介します。初心者向けです。**

##前提
●Rubyが導入されていること
●Rubyのバージョンが2.2.2以上であること（Rails5系のため）以下の手順で説明します

(1)Homebrewのインストール
(2)rbevインストール
(3)Rubyインストール
(4)Railsインストール
(5)アプリの作成コマンド
(6)ディレクトリ移動して確認


#⑴ Homebrewのインストール
フレームワークであるRubyonRailsをインストールするにHomebrewをターミナルからインストールします

1.ターミナルを開きます。
(ターミナルはMacのLaunchpadかSpodlight検索より探せます)


2.以下のRailsインスト-ルコマンドを入力

```console
gem install rails -v "5.2.3
```
3.ちゃんとインストールされたか以下のコマンドでバージョンの確認をします

```console
rails -v
```

##アプリケーションの新規作成
以下のコマンドをコンソールに入力してください。アプリ開発に必要なファイルをRailsが全て用意してくれます。rails new ~(任意のアプリ名)でOKです

```console
rails new StopWatch  
```
アプリができたかどうか確認します。任意のディレクトリにcdで移動します

```console
cd /Desktop/StopWatch  
```

すると、データベースなどのアプリ内ファイルをすべてRailsが用意してくれていると思います。これでまずはアプリ開発のためのフレームワーク導入作業は終了です。お疲れ様でした

#次回内容
次はコントローラーとルーティング、ビューの作成方法、編集方法について記述していきたいと思います。
お手軽uplatexテンプレートと、wxmaxima

uplatexを使い始めたはよいが、tex関係の情報がさんざん散らばっていてエラーが出まくっていたので、落ち着いたところで、覚書を兼ねて記しておきます。upLaTeXの迷える子猫だったので、まだ迷っている人のために。

tex latex platex uplatexは微妙に違うのですが、Ubuntuで、和文で書く事もあり、新しいuplatexを使うこととします。それぞれの違いは検索して調べて下さい。

# uplatexのインストール

```
sudo apt install texlive-lang-cjk xdvik-ja evince texlive-fonts-recommended texlive-fonts-extra
```

参考
[Qiita:【Ubuntu 18.04 LTS に LaTeX をインストール】](https://qiita.com/BitPositive/items/6b13e2038d628c33be8e)
[Qiita:【Ubuntu上でtexをコンパイルしてpdfとして保存する】]
(https://qiita.com/ocian/items/0e679e8bf72a39ada335)

# お手軽uplatex template
uplatexを、インストールしたのは良いけれど、さて、ヘッダやら何やらの書き方が分からない時、下記のテンプレートに書けば、大体通ります。

この、テンプレートは、`\parindent = 0pt`で、自動インデント抑止を、`\gt`でゴシック体を指定してます。`\parindent = 0pt`とするのは、バッドノウハウだと言われてますが。

```template.tex
\documentclass[uplatex]{jsarticle}
\usepackage{amsmath,amssymb}
\usepackage{txfonts}
\parindent = 0pt
\begin{document}
\gt

＜ここに内容を書く＞

\end{document}
```

これで、template.texを元に書いた、ファイルfoo.texから、
`$ uplatex foo.tex`で、.dviファイルを生成し、
`$ dvipdfm foo.dvi`で、.dviファイルから、.pdfに変換すると出来上がりです。
#コマンド入力を簡単にする。

下記のコードを、.bashrcに書いておくと良いでしょう。
`$ tex exsample`
とすると、exsample.texから、exsample.pdfを出力します。platexは、エラーで停止したら、どうにもこうにもコントロールがきかないので、エラーで止まるようにしています。
.bashrcを書き換えたら、
`$ source .bashrc`
とすると、反映されます。


```
#TeXLive
function tex {
  uplatex -halt-on-error "$1".tex
  dvipdfm "$1".dvi
}
```

# サンプルTeXコード

```R.tex
\documentclass[uplatex]{jsarticle}
\usepackage{amsmath,amssymb}
\usepackage{txfonts}
\parindent = 0pt
\begin{document}
\gt
\fontsize{15pt}{22pt}\selectfont

回転行列を求める。
\\
基本ベクトル
$\vec{e}=(1,0),\vec{f}=(0,1)$
を、角$\theta$回転すると、\\
$\vec{e'}=\left(\cos\theta,\sin\theta\right),\vec{f'}=\left(-\sin\theta,\cos\theta\right)$
になる。
\\


$\vec{p}=x\vec{e}+y\vec{f}$であった点は、
$\vec{p'}=x\vec{e'}+y\vec{f'}$に移る。\\
これを計算すると、\\
$\vec{p'}=x(\cos\theta,\sin\theta)+y(-\sin\theta,\cos\theta)\\
=(x\cos\theta-y\sin\theta,x\sin\theta+y\cos\theta)$.
\\

$\vec{p'}=(X,Y)$とすると、連立式\\

$
\left\{
\begin{array}{l}
X=x\cos\theta-y\sin\theta\\
Y=x\sin\theta+y\cos\theta
\end{array}
\right.
$
\\
を、行列の形に直して、
\\
\\
$
  \left(\begin{array}{rr}X \\ Y \end{array}\right)=
  \left(
    \begin{array}{rr}
      \cos\theta & -\sin\theta \\
      \sin\theta &  \cos\theta
    \end{array}
    \right)
  \left(\begin{array}{rr}x \\ y \end{array}\right)
$
\\
\\
よって、角$\theta$の回転行列$R$は、\\
$
R(\theta)=
  \left(
    \begin{array}{rr}
      \cos\theta & -\sin\theta \\
      \sin\theta &  \cos\theta
    \end{array}
    \right)
$
となる。

\end{document}

```

# 出力画像
<img width="800" alt="rotation" src="https://i.imgur.com/Tftgv1z.png">


# wxmaximaの出力をtexに貼り付ける時
tex関数というのがあって、`tex(式);`等とすると、maximaはtex風に数式を返して呉れますが、maximaの結果の出力表示は、TeX風ですがTeXではありません。それに、wxmaximaの出力を、右クリックして出てくるLATEX形式のテキストは、そのままでは、uplatexには使えませんでした。
予め、`load("mactex-utilities.lisp")$`としておいて、tex関数を使うと良いでしょう。

googleで、「mactex-utilities.lisp」として検索して下さい。

# online equation editor

オンラインの数式エディタは[【HostMath.com】](http://www.hostmath.com/)にあります。
iOSのカメラから深度を取得して保存すること関連メモ

深度データが視差になってる場合？
PhotoshopのHEICファイル深度データとは異なるAVDepthDataからの深度マップ
https://ja.stackoverflow.com/questions/23972/coreimage%E3%81%A7%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%8Cuiactivityviewcontroller%E3%81%A7%E7%94%BB%E5%83%8F%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

UIImageをカメラロールに保存する
[iPhone] AVCaptureVideoDataOutput ビデオで静止画撮影する
https://i-app-tec.com/ios/avcapturevideodataoutput.html

深度データが保存できなかった
CoreImageでエフェクトした画像がUIActivityViewControllerで画像保存できない
https://ja.stackoverflow.com/questions/23972/coreimage%e3%81%a7%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8f%e3%81%8cuiactivityviewcontroller%e3%81%a7%e7%94%bb%e5%83%8f%e4%bf%9d%e5%ad%98%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84
ツイキャスの画面をコラボキャス用に切り出すやつ 作った


アプリはここ https://kozycorner.github.io/twitcasting_collaboration_thumbnail/

# できること

ツイキャスでライブ中のユーザのIDを指定すると、その人の画面を取得して、コラボキャスのユーザのサムネイルが表示される領域を完璧に切り出し（分割し）ます。
![メイン画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326374/8bab3e46-d1ff-a655-624b-21da371da580.png)

# 使い方

ID（Username）を指定して「取得」ボタンを押し、画像が取得されたらタイプを選択してください。右側（スマホとかでは下側）に切り出された画像が表示されますので、端末の保存機能を使って保存して使ってください。

# 使うと何が嬉しいの？

ラジオキャスにコラボしに行くときに、自分のサムネイルにこれで切り出した画像を使うと、背景と同化し、そこにいないかのように見せることができます。それが嬉しいかは知りません。著作権には十分気をつけてください。

# 技術の話

[TwitCasting APIv2](https://apiv2-doc.twitcasting.tv/)からLive Thumbnailを取得して、フロント側で画像を切り出しています。なお、APIを直接叩くとCORSで怒られるので、AWS REST APIのHTTP統合を経由することで回避しています（AWSはじめてだからこれで2週間くらい使った）。

フロント側はHTML5 Canvas + JavaScriptで、ハードコーディングした座標情報を元に切り出してBASE64で表示しています。

# まとめ

みんなもツイキャスで透明人間になろう！
`canvas`楽しい！`CORS`の恩恵はわかるけどちょっとつらい！！

以上！！
WSL関連のリマインダー

# WSLの設定の際に使えた設定をつらつらと書きます
どちらかというと自分用なので、書き方とかは適当になるかと思います

## 任意のディストリビューションのデフォルトユーザー変更
[WSLでimport、export、デフォルトユーザー名を変更](https://matsudamper.hatenablog.com/entry/2020/01/06/173939)

```PowerShell
> Function WSL-SetDefaultUser ($distro, $user) { Get-ItemProperty Registry::HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Lxss\*\ DistributionName | Where-Object -Property DistributionName -eq $distro | Set-ItemProperty -Name DefaultUid -Value ((wsl -d $distro -u $user -e id -u) | Out-String); };

> WSL-SetDefaultUser <distributionName> <user>
```

## ArchLinuxのストアパッケージ
[ArchWSL](https://github.com/yuk7/ArchWSL)

## ネットワークドライブのマウント
`\etc\fstab`に設定を書き込む。

```
# network drive
p: /mnt/p drvfs metadata,noatime,uid=1000,gid=1000,defaults 0 0
```

## WSL上のTexLiveでSyncTeXを用いるための設定
[「WSL+TeX+VSCode環境で、Remote WSLなしでSyncTeXを使う」: 方法2-2 sedを使って.synctexファイルを編集](https://qiita.com/isourou/items/dd23f1e157081ca75f25#%E6%96%B9%E6%B3%952-2-sed%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6synctex%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%B7%A8%E9%9B%86)
【真空管アンプ制作 #2 】真空管の基礎について

## 真空管の基礎を勉強しはじめました
早速「[情熱の真空管アンプ](https://amzn.to/3f7r0c1)」第一章(真空管を手に入れよう)を読んでみました。

章タイトルの通り**真空管をとりあえず買っちゃいましょう**という冒頭から始まりました。
いきなり？まだ、どんなの選んだらいいかわからないのに？と不安な気持ちになりましたが、すぐ後にこのように続きました。
>本書では特定の真空管を指定することをしません。使うことのできる真空管は、非常に広い選択肢を持っています。

なぜ、いきなりで問題ないか、どんな真空管を選んでも大丈夫なのかを簡単にまとめてみました。

#### アンプが完成してからでも真空管を変更できる
有名なもの無名なもの、高価なもの安価なものいろいろな真空管があります。
それぞれ内部構造や特性が違います。
既製品では全てのパーツが固定されているため、真空管を変更するといろいろ不都合が起きます。
しかし、自分で設計・実装したアンプであれば、真空管の変更に合わせて周辺回路の修正を行うことが可能です。
それが理由で、後から真空管の変更が可能とのことでした。
（おそらく既製品でも、修正を自ら行えば真空管の変更は可能）

#### どんな真空管でも一人前の音を出す
>現代の優れた部品や回路技術をもってすれば、ほとんどどんな球でも一人前の音を出すことが可能

先人たちがいろいろな試行錯誤を行い、真空管の特性に合わせた調整方法や設計など様々な知見が世の中に溢れています。
この本の中でも基本的なアンプの設計を例にいろいろな技術が記載されているよう。

## いきなり購入しても大丈夫そう
というわけで予算と見た目を考えながら真空管を購入していこうと思います！
何はともあれどんな真空管があるのかわからないと始まりませんので役割や構造の種類をまとめてみました。
（おそらく見る人が見たらかなり大雑把でツッコミどころ満載な気がします）

### 真空管の大まかな種類
#### 役割による分類
##### 出力管
パワー管とも言われる。パワーアンプの心臓部分で、スピーカーを鳴らすための増幅を行う。

##### 電圧増幅管
プリ管とも言われる。オーディオやギターなどの微弱な出力を出力管が求める電圧まで増幅してあげる役割を持つ。プリアンプの心臓部分。

##### 整流管
ダイオードともいう。半導体ダイオードと同じ働き。（発想が逆転してるけど、育ってきた時代的には仕方ないでしょう）

#### 構造による分類
##### ３極管  
フィラメント（カソード）とプレート（アノード）の間にグリッドが挟まっている構造。
プレートからカソードに電流が流れているがグリッドに電圧をかけると電流が減少する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154098/f66acab2-b298-18e8-7f40-de3e960e47d2.png)   
※ 画像はwikipediaより引用

##### ５極管
極管のグリッドとプレートの間に更に2枚グリッドが追加されたもの。
各グリッドは以下のように呼ばれる。

- コントロールグリッド
    - 3極管のグリッドと同じ働き
- スクリーングリッド: 
    - カソードから出てコントロールグリッドを通過した電子を加速させることで能率をあげる働きがある
    - プラス電圧を印加する。
- サプレッサーグリッド
    - プレートから跳ね返ってくる電子をプレート側にとどめておく働きがある
    - 通常カソードにつなぐが、マイナス電圧を印加することもある

##### ビーム管
5極管の能率をさらに上げて増幅を可能にしたのがビーム管。
サプレッサーグリッドの代わりに、形状を工夫したビーム形成電極と呼ばれる屏風のようなものがプレートの内側に設置されている違いがある。
これは内部でカソードにつながっているので外から見ると4極管にみえる。

## 真空管の選定
大まかに真空管の種類がわかったので実際に購入する真空管を選んでいこうと思います。
真空管はネットでも購入できるので販売サイトを探すところからやっていきます。

- [SOUND HOUSE](https://www.soundhouse.co.jp/search/index?s_category_cd=350&i_type=c)
- [Amazon](https://amzn.to/2UJmwAj)
- [テクソル](http://www.tec-sol.com/)
- [Antique Electric Supply](https://www.tubesandmore.com/)

書籍にはもっとたくさんサイトの紹介がありましたがこの程度に留めておきます。
まぁ今の時代ググればなんでも買えるからこのくらいで問題ないか。

いろんなサイトにいろいろな真空管が掲載されているのでいろいろみていく。
どの型がどんな音を出すのかもちろんわからないので、今回は、見た目と価格で選んでしまおうと思います。

![715gv6oEdDL._AC_SL1500_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154098/4230b591-ab54-0ba2-8a6d-54cf6242a6b4.jpeg)
現段階ではこんな見た目の真空管がかわいくていいなと思っています。

## おわりに
今回の記事では真空管の基礎知識をまとめました。
しばらくはサイトを巡回してこれだという真空管を見つけたら購入しようと思います。
次回の記事は「[情熱の真空管アンプ](https://amzn.to/3f7r0c1)」第２章(増幅回路ベーシック)を読んで学んだことをまとめたものにしようと思います。
それではまた次回！
github 共同制作　repo push pullなどの使い方　やってみた

#github使い方
repo 作成

masterはマスターデータ,commitはデータを保存すること,branchはそれぞれが作業するところ

branchマスターとなっているところを、自分の好きな名前に。
branchが作成された。

右にある編集を押す
編集した後は、commit directly first branch

masterとfirstをブランチのタブで切り替えて確認してみよう

insightsからネットワークをみて確認しよう

pull request（マスターから見てpullだからpull requestと呼ばれる）とmerge

firstからcompare and pull branchをいれる
他の人がpull requestsからcommitsのタブを開いてpullを確認。問題なければ、merge pull requestをする。
これで修正が合体された。

insightsからネットワークをみて確認しよう
https://www.youtube.com/watch?v=oPpnCh7InLY&list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV&t=0s
（フォークは使いません。フォークはレプリカの作成）

##issue
右側のnew issue
titleとコメントを記載（提案や議論したいこと）
投稿した後に、issueができて#3や、#4などがつく。
そのissueを解決するためのコードを（誰かが）書く時には、編集後のcommitの時にコメントに#3といれると自動的にissueのページに紐づけられる
逆にcommitの横にある
commit 796506b61962a4e16600f65078e9ff180b5799f5をissueに書き込んでおくと、commitへのリンクになる。

##コマンドラインについて
コマンドがわからない場合
https://qiita.com/ryouzi/items/f9dee1540a04a0bfb9a3
gitとうってみよう
git commit とうってみよう
Git　init　と打ってみよう。コマンドは、一言で言うと「リポジトリを新規に作成」
git clone https://github.com/TaigaTigerKobayashi/reservation.git
とうってみよう（URLはgithub の右側のcloneを押したとこにある）
open .とうって確認しよう
cd reservation(githubのファイル名）とうってみよう
git statusとうってみよう
git commit -a(allの意) -m(messageの意）"adding brabrabra"(-mとメッセージは必須。）
git logで過去の動作を確認
迷い込んだらqで戻る
pullはギットハブからローカル。pushはローカルからギットハブ。
（#pull request（マスターから見てpullだからpull requestと呼ばれる）とめっちゃ間違いやすい。ややこしいので注意）
git push origin master(origin=remoteの名=git remoteで確認。　masterはどのbranchに送るか。今回はmasterに送るのでmaster） （編集済み）


##ローカルからギットハブに送る
送りたいファイルに移動してからgit init
git status で確認
git add . でファイルをgitにあげる用にする（git commit -aは危険？。本来は１回addで必要なファイルをstage空間に準備する）
git commit -m "brabra"
そしてgit push origin masterとうってみる
（何も起きない。
それもそのはず、今回はローカルからリモートにあげるのに、まだリモート側にoriginとかmasterとかはないので作成する）
githubにいってrepoのnewで作成。その時にinitializeというチェックボタンをチェック。
git remote
git remote -v
git remote add origin https://github.com/TaigaTigerKobayashi/gittest.git
(originという名前でURLのところに追加）
git remoteとうってみる（originあるでしょ）


###最初の共同製作者の招待
https://help.github.com/ja/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository



###branchの作り方は下記の方のを参照ください。
https://qiita.com/infratoweb/items/5021a36f69f26dc7f0b9

##ローカルからリモートのブランチへのpush（ブランチは新規作成しかできない。）
https://qiita.com/infratoweb/items/5021a36f69f26dc7f0b9
git checkout -b ブランチ名 #ブランチ移動  (-bをつける事で新規にブランチを作成し移動)
git add . コミットしたいファイル追加("."ではなくディレクトリを指定する事で個別に追加する事ができる)
からのいつもどおりcommit
git commit -m "コミットコメント" addしたファイルをコミット
からのいつも通りのpush
git push origin ブランチ名 
で新しいbranchが作成されて、そこにpushされてます！

###リモートの更新をローカルに落とす方法
https://qiita.com/forest1/items/db5ac003d310449743ca
jQuery 基礎知識  メモ書き

#DOMとは？

HTMLの要素にアクセスして、その要素の情報を書き換えたり削除したり、操作するための仕組みのこと。


要素：Document,html,head,bodyなどなど

DOMができあがることで、要素（ノード）間の親子関係や兄弟関係がわかるようになる。

jQueryやjavascriptはDOMは出来上がる前に書くと、エラーになる。
javascriptはオブジェクトを操作する言語。DOMもオブジェクトになる。


#オブジェクトを操作したいとき

オブジェクトのメソッドを操作したい場合

```
オブジェクト名.メソッド名（引数値）;
```

オブジェクトのプロパティを操作したい場合

```
オブジェクト名.プロパティ名 = 値;
```