お久しぶりです。白々です。
先日エンジニアの先輩にデザインパターンをご存知でない！？という冷静なツッコミを頂き、その後結城浩さんが書かれた「Java言語で学ぶデザインパターン入門」を渡されたので勉強することにしました。
ただ、本を一読しても覚えられないので覚書として記事にしようと思いました。
今回で4回目です。
完走できるように頑張ります。
また、「Java言語で学ぶデザインパターン入門」には、サンプルプログラムも有りますが、著作権の都合上省かせて頂きます。御了承ください。

前回は、「Template Methodパターン」に関しての記事を作成しました。
前回の記事は、後述のappendixに記載しています。
今回は、「Factory Methodパターン」に関して記載したいと思います。
また、「Factory Methodパターン」には、サンプルプログラムも有りますが、著作権の都合上省かせて頂きます。御了承ください。

第4章 Factory Method-インスタンス作成をサブクラスに任せる

Factory Methodは、簡単にいうとTemplate Methodパターンをインスタンス生成に適用した物をだそうです。

イメージしにくい人もいると思うので、例を記載します。
工場を思い浮かべてみてください。
工場では、製品が作成されています。
しまむらやユニクロなどの大手のチェーン店では、Tシャツ大体工場とかで作成されていることが多いですよね？
大きさは、大体Sサイズならこれくらい、Mサイズならこれくらいとサイズごとに大体大きさが決まっていると思います。
しかし、材質や、デザインは、企業によって異なると思います。
工場では他にも、パソコン等も作成されていると思います。
パソコンだったら、メモリは16GBでSSDかHDDかみたいに分かれていくと思います。
このように、工場内で何を作っても製品ですよね？
工場で何かを作ることをスーパークラスとすると、Tシャツ工場は、サブクラスとなります。
しかし、パソコン工場というインスタンスも作ることができます。
抽象化したクラスを使うことで共通の概念を持った全く違うインスタンスを作成することができます。

このように、インスタンスをどのように作成するかをスーパークラス側で決めておき、具体的な処理をインスタンスに任せることによってインスタンスの生成の枠組みとインスタンスの生成とを分けて考えることができます。
また、具体的な処理をインスタンスに任せることによって、スーパークラスは、インスタンスに依存しない状況が作れます。

Factory Methodを使う時の注意事項

「Factory Methodパターン」で作成したサブクラスは、スーパークラスにインスタンスの作り方を決められます。
なので、スーパークラスをちゃんと理解する必要があります。

まとめ

スーパークラスでインスタンスをどのように作成するかを決め、サブクラスで具体的な処理を記載する「Factory Methodパターン」について学びました。

第4章感想

Factory Methodパターンだけなく、基本的にパターンを使うときは、スーパークラスをちゃんと理解する必要があると思いました。
なので、スーパークラスにはどのような意味なのかをコメントで書こうと思います。
説明で使った例は、後日pythonで実装しようと思います。

最後に

何か間違っているところがあれば、ご指摘していただけると嬉しいです！

appendix

前回の記事

https://qiita.com/sirajirasajiki/items/53e1d2aea166190f9a6f

Rails初心者　始める前の『ざっくり用語集』

この用語集について

　この用語集は、筆者が個人的に「む？」となったポイントを中心にまとめたものであり、気軽に振り返ることでスムーズに学習を進められるように、という想いから作成しているものです（※現在進行形）。

　ですので、少しでもプログラミングをしたことの方は、見たことのある内容の薄いペラペラな情報しか載っておりませんので、そっとブラウザを閉じていただければと思います。
　
　そういった背景から、用語の意味はあまり深く考えずに、とりあえず「コイツが何をやっているか？」を語ることを中心に構成しています。そのため、テーマとしては以下になります。

• 『Rails初学者が学習で詰まったときなどにざっと目を通せる』ような内容 　　

　（※個人的には、用語の詳しい理解 と 全体の概要の把握、どちらも大切だと思うので、あまりにもちんぷんかんぷんな用語は無理のない範囲で調べた方が 後に楽かなあとは思います。）

はじめに

　筆者は、現在進行形でRailsの学習中ですが、ベースとしてはProgate様の（Ruby on Rails5　学習コース）を利用したものとなります。プログラミング初心者であるため、間違いや誤解を招く表現などありましたら、お手数ですがご連絡くださいますと幸いです。

　また、筆者のRails学習の進捗の際に、加筆修正の可能性がございます。その際、特に誤解を招く可能性のある表現に関しましては、修正箇所も明示して進めていきますので、何卒ご了承ください。

　加えて、わからないモノは「よくわからない」と記載しておきますので、どの時点でわかるようになったかも情報として載せていこうと思います。「こんなのもわからないのか、まずいぞ」といった意見もお待ちしております。

『ざっくり用語集』

■ ざっくり 『WEBページを表示までのストーリー』

　ブラウザ君「このURLの情報が見たいなあ」 → （URL ポチっ）
　ルートじい「誰かがURLを踏んだ！」 → 「AコントローラのBアクションで対応して！」
　コントローラさん「このコントローラの、このアクションね。」 → （アクション内に書かれている手続きを確認） → 「こっちのビュー持っていってください。」
　ビューちゃん「わたしを見て！」
　ブラウザ君「どれどれ。見てみよう」

ビュー(View)

　ページの「見た目」を決める機能。
　HTMLファイル。

コントローラ(Controller)

　「ビュー」を見つけて ブラウザに渡す機能。
　内部に作成した「アクション」を利用して「ビュー」を見つける。

ルーティング(Routing)

　URLから「コントローラ」とその内部の「アクション」を見つける機能。

■ ざっくり 『WEB表示に必要な上記３つを用意する方法』

【ターミナル で実行】
rails g controller home top

実行により、起こることは大きく分けて３つ
viewsフォルダ内
・「home」フォルダ作成
・「top.html.erb」ファイル作成
→『home』フォルダ内に『top』ビューが自動作成される

controllerフォルダ内
・「home_controller.rb」ファイル作成
・「topメソッド」作成
→『controller』フォルダ内に『home』コントローラが自動作成され、
　『home』コントローラ内に『top』アクションが自動作成される

【home コントローラ内】
def top  #topアクションの内容はここに作成していきます
end

configフォルダ内
・「routes.rb」ファイル作成
→『config』フォルダ内に『routes.rb』ファイルが自動作成され
　『routes.rb』内に『URL と 移送先コントローラ名#アクション名』のルートが自動作成

【routes.rb ファイル内】
get "home/top" => "home#top"

データベース（Database)

　表 ＝ テーブル(table)
　縦列 ＝ カラム(column)
　横行 ＝ レコード(record)
　データベースにデータを保存するには、テーブル（名前付きの箱）の準備が必要。

マイグレーション（Migration):マイグレーションファイル

　本来なら面倒な「データベース作成から変更まで」を簡単にできちゃう仕組み。
　そのため、マイグレーションファイルを使うとテーブル（箱）を簡単に作ったり消したりできる。他にも、
・テーブル作成、削除
・カラム追加、削除
・カラム名変更
・カラムのデータ型変更 等...

クラス（class）

　実行する処理内容が書かれた「設計図」。

モデル（Model)

　クラス（設計図）の一種。
　特にテーブル（箱）内のデータを操作（変更、追加など）することができるクラス。

インスタンス(instance)

　クラスという「設計図」をもとに作られた「モノ」。

オブジェクト（object)

　世の中にあるモノ全て。
　クラスもインスタンスもオブジェクト。

■ ざっくり 『Railsにおけるデータベースの作り方』

【必要なもの】
・ モデル
→ テーブル（箱）の中の情報を編集するための準備
・ マイグレーションファイル
→ データ保存用のテーブル（箱）の準備

【ターミナル で実行】
rails g model Post content:text #Postモデル、contentカラム(text属性)テーブル作成

実行により、起こることは大きく分けて2つ
▼ modelsフォルダ内に 『Post』モデルを作成
・「post.rb」ファイル作成
・モデルの定義
→『models』フォルダ内に『post』ファイルが自動作成され、
→『post』ファイル内にモデルが自動で定義される

▼ dbフォルダ内に 『posts』テーブルを作成
・「migrate」フォルダ作成
・マイグレーションファイル作成
→『db』フォルダ内に『migrate』フォルダが自動作成される

内容

EC2へSSH接続する際に公開鍵認証を使用して、Amazon Linux2であればec2-user以外で
接続できるようにするため新しいユーザーを作成する。

対象機器

EC2(Amazon Linux2)

参考手順

手順は以下のAWS公式を参考にしています。
Amazon EC2 を使用してキーペアを作成する
ユーザーアカウントを作成する

ハンズオン

キーペアの作成(AWSマネジメントコンソール使用)

EC2へ接続するキーペアが存在していれば実施不要です。

AWSマネジメントコンソールへログインし、[サービス]⇒[コンピューティング]⇒[EC2]を選択します。

左側メニューより、[ネットワーク&セキュリティ]⇒[キーペア]を選択します。

キーペア一覧画面よりキーペアの作成を押下します。

[名前]と[ファイル形式]を[キーペアを作成]を選択して[キーペアを作成]を押下します。
※今回はpemを選択します。
pemとppkについては下記サイトが分かりやすかったです。勉強になりました。
pemファイルとppkファイルの相互変換

ユーザー作成&設定(Linux)

EC2へ接続して、rootユーザーへ切り替えます。

ユーザー作成

# adduser Inon

パスワード設定

# passwd Inon
Changing password for user Inon.
New password:
Retype new password:
passwd: all authentication tokens updated successfully.

作成したユーザーへ切り替え

# exit
logout

$ su - Inon
Password:

$ whoami
Inon

ssh/authorized_keysの設定

作成したユーザー(Inon)のhomeディレクトリにいることを確認

$ pwd
/home/Inon

.sshディレクトリの作成&設定

$ mkdir .ssh
$ ls -la
total 16
drwxrwxr-x 2 Inon Inon   6 Mar 12 01:09 .ssh
$ chmod 700 .ssh
$ ls -la
total 16
drwx------ 2 Inon Inon   6 Mar 12 01:09 .ssh

パブリックキーの取得

EC2へ接続する際に使用しているキーペアをサーバ上へ転送します。
今回は/tmp配下に配置しました。

$ ssh-keygen -y -f /<キーペア格納先>/<作成したキーペア名>.pem 
ssh-rsa ...******<ズラーッと文字列が並びます>******...

authorized_keysファイルの作成

$ touch .ssh/auhthorized_keys
$ chmod 600 .ssh/authorized_keys
$ ll .ssh
total 0
-rw------- 1 Inon Inon 0 Mar 12 01:12 authorized_keys
$ vi .ssh/authorized_keys

viコマンドでssh-keygenコマンドで取得したパブリックキーを貼り付けます。

終わり

作成したユーザーでEC2へ接続できるようになった。

VBAを組んでみた。

やってみたこと

作製したデータをコピーと貼り付けで新しいbookに保存をする

事前準備

Cドライブ直下に[testフォルダ]を作成する

この中に作成したファイルが入ります

VBAを行うシートの名前を「見本」に変更する

別のシート名で編集を行っている方は
VBAコード上にある「見本」を指定したシート名に置き換えて考えてください

VBAの標準モジュールを開く

標準モジュールとは？
VBAを書くシートのようなものことをVBEといいます
標準モジュールとは通常時に使用するVBEです　詳細はまた後日...

VBEの開き方

知っている方はスルーしてください
まずExcelのメインタブに[開発]があるかを確認します

無い場合はExcelのオプションから開くことができます
始めにメインタブの[ファイル]を選択します
次に[オプション]を開くと下図の[Excelのオプション]が開かれます
[リボンのユーザー設定]の[開発]の欄にチェックを入れOKを押します

Excelのメインタブの[開発]から[Vlsual Basic]を開きます
次に、[挿入]のタブから標準モジュールを選択します

これで開くことができました
これからVBAを書いていきます

VBAのコード

先ほど開いた標準モジュールにコードを書いていきます

Subtest1()'①作成したデータをコピーして新しいworkbookにすべての形式を含めて張り付ける。ThisWorkbook.Worksheets("見本").Range("A:F").CopyWorkbooks.Add'sheetを追加するSelection.PasteSpecialPaste:=xlPasteAllUsingSourceTheme'②さら同じものをコピーして値貼り付けをするActiveSheet.Range("A1:F70").CopySelection.PasteSpecialPaste:=xlPasteValues'③新しいworkbookのSheet名を変更するDimsheetnameAsStringsheetname=Year(Now)&"年"&Month(Now)&"月分"ActiveWorkbook.Sheets("Sheet1").Name=nam'Sheetの名前を変更する'④新しいworkbookを保存するDimfilnameAsStringfilname=Year(Now)&"年分"DimpassAsStringpass="C:\ test"&filname&".xlsx"ActiveWorkbook.SaveAsFilename:=passActiveWorkbook.Closesavechanges:=True'⑤保存したことを通知するMsgBox"保存しました。"EndSub

使用した関数

今回は　Dim、copy、Selection.PasteSpecial　の3つに絞ってご紹介します

Dim 変数を入れる

`Dim　＊＊＊　As String
　＊＊＊ ＝

＊＊＊には自分で入れたい変数の名前を入れます
上記Stringの部分を下記の表のように変更します

Copy コピー

ThisWorkbook.Worksheets("見本").Range("A:F").Copy
この場合「このWorkbookのシート名見本のAからF列を選択しコピーをする」
ことができます

Selection.PasteSpecial 貼り付け

Selection.PasteSpecial Paste:=xlPasteAll
Pasteは省略が可能です
ただ、Pasteの部分を変更するとどのように張り付けるのかを指定できます
pasteの他にoperation,skipBlanksなどがあります
今回はpasteの一部をご紹介します

まとめ

書式設定は残して数式は消して保存するという手間が煩わしくてこのVBAを組んでみました
まずは可変的な部分は少なめに遠回りなコードでも思い描いた通りに動くコードを作成できればと思います

参考

エクセルの神髄
何の関数をどのように使用すれば思うように動くのかとてもわかりやすく参考にさせていただきました

ありがとうございました

MySQL(8)の使い方をまとめました。

前提条件

• MacでHomebrewとXcodeがインストールされていること

インストール

$ brew install mysql

使い方

MySQLの接続

サーバーの起動

$ mysql.server start

サーバーの停止

$ mysql.server stop

サーバーの再起動

$ mysql.server restart

バージョン確認

$ mysql --version

ログイン

$ mysql -u root

パスワード付きのログイン

$ mysql -u root -p

終了

>exit;

データベースの扱い

データベースの表示

>showdatabases;

データベースの作成

-- create database データベース名;>createdatabasetest;

データベースの削除

-- drop database データベース名;>dropdatabasetest;

データベースの使用

-- use データベース名;>usetest;

テーブルの一覧を表示

>showtables;

テーブルの作成

オプション
- primary key(キー項目)
- auto_increment(連番、データ型はint、キー項目にすること)

-- create table テーブル名(フィールド名 データ型 オプション, フィールド名 データ型 オプション, フィールド名 データ型 オプション);>createtabletest(idintprimarykeyauto_increment,namevarchar(10),colvarchar(10));

テーブルの削除

-- drop table テーブル名;>droptabletest;

テーブルのフィールド構造を表示

-- show fields from テーブル名;>showfieldsfromtest;

プライマリーキーの追加

-- alter table テーブル名 add primary key(キー項目);>altertabletestaddprimarykey(id);

テーブル名の変更

-- altet table 古いテーブル名 rename to 新しいテーブル名;>altertabletestrenametonew_test;

フィールドの追加

-- alter table テーブル名 add 追加するフィールド名 データ型;>altertabletestaddnew_fieldvarchar(10);

フィールド名の変更

-- alter table テーブル名 change 元のフィールド名 変更するフィールド名 データ型;>altertabletestchangeold_fieldnew_fieldvarchar(10);

フィールド型の変更

-- alter table テーブル名 modify フィールド名 変更するデータ型;>altertabletestmodifynew_fieldvarchar(5);

フィールドの削除

-- alter table テーブル名 drop 削除するフィールド名;>altertabletestdropnew_field;

データの扱い

全フィールドに挿入

-- insert into テーブル名 values(値1, 値2, 値3);>insertintotestvalues(0,'johnny','jojo');

特定のフィールドに挿入

-- insert into テーブル名(挿入したいフィールド名1、挿入したいフィールド名2) values(値1,値2);>insertintotest(id,name,col)values(10,'john','giogio');

データの更新

-- update テーブル名 set 変更するフィールド名=値 where 条件;>updatetestsetname='jonathan'whereid=10;

データの削除

-- delete from テーブル名 where 条件;>deletefromtestwhereid=10;

データの抽出

基本形

-- select 表示するフィールド名 from テーブル名;>selectnamefromtest;

条件付きの抽出

-- select 表示するフィールド名 from テーブル名 where 条件;>selectnamefromtestwhereid=0;

並び替え

-- select 表示するフィールド名 from テーブル名 order by 基準になるフィールド名 asc or desc (昇降);>selectnamefromtestorderbyidasc;

件数を指定して表示

-- select 表示するフィールド名 from テーブル名 limit 開始位置 件数;>selectnamefromtestlimit10;

ユーザのパスワード変更

新規設定

ログインしてmysqlデータベースを使用する。
任意のパスワードを入力して、パスワードを設定する。

$ mysql -u root

>usemysql;

>alteruser'root'@'localhost'identifiedby'任意のパスワード';

初期化

サーバーを停止して、セーフモードで起動、ログインをする。
ユーザーのパスワードを空にして、サーバーを再起動する。

$ mysql.server stop

$ mysqld_safe --skip-grant-tables&

$ mysql -u root

>updatemysql.usersetauthentication_string=nullwhereuser='root';

>exit;

$ mysql.server restart

MySQLがエラーになるとき

ローカルのMySQLがエラーになるときは全てを削除して、インストール・再起動しなおす。
それでもダメだった場合は、Mac本体の再起動を行う。

$ sudo rm-rf /usr/local/var/mysql

$ brew uninstall mysql

$ brew install mysql

$ mysql.server start

参考文献

この記事は以下の情報を参考にして執筆しました。

• MySQL8でユーザーのパスワードの変更 / リセット方法

どんな記事？

Reactをローカルで書けるようにする。
npmとかWindowsで動かないと思ってた。

参考ページ

windowsでReactの環境構築
あとどこかのページ。
ここだった

正直参考ページに書かれたことやっただけ

コマンドプロンプトで
npx create-react-app my-app
create-react-app my-apps
現在のディレクトリにmy-appsフォルダができる
フォルダ内移動cd my-apps
サーバー起動npm start
なんかアクセス許可するかの選択すると
ブラウザでReactのロゴがぐるぐるしている。
そこに書いてある通りsrc/App.jsをいじると表示が変わる。

次やること

別のjsファイルからコード読み込む
参考になりそうなページ
【Q&A】ReactJSのComponentをimport,exportする

後でやること

Tomcat上で動かす。
参考になりそうなページ
Making a Progressive Web App (ただし英語)
Reactを使ってWebサイトを公開するまでの手順

思ったこと

英語読めたい

追記：2020/3/13　今回の内容は、「カプセル化」というより「データ隠蔽」の内容になっていたことをコメントで指摘していただいたので、修正。
タイトルもカプセル化からデータ隠蔽へ変更。

はじめに

この記事は備忘録である。
参考書レベルの内容だが、本記事に掲載するコードについては、
間違えたものが中心となる。これは実際にコーディング中に間違えた部分を掲載し、自分で反省するために投稿するという目的によるもの。
また、後日にJavaSilver試験問題の勉強を兼ねて復習するため、深い部分の話はここでは触れない。

環境

言語：Java11、JDK13.0.2
動作環境：Windows10

メンバへのアクセス制限

newで生成したインスタンスが、クラスから引き継いだメンバ（フィールドとメソッド）を独自の形で保有していることは確認した。だが、前回のCatクラスで言えば

Cat myCat = new Cat;
mycat.weight = -20;

と、Catクラスを作ったときには想定していなかった値を、mainメソッド内から勝手に格納することが出来てしまう。
mainメソッド内から直接、Catクラスで設定されたフィールド(今回はdouble weight)にアクセスを許していると問題を起こしかねない。

private

そこで、「クラス処理の外部からは扱うことが出来ないメンバ（フィールド・メソッド）を持たせたい」場合に、メンバ（フィールド・メソッド）へつける修飾子がprivateである。

今回はString型のcolorから、double型のheight(身長)へ変更して、Catクラスを扱ってみたい。

classCat{privatedoubleweight;privatedoubleheight;//クラスpublicvoidsetWeightHeight(doublew,doubleh){if(w>0&&w<=50){weight=w;System.out.println("この猫の体重を"+weight+"kgにしました。");}else{System.out.println("ちょっとこの体重はないんじゃないですかねぇ……");}if(h>0&&h<=200){height=h;System.out.println("この猫の身長を"+height+"cmにしました。");}else{System.out.println("流石にそんな身長の猫は聞いたことはない……");}}doublegetWeight(){System.out.println("猫の体重を更新します。");returnweight;}doublegetHeight(){System.out.println("猫の身長を更新します。");returnheight;}voidintroduce(){System.out.println("この猫の体重は"+weight+"kgです。");System.out.println("この猫の身長は"+height+"cmです。");}}

Catクラスのweight　heightはいずれもprivateになったので、勝手に値をいじられる心配は無くなった。

public

だが本当に値を変更できないのであれば、新しくnewしたいmyCatインスタンスの値も変えることが出来ない。
しかし、Catクラスで言えば

public void setWeightHeight(double w,double h)

に注目してもらいたい。これはCatクラスに定義したメソッドだが、その修飾子はpublicに設定されている。これは「クラスの外側からのアクセスを許す」修飾子であり、処理の中に

weight = w;
height = h;

と、privateに設定したフィールドにアクセスしている。
メソッドのうち、同じクラスの中に入っているメソッドからであればprivateへのアクセスが可能であることを利用し、メソッド内処理経由でprivateに設定した値への格納は許されている。

public void setWeightHeight(double w,double h)
はその内部にif文を抱えており、条件に合わない値の代入を阻止できるようになっている。これでとんでもない値を格納される心配はなくなった。

終わりに

今回見た、「メソッドを使ってprivateフィールドへ値を格納する」という処理について。参考書のやさしいJava 第7版から引用すると、

クラスの中にデータ（フィールド）と機能（メソッド）をひとまとめにし、保護したいメンバにprivateをつけて勝手にアクセスできなくする機能

である。この機能設計を
カプセル化(encapsulation)データ隠蔽
と呼んでいる。
これはオブジェクト指向設計の基本的な原則のひとつであり、このためにクラスを作るのである。他の原則はまた扱うがどれも大切な原則なので、しっかり把握しておきたい。

参考

出来るだけ自分で変数や式を書いてコンパイルしているので、完全に引用する場合はその旨記述する。

やさしいJava 第7版
Java SE11 Silver 問題集（通称黒本）

本文

このサイト良い

codelab

hot reload便利

以下メモ

codelabでflutterの勉強をした時のメモ

参考

codelab

プロジェクト作成・実行の流れ

プロジェクト作成

$ flutter create my_app
$cd my_app/

VSCodeとかで編集後

$flutter run

シミュレータデバイスが複数ある場合デバイスIDを指定する

$flutter run

More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
iPhone SE • hogeID
iPhone Xs • fugaID

$flutter run -d hogeID

Hello World表示

import'package:flutter/material.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Welcome to Flutter',home:Scaffold(appBar:AppBar(title:Text('Welcome to Flutter'),),body:Center(child:Text('Hello World'),),),);}}

returnで返しているMaterialApp()の中身が画面の要素になってる

ライブラリの使用

ランダムな単語の組み合わせを生成して表示する

ライブラリをインポート

dependencies:flutter:sdk:flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons:^0.1.2##これ追加english_words:^3.1.0

import'package:flutter/material.dart';// これ追加 importしてライブラリを使えるようにするimport'package:english_words/english_words.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){//ここ追加 ランダムな文字列を生成するfinalwordPair=WordPair.random();returnMaterialApp(title:'Welcome to Flutter',home:Scaffold(appBar:AppBar(title:Text('Welcome to Flutter'),),body:Center(// ここ変更 生成した文字列の表示child:Text(wordPair.asPascalCase),),),);}}

hot reloadすると文字列が変わる

文字出力処理の切り出し

import'package:flutter/material.dart';import'package:english_words/english_words.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){// 削除 ***final wordPair = WordPair.random();***returnMaterialApp(title:'Welcome to Flutter',home:Scaffold(appBar:AppBar(title:Text('Welcome to Flutter'),),body:Center(// ここ変更child:RandomWords(),),),);}}// 以下追加 classRandomWordsextendsStatefulWidget{@overrideRandomWordsStatecreateState()=>RandomWordsState();}classRandomWordsStateextendsState<RandomWords>{@overrideWidgetbuild(BuildContextcontext){finalwordPair=WordPair.random();returnText(wordPair.asPascalCase);}}

実行結果は同じ

Listに表示する

tabaleView的なものにランダム生成した文字列を表示する画面を作る。

import'package:flutter/material.dart';import'package:english_words/english_words.dart';voidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Startup Name Generator',home:RandomWords(),);}}classRandomWordsextendsStatefulWidget{@overrideRandomWordsStatecreateState()=>RandomWordsState();}classRandomWordsStateextendsState<RandomWords>{// _をつけるとprivateになるfinal_suggestions=<WordPair>[];final_biggerFont=constTextStyle(fontSize:18.0);@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('Startup Name Generator'),),body:_buildSuggestions(),);}Widget_buildSuggestions(){returnListView.builder(padding:constEdgeInsets.all(16.0),itemBuilder:(context,i){// 奇数行なら区切り線を返すif(i.isOdd)returnDivider();// 偶数行の場合ランダム生成した単語の組み合わせを返すfinalindex=i~/2;if(index>=_suggestions.length){_suggestions.addAll(generateWordPairs().take(10));}return_buildRow(_suggestions[index]);});}Widget_buildRow(WordPairpair){returnListTile(title:Text(pair.asPascalCase,style:_biggerFont,),);}}

お気に入りボタンを追加

・・・classRandomWordsStateextendsState<RandomWords>{finalList<WordPair>_suggestions=<WordPair>[];//　追加finalSet<WordPair>_saved=Set<WordPair>();finalTextStyle_biggerFont=constTextStyle(fontSize:18.0);・・・Widget_buildRow(WordPairpair){finalboolalreadySaved=_saved.contains(pair);returnListTile(title:Text(pair.asPascalCase,style:_biggerFont,),// 追加trailing:Icon(alreadySaved?Icons.favorite:Icons.favorite_border,color:alreadySaved?Colors.red:null,),);}}

hot reload　すると変更が反映される(すごい便利！)

(VSCodeで行の左にアイコンが表示されたり、色名にカーソルを合わせると色見せてくれるのすごい便利！)

ボタンをインタラクティブにする

Widget_buildRow(WordPairpair){finalboolalreadySaved=_saved.contains(pair);returnListTile(title:Text(pair.asPascalCase,style:_biggerFont,),trailing:Icon(alreadySaved?Icons.favorite:Icons.favorite_border,color:alreadySaved?Colors.red:null,),onTap:(){// Add 9 lines from here...setState((){if(alreadySaved){_saved.remove(pair);}else{_saved.add(pair);}});},);}

画面遷移

遷移ボタン追加

Widgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('Startup Name Generator'),// 追加actions:<Widget>[IconButton(icon:Icon(Icons.list),onPressed:_pushSaved),],// ここまで        ),body:_buildSuggestions(),);}classRandomWordsStateextendsState<RandomWords>{・・・// 画面遷移関数追加void_pushSaved(){}}

遷移処理追加

void_pushSave(){Navigator.of(context).push(MaterialPageRoute<void>(builder:(BuildContextcontext){// お気に入り登録したリストから表示文字を生成finalIterable<ListTile>tiles=_saved.map((WordPairpair){returnListTile(title:Text(pair.asPascalCase,style:_biggerFont,),);},);// 線で区切るfinalList<Widget>divided=ListTile.divideTiles(context:context,tiles:tiles,).toList();// 画面の表示定義returnScaffold(appBar:AppBar(title:Text('Saved Suggestions'),),body:ListView(children:divided),);},),);}

遷移できるようになる

テーマ色を変える

classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Startup Name Generator',// 追加theme:ThemeData(primaryColor:Colors.white,),// ここまでhome:RandomWords(),);}}

参考

codelab

これをやってみようと思った理由

Blue Prismのダッシュボードで見たいやつがタイルに載ってない、というのはけっこうあります。

自分の欲しいダッシュボードを自分で作る方法は既にこちらで解説されています。
「Blue Prism のダッシュボードをカスタマイズする」(Enterprise Blue Ocean ◮)
ssms開けてストアドプロシージャ書いて……がんばればできるけど……めんどくs

じゃなくて、PowerBIなら工数かけずに見映えの良いダッシュボードが作れるのでは……
と思ったので、試しに作ってみました。

欲しいのは、各々のプロセスがどのRRで実際どのくらい動いているのか、という一覧表です。
これがあると、1時間かかりますという申告でスケジュール組んでるけど実際10分かかってないよね？もっと後ろ詰めていいよね？とか、実際の稼働状況を見ることでより効率的なスケジュールを組むことができるのではないかなと思ったので。

Blue Prismには、SLAを入れるといい感じにスケジュールを考えて組んでくれるサービスもあるようで（DXに載ってる）
しかし今の環境ではそういうのを使ってないのです……。

必要なものと作り方

ほしいもの

「何のプロセスが何のRRで何時から何時まで実行された（されている）か」という情報がほしいです。
つまり、制御室で見ることができる、下図の赤丸のとこに出る情報です。

Power BIでBlue PrismのDBに接続する

まず、DBのテーブルをPower BIで見られるようにします。
接続設定してもなんでか繋がらない、というときは、Power BIを「管理者として実行」で起動してください。
PowerBIに権限が足りないとDBに接続できないです。

「データを取得」→「SQL Serverデータベース」を選択して「接続」を押す。

「サーバー」欄にサーバ名かIPを入れます。ポートも指定してるならそれも入れる。あとはデフォルトのままでOK。

DBサーバのID/PWを入れます。
それで接続できなかったら、左メニューを「データベース」に選び変えて、ssmsとかに入れるDBのID/PWを入れてみてください。

接続できたら、左側の赤四角で示した欄に、BPAなんとかという名前のテーブルがずらっと並びます。

「何のプロセスが何のRRで何時から何時まで実行された（されている）か」を見るために必要そうなテーブルと項目は以下のとおりです。

• BPASession
  • startdatetime（開始日時）
  • enddatetime（終了日時）
• BPAResource
  • name（RRの名前）
• BPAProcess
  • name（プロセス名）
• BPAStatus
  • description（CompletedとかTerminateとか書いてあるやつ）
• BPAUser
  • username（実行したユーザ名。スケジュール実行のときはここは出ない）

なので、左の赤四角枠の欄に並んだテーブル一覧から、上記の5個のテーブルを探してチェックを入れます。
それから、その下にある「関連テーブルの選択」を押します。
チェックマークがついたら、右下にある「読み込み」ボタンを押します。

これでDBの必要なテーブルは読み込めました。

読み込んだテーブルから見たい情報だけに絞る

取得したテーブルをどうしたらほしいテーブルの形にできるのか、という作業手順はこちらの記事が超わかりやすいです。
「Power BI で社内のリース車の利用状況を可視化してみた」(Qiita)
楽器の人の記事だ！Power BI使用歴30秒くらいの私でも読んだらわかるくらい親切な手順説明です。ありがとう楽器の人！

上のリボンの「クエリを編集」を押します。

左側の「クエリ」欄に、さっきチェックマークを入れたテーブルの名前が並んでいます。
「BPASession」を選び、真ん中の大きいところにテーブルが表示されたら、上のリボンの「列の選択」をクリック。

「列の選択」ダイアログが出ます。一番上の「（すべての列の選択）」をクリックして全部のチェックを外したら、以下の6列だけチェックを入れます。

• startdatetime
• enddatetime
• BPAProcess
• BPAResource
• BPAStatus
• BPAUser

「BPAProcess」「BPAResource」「BPAStatus」「BPAUser」の4列の値は、違う色の文字で「Value」ってなってると思います。
見出し列の、各項目の右端にあるパカッて上に開くみたいなアイコンをクリック。

さっきの列の選択ダイアログと同じようなのが出ます。各列、以下の列だけチェックが入ってるようにします。

• BPAResource
  • name
• BPAProcess
  • name
• BPAStatus
  • description
• BPAUser
  • username

これでほしい情報だけ載ったテーブルができました。左上の「閉じて適用」を押してこの画面を終わります。

左端の表みたいなアイコンをクリックしてから、右の「フィールド」欄で「BPASession」を探してクリックすると、さっき作ったクエリが表示されます。

集計用の列を足します。
「フィールド」欄の「BPASession」って書いてあるところの右端に「・・・」みたいな表示があります、それをクリック。

ダイアログが出ます、「新しい列」をクリック。

上の計算バーのところに列の式を入れます。式は予測変換みたいに入れられる項目が出てきてくれるからめっちゃラク。
入れたら、最後は「✔」をクリックします。

入れる式はこれです。

かかった時間 = DATEDIFF([startdatetime],[enddatetime],SECOND)

作ったテーブルをダッシュボードに図示する

ダッシュボードは、左端の棒グラフみたいなアイコンをクリックです。
いま作ったテーブルに戻りたいときは、その下の表みたいなアイコンをクリックしたらいつでも見られます。

ほしいグラフは、開始日時と終了日時をプロットして横軸に並べてくれるようなやつですが、そういうのは標準のビジュアルにはありません。
が、appsourceに、まさにそれだ！というカスタムビジュアルがありました。
これをダウンロードしてカスタムビジュアルに入れます。
「as Timeline」

Power BIカスタムビジュアルで学ぶデータモデリング from Microsoft AppSource(Qiita)
カスタムビジュアルのインストール方法

インストールした「as Timeline」カスタムビジュアルは「視覚化」の一番下に出るので、アイコンをダブルクリックします。
真ん中の大きいところに枠ができます。

この枠をアクティブにした状態で、一番右の「フィールド」から「BPASession」をクリック。
「Entity」にResource、「Start Date」にstartdatetime、「End Date」にenddatetimeをドラッグします。
もし「プロセスごとでも見たい」ということであれば、「Category」にProcess.Nameをドラッグしたらいいです。

このままだと横の時間軸がめっちゃ長くなるので、「フィルタ」で、startdatetimeを見たい日の24時間くらいに絞ります。

こういう感じの横軸の表が、RRの数だけ（プロセスも指定したらRRごとのプロセスの種類数だけ）出ます。

他の図も出してみる

真ん中の大きいところの図が何もアクティブになっていない状態で「視覚化」から「散布図」をダブルクリック。
（アクティブになっていると、それが散布図に置き換わってしまう）

「凡例」にProcess.Name、「X軸」にかかった時間（さっき作った集計列です）の平均、「Y軸」にかかった時間のカウント、「サイズ」にかかった時間の合計を設定します。

これで、プロセスごとの稼働状況を散布図に図示できます。

マルの大きさが大きいもの（総稼働時間が多い）、右にいるやつ（スケジュール1回ごとの時間が長め）のプロセスと、
左上にいるやつ（実行回数は多いけどすぐ終わるもの）のプロセスを別のRRに割り当てを分ける、などの対策の目安にできます。

とりあえずここまで作りました

Accessのクエリと、Excelのピボットテーブルを使ったことがある人なら、Power BI初めてでも、説明を見ながらならけっこういけると思います。
逆に言うと、ピボットわかんない人は、先にExcelのピボットの教材（これだったら易しい本がいっぱい売ってる）を読んで、ちょっと作れるようになってからチャレンジすれば、たぶん全然わかんないってことはないでしょう。

DBからテーブルを取得してからダッシュボードにこの図を出すまではほんとにすぐです。
つまり、がんばっていろいろいっぱい設定するとかコマンドを書くとかいう作業に工数を取られず
「何の数値を分析したら対策に役立つか」というところに集中して頭を使える、ということです。
ノーコードってすごいんだな……。

初めてQiitaに記事書くときに知っておくべきこと

＜Qiitaの作成時のポイント＞

• タイトルは最上部に太字で表示
• 本文記述はマークダウン方式
  • タグでの記述もできる(※style属性使えない）
  • ★半角スペースは認識されない（実体参照で記述「 」）
• ※cssは使えない
• プレビュー画面あり
  • 出力内容のリアルタイム確認タグ付け
• タグ付け（キーワード単位）
• 自動保存

よく見る使い方＆注意点

目次

1. 枠：背景色グレー、テキスト黒(インラインコード）
2. 枠：背景色黒、テキスト白（黒板）
3. 枠上部のタブ
4. 引用
5. 見出しの種類
6. CSSスタイルは認識されない
7. markdownとは
8. テキストリンクの設置方法
9. 画像の埋め込み(外部サイト）
10. 改行や空白
11. 箇条書き・・・番号なし(Disc型)
12. 箇条書き・・・番号付き(Decimal型)
13. チェックボックス
14. 折り畳み（アコーディオン）
15. フォントスタイル
16. 水平線
17. 公式ヘルプ

よく見る使い方

（１）枠：背景色グレー、テキスト黒

AAAA
　└★「`」で囲む（バッククオート：shift+@）
　└名称インラインコード
　
記述例：「`AAA`」

（２）枠：背景色黒、テキスト白（黒板）

AAA

　└★「```」＋改行＋テキスト＋改行「```」
　└※改行なしで挟むと上手く表示されない
　└※上下に空白を挟む（公式リンクに記載あり）
　└ preタグで囲むのと同じ
　└横幅が画面からはみ出す場合はスクロールが適用される(cssのoverflow: scroll)

＜エラー症状の例＞
改行なし（```AAA```）で発生した症状
　└見出しタグの種類や、上部にテキストがあるかなどで表示が変化
　└症状1：インラインタグになる
　└症状2：背景黒で文字色も黒になる
　　※一番上の行が見出しとして使用されるため
　　　　└ 特別な宣言(ruby:)が必要・・・詳細は(3)↓

（３）枠上部のタブ

　└「```ruby:これ！（改行）```」
　└冒頭のバッククオート3つと同じ行に「ruby:」で記述

```ruby:これ！

（４）引用

AAA

　　└「>」をつける
　　└「>>」で2つの入れ子
　　　　「>」を追加で入れ子が深くなる

＜入れ子の例＞

AAA

>>>AAA

＜一般的な使い方＞

AAA
AAA

BBB
BBB

>AAA
AAA
>>
BBB
BBB
※「>」と同じ行でも、改行してもOK

（５）見出し

h1~h6タグをMarkdownで書く
　　└★「#」をつかう
　　　　「#」の数とhタグの番号が連動
　　└※冒頭のみ。文中は文字列になる
　　└アンダーラインがつくのは、「#」と「##」の２つのみ
　　└ マージン(余白)が適用される
　　└「####」の文字太さがbタグ相当

①冒頭を「#」で記述　＝h1

②冒頭を「##」で記述　＝h2

③冒頭を「###」で記述　＝h3

④冒頭を「####」で記述　＝h4

⑤冒頭を「#####」で記述　＝h5

⑥冒頭を「######」で記述　※h5と同じ

↑↑↑↑ここまで↑↑↑↑

（６）CSSスタイルは認識されない

・インラインstyleは使えない（style属性なし）

<hrstyle="border-top: dashed;">

・styleタグが使えない
　　└※<style scope>も認識されない

<style>.dashed{border-top:dashed;}</style>

・外部のスタイルシートで読み込んだcssの適用もできない

<linkrel="stylesheet"href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/smoothness/jquery-ui.css"><divclass="ui-dialog">この要素がfloatする</div>

※上記３つとも通常のmarkdownファイル(.md)では適用可能

（７）markdownとは

・htmlをシンプルに書ける記述
・記号で記述できる
・タグも使える
・cssやjsも使える
・拡張子は「.md」

<注意点>
・ファイルの拡張子は「.md」
・プレビュー機能のついたエディタでないと適用内容が見れない
・ブラウザでは開けない（htmlファイルとは異なる）
　└markdownプレビュー機能のadonを使えば表示できる
・※QiitaのMarkdownは一部Qiita専用仕様

（８）リンク・・・テキスト

markdownの書き方 Qiita公式リンク

【記述方法】：[title](URL)
　　└titleがアンカーテキストになる
　　└カッコの中にリンク先URLを書く

[markdownの書き方Qiita公式リンク](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

※URLをそのまま貼り付けてもリンクになる
https://qiita.com/Qiita/items/c686397e4a0f4f11683d

（９）画像の埋め込み(外部サイト）

【記述方法】：![alt](URL)
　　└altに代替テキストを記載
　　└カッコの中にリンク先URLを書く

![紅葉した山](https://pakutaso.cdn.rabify.me/shared/img/thumb/081AME0226.jpg?d=400)

タイトルをつけて画像を埋め込む

【記述方法】：![alt](URL "title")
　　└altに代替テキストを記載
　　└カッコの中にリンク先URLを書く
　　└titleにホバーで表示するテキストを記載

![6つの花の画像](https://pakutaso.cdn.rabify.me/shared/img/thumb/flower201261775.jpg?d=400"フラワーリング(ガーベラ)")

※youtubeなど動画の埋め込みは画像が表示されない

画像引用元：ぱくたそ
https://pakutaso.cdn.rabify.me/shared/img/thumb/081AME0226.jpg?d=400
https://pakutaso.cdn.rabify.me/shared/img/thumb/flower201261775.jpg?d=400

（１０）改行や空白

• エディタ上での改行 =　brタグ
  • 1テキストを改行するのみ
  • ※改行を2個以上続けても変化なし
  • ソースコードが見やすくなるのみ
• 半角スペース2つでも同じ役割
  • 複数記載しても、1回の改行まで
• 空白行の挿入：<br>タグ
  • 見出しが十分なmarginを含むためあまり使用しない

（１１）箇条書き・・・番号なし(Disc型)

冒頭に「- 」を記述する
　　└上下に空白行が必要
　　└ハイフンの後には「半角スペース」が必要
　　└「- 」が黒丸になる
　　└タブで階層を下げれる（白丸になる）
　　└※改行すると同じ階層になる（shift+tabキーで1階層上げる）

• AAAA
• BBBB
  • CCCC
  • DDDD
• EEEE

-AAAA-BBBB-CCCC-DDDD-EEEE

※箇条書きモードになっていない状態でTABキーを押すと投稿の選択になってしまう。
※意図しない公開に注意が必要（逆に、TAB+enterですぐに公開できる）

「* 」「+ 」「- 」(マイナス)でも「-」(ハイフン)と同じ機能になる
　　└黒丸＆白丸（Disc型）
　　└記号の後に半角スペース必要（ないと箇条書きモードにならない）

箇条書きの行間を空ける
　　└箇条書きモードのどこかに「- 」のみの行を挟む（※どこでもOK）
　　└テキストのない行は画面には表示されない

- AAAA

• BBBB
  • CCCC
  • DDDD
• EEEE

-AAAA--BBBB-CCCC-DDDD-EEEE

（１２）箇条書き・・・番号付き(Decimal型)

冒頭に「1＋ドット+半角スペース」(「1. 」)を記述する
　　└上下に空白行が必要
　　└ドットの後には「半角スペース」が必要
　　└タブで階層を下げれる（白丸になる）
　　└改行すると、自動で+1された数字となる（ソースコード）
　　└※改行すると同じ階層になる（shift+tabキーで1階層上げる）
　　└※冒頭の数字に関係なく、１から連番となる
　　└階層を下げた場合は、再度１から連番となる

1. AAAA
2. BBBB
   1. CCCC
   2. DDDD
      1. EEEE
      2. FFFF
3. GGGG
   

1.AAAA1.BBBB1.CCCC1.DDDD1.EEEE1.FFFF1.GGGG

※すべて「1. 」で記述しても、表示は連番となる
　└後から追加・削除する場合に便利
　└ソースコードは改行で数字が変わるので１に書き直す必要がある。。

数字を何番にするかは表示と関係がない

1. AAAA
2. BBBB
3. CCCC
   1. DDDD
   2. EEEE
4. FFFF

5.AAAA9.BBBB100.CCCC101.DDDD53.EEEE1.FFFF

＜メリット＞表示が必ず連番になる（ソースコードの番号が気になるだけ）

（１３）チェックボックス

• AAAA
• BBBB
• CCCC

「ハイフン＋半角スペース＋カッコ＋半角スペース/x(小文字のエックス)＋カッコ＋半角スペース
　　└チェックなし： [  ]
　　└チェックあり： [x]

-[]AAAA-[]BBBB-[x]CCCC

＜注意点＞
条件が１つでも欠けると表示されない
[ ] AAAA ※ハイフンなし
-[ ] AAAA　※ハイフンのあとに半角スペースなし
- [] AAAA　※カッコの中に半角スペースなし
- [ ]AAAA　※カッコのあとに半角スペースなし

（１４）折り畳み

<details><summary>もっと見る</summary>
・detailsタグとsummaryタグを使うことで実装できます。
・detailsタグで追加情報としたい内容を囲む。
summaryタグ要約して表示したい文章囲む。
</details>

　　└ <details></details>で囲む（▶が表示される）
　　└折りたたまずに表示させる部分を<summary></summary>タグで囲む
　　└※detailsタグの中でMarkdownを使うには折りたたまれる部分をdivタグで囲む（折り畳みが解除される）

折り畳みの中でmarkdownを使う

<details><summary>折り畳みの中でmarkdownを使う</summary><div>
####detailsタグとsummaryタグを使うことで実装できます。
**detailsタグ**で追加情報としたい内容を囲む。
**summaryタグ**で要約して表示したい文章囲む。
</div></details>
<br>

（１５）フォントスタイル

太字
テキストを「**」で囲む
　　└strongタグ

**ここが太字で表示されます**

打消し
このテキストを打ち消し
テキストを「~~」で囲む
　　└strikeタグ

~~このテキストを打ち消し~~

イタリック表示
Italic format is applied
テキストを「*」で囲む
　　└※アルファベットのみ（日本語には適用なし）
　　└Qittaの仕様。通常はemタグが適用される

*Italicformatisapplied*

（１６）水平線

書き方が３つある(どれでもOK）

1：「*」連続して3つ以上
2：「-」連続して3つ以上
3：「<hr>」

**********--------------------<hr>

※太さが違って見えるが、記述によって太さが決まっているわけではない。
　　└*****は***より太いとかはない
　　└記述した場所によって太く見える場合がある(目の錯覚？）

（１７）書き方の公式ヘルプ

編集画面のヘルプから、主要な書き方を見ることもできる。

■書き方ヘルプの場所

編集画面上部の？マークをクリック


■表示画面

もっと詳しく知りたい場合は、モーダル上部の「(もっと詳しく知りたい方はこちら)」をクリック

＜ヘルプで躓いたところ＞

・枠（背景グレー、文字色黒）がどれかわかりずらい
　　└　他のサンプルの表示例も背景がグレーになっている
　　└ 「コードのインライン表示」でパッとわかれば問題なし

・枠（背景黒、文字色白（いわゆる黒板））がどれかわからない
　　└　サンプルではグレーになっている

・リスト表示は半角スペースがないと機能しない
　　└上下に空白行がなくても機能しない

・番号付きリストの実際の表示が番号と連動しない

・CSSの適用方法がわからない　
　　⇒　適用できない

・水平線の太さを変えたり、色を変えられるのかがわからない
　　⇒　変えれない

・強調（イタリック）の表示が何も変化していない
　　└ アルファベットしか適用されないのに、サンプルでは日本語の例になっている

などなど、、
とても書ききれないので一部抜粋

実際の表示と違うのは、他の人の記事見てこんなふうに表示したい！と思ったときの逆引きが難しい。。

一通りつまづくパターンがわかったらヘルプのみで十分。
（むしろシンプルでわかりやすい）

ページ上部に戻る

セクション別リンク

1. 枠：背景色グレー、テキスト黒(インラインコード）
2. 枠：背景色黒、テキスト白（黒板）
3. 枠上部のタブ
4. 引用
5. 見出しの種類
6. CSSスタイルは認識されない
7. markdownとは
8. テキストリンクの設置方法
9. 画像の埋め込み(外部サイト）
10. 改行や空白
11. 箇条書き・・・番号なし(Disc型)
12. 箇条書き・・・番号付き(Decimal型)
13. チェックボックス
14. 折り畳み（アコーディオン）
15. フォントスタイル
16. 水平線
17. 公式ヘルプ

はじめに

前回
4日目です。

#4

問題
わーい。B問題だー

考えたこと
入力される[町の名前、人口]を人口でsortして、一番大きい町が過半数以上あるか判別します。
私の場合は、[町の名前、人口]みたいに二次元配列なので普通にsortできないので、

s.sort(key=lambdax:int(x[1]),reverse=True)

でsortしました。参考にしたページ
おしゃれでかっこいいので好き。x: int(x[n])で要素のindexを指定してsortできます。今回は人口でsortしたいのでx[1]、大きい順にしたいのでreverse=True。

人口はfor文で計算しました。

population=0foriinrange(n):population+=int(s[i][1])

ちゃんと変数名を分かりやすく書きました。少し長いけど。
あとはif文に入れるだけ。

n=int(input())s=[list(input().split())for_inrange(n)]population=0foriinrange(n):population+=int(s[i][1])s.sort(key=lambdax:int(x[1]),reverse=True)ifint(s[0][1])>population//2:print(s[0][0])else:print('atcoder')

最後に、print('atcoder')のスペルミスに気をつければ大丈夫。

まとめ

B問題でも簡単な方だと思います。明日は、コンテストがあるので投稿するか迷ってます。毎日投稿
では、また

対象

• Dockerは使ってる、使ったことあるし、なんとなく環境も作ったり作らなかったりする
• やれと言われれば自分一人でもググったりしてなんとか立ち上げられるけど、説明してと言われると言葉に詰まる
• Dockerについてなんとなく図解することはできるけど、じゃあ実際にどういうコードを書けばいいのか説明にこまる
• 毎回コマンドをググる、ショートカットで対応しているけど根本的にはわからない
• (↑主に私です )

環境

• MacOSX 10.15.3
• docker desktop 2.2.x

まずDockerといっても何を使っているのかを知る

$ docker version

Client: Docker Engine - Community
 Version:           19.03.5
 API version:       1.40
 Go version:        go1.12.12
 Git commit:        633a0ea
 Built:             Wed Nov 13 07:22:34 2019
 OS/Arch:           darwin/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          19.03.5
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.12.12
  Git commit:       633a0ea
  Built:            Wed Nov 13 07:29:19 2019
  OS/Arch:          linux/amd64
  Experimental:     true
 containerd:
  Version:          v1.2.10
  GitCommit:        b34a5c8af56e510852c35414db4c1f4fa6172339
 runc:
  Version:          1.0.0-rc8+dev
  GitCommit:        3e425f80a8c931f88e6d94a8c831b9d5aa481657
 docker-init:
  Version:          0.18.0
  GitCommit:        fec3683

ここでわかったのは、Docker Desktopをインストールして使っている際のDockerとは、Docker Engineという仕組みのことをいう様です。そしてDocker EngineにはClientとServerがある様です。
あと、containerはdaemonで動いているんですね（表現があいまいですみません）

Dockerのコマンドにどんなものがあるか知る

Dockerコマンドは、要するにDocker Engineを操作する為のコマンドということです。

$ docker --help

dockerコマンドの基本的な型

Usage:  docker [OPTIONS] COMMAND

普通ですね。

dockerコマンドのオプション

Options:
      --config string      Location of client config files (default "/Users/watashi/.docker")
  -c, --context string     Name of the context to use to connect to the daemon (overrides DOCKER_HOST env var and default context set with "docker
                           context use")
  -D, --debug              Enable debug mode
  -H, --host list          Daemon socket(s) to connect to
  -l, --log-level string   Set the logging level ("debug"|"info"|"warn"|"error"|"fatal") (default "info")
      --tls                Use TLS; implied by --tlsverify
      --tlscacert string   Trust certs signed only by this CA (default "/Users/watashi/.docker/ca.pem")
      --tlscert string     Path to TLS certificate file (default "/Users/watashi/.docker/cert.pem")
      --tlskey string      Path to TLS key file (default "/Users/watashi/.docker/key.pem")
      --tlsverify          Use TLS and verify the remote
  -v, --version            Print version information and quit

まだどう使うのかはわかりません。

dockerコマンドで指定できる管理コマンド

Management Commands:
  builder     Manage builds
  checkpoint  Manage checkpoints
  config      Manage Docker configs
  container   Manage containers
  context     Manage contexts
  image       Manage images
  network     Manage networks
  node        Manage Swarm nodes
  plugin      Manage plugins
  secret      Manage Docker secrets
  service     Manage services
  stack       Manage Docker stacks
  swarm       Manage Swarm
  system      Manage Docker
  trust       Manage trust on Docker images
  volume      Manage volumes

なんとなく出てきました。
config, container, image, network, service, volume.... なんかDockerの勉強をしていて聞いたことがあるような単語たちですね。

ちなみにこれらはさらに docker system --helpみたいな形で中を見ることができる様です。（--helpをつけなくても、同じ出力はみれます）

例: docker systemコマンドの詳細

$ docker system --help

% docker system --help
Usage:  docker system COMMAND

Manage Docker

Commands:
  df          Show docker disk usage
  events      Get real time events from the server
  info        Display system-wide information
  prune       Remove unused data

docker system pruneはつい最近使いましたが、全ての停止中のコンテナ、ボリューム、ネットワーク、イメージを一括削除するコマンドです。 停止中を unused、 すべてのcontainer, volume, network, imageを dataと表現しているんですね。
Dockerでは pruneはこの様な意味を持って使われているようで、docker system prune以外にも docker images pruneなども出来る様です。

dockerコマンドで指定する操作コマンド（アクション・命令）

Commands:
  attach      Attach local standard input, output, and error streams to a running container
  build       Build an image from a Dockerfile
  commit      Create a new image from a container's changes
  cp          Copy files/folders between a container and the local filesystem
  create      Create a new container
  deploy      Deploy a new stack or update an existing stack
  diff        Inspect changes to files or directories on a container's filesystem
  events      Get real time events from the server
  exec        Run a command in a running container
  export      Export a container's filesystem as a tar archive
  history     Show the history of an image
  images      List images
  import      Import the contents from a tarball to create a filesystem image
  info        Display system-wide information
  inspect     Return low-level information on Docker objects
  kill        Kill one or more running containers
  load        Load an image from a tar archive or STDIN
  login       Log in to a Docker registry
  logout      Log out from a Docker registry
  logs        Fetch the logs of a container
  pause       Pause all processes within one or more containers
  port        List port mappings or a specific mapping for the container
  ps          List containers
  pull        Pull an image or a repository from a registry
  push        Push an image or a repository to a registry
  rename      Rename a container
  restart     Restart one or more containers
  rm          Remove one or more containers
  rmi         Remove one or more images
  run         Run a command in a new container
  save        Save one or more images to a tar archive (streamed to STDOUT by default)
  search      Search the Docker Hub for images
  start       Start one or more stopped containers
  stats       Display a live stream of container(s) resource usage statistics
  stop        Stop one or more running containers
  tag         Create a tag TARGET_IMAGE that refers to SOURCE_IMAGE
  top         Display the running processes of a container
  unpause     Unpause all processes within one or more containers
  update      Update configuration of one or more containers
  version     Show the Docker version information
  wait        Block until one or more containers stop, then print their exit codes

build, exec, info, inspect, logs, pause, ps, rename, restart, rm, rmi, run, などなど、使った記憶があるものや、dockerでなくても他のコマンドと一緒に使ったことがある単語が登場しました。
基本的には、よく聞いた事があるようなコマンドたちですね。
めんどくさそうなのが、 rmは containerを削除し、 rmiが imageを削除するというところかなと思いました。

Docker Imageの確認

Docker imageを表示させるためのコマンド

公式ドキュメントはこちら

$ docker images --help

気をつけなくてはいけないのは、docker imagesと docker imageは少し意味が違っています。

些細な意味の違いではありますが、このあたりが意識しておくのは大切かもしれません。

出力例

REPOSITORY                                                               TAG                 IMAGE ID            CREATED             SIZE
${id}.dkr.ecr.${region}.amazonaws.com/${repositoryName}                  8                   b895764be967        11 hours ago        2.82GB
watashino/dockerImage                                                    latest              b3b481eaf996        11 hours ago        2.82GB

使い方

Usage:  docker images [OPTIONS] [REPOSITORY[:TAG]]

ポイントは、repositoryは <repository_name>:<tag>という表記も対応可能ということ。

Options:
  -a, --all             Show all images (default hides intermediate images)--digests         Show digests
  -f, --filter filter   Filter output based on conditions provided
      --format string   Pretty-print images using a Go template
      --no-trunc        Don't truncate output
  -q, --quiet           Only show numeric IDs

Docker image の作成（ビルド）

https://docs.docker.com/engine/reference/commandline/build/

使い方を確認

$ docker build <path | url>
$ docker image build <path | url>

docker-compose を使ったビルドについて

dockerを扱うとき、主にビルドするときでしょうか、よく docker composeという機能が利用されます。これは複数のコンテナを管理する為のツールで、 docker-compose.ymlという名前の設定ファイルでよく扱われているかと思います。

docker-compose を使ったビルド

$ docker-compose build

下の様なdocker-composeファイルがあれば、 Dockerfileのパスとの関係性上適切なパスで上のコマンドを叩くことでビルドされます。
また、下のコマンドではビルドと起動を一緒に行う事もできます。

$ docker-compose -up--build

version: '3'
services:
  app:
    image: watashino/docker_image
    build:
      context: ..
      dockerfile: ./watashino/Dockerfile
    container_name: container_name

ちなみにこの docker-compose はバージョンによって対応している Docker Engine のバージョンが異なります。なので、Docker Engineのバージョンが古く、docker composeのバージョンが新しかったりすると、書き方的にエラーになったりもします。
バージョンについてはこちら

Docker image を削除

使い方を確認

$ docker image rm --help

Usage:  docker image rm [OPTIONS] IMAGE [IMAGE...]

Remove one or more images

Aliases:
  rm, rmi, remove

Options:
  -f, --force      Force removal of the image
      --no-prune   Do not delete untagged parents

ポイント

• imageは複数指定できること。
• rmではなくrmi, remove などでも代用可能なこと
• -fで強制削除が可能なこと

使っていないimageを全部一括削除

$ docker image prune
$ docker image rm$(docker images -q)

ポイント

• pruneは使われていないものを削除するといった意味を持っていましたが、ここでも同様でした
• docker image rm $(docker images -q)は docker image rmという操作コマンドの対象に docker images -qで出力される複数のimage idを指定しています

対象の image を削除

$ docker image rm<image id>$ docker rmi <image id>

どちらでも大丈夫でした。
ここで最初にわかんなかったのが、 対象の指定の仕方は image idということです。repositoryではありません。
$ docker imagesを叩くと、何がrepositoryで何がimage idなのかわかります。

一旦終わりに

docker の image に関するコマンドについての備忘録でしたが、分かっている人からしたら当たり前なことかと思います。
でもよく分かっていない人からすると、整理するのに少し役立つかもしれません。

なお、この記事は備忘録になります。自分一人で調べてもわかんないけど、だれかと一緒にやるとぱっと解決策を見つけられたりもしたので、そういう意味も込めてこの記事を残しています。

概要

codepenはiframeで別のブラウザでレンダリングした画面を埋め込んでいるため、手元で動かしているブラウザと異なる挙動を示す場合がある。
以下のようにjavascript内でDOMを操作する場合、htmlファイル内でのjavascriptの呼び出し（ <script src="script.js"></script>）は対象のDOM（<button>）の後に書く、あるいはdeferを使用するが、codepenだと<button>の前に書いても問題なく実行出来た。

やりたいこと

ボタンを押すと文字列が出力される、という挙動をhtmlとjavascriptで確認する。
【参照】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page

例）codepenの場合

<!DOCTYPE html><htmllang="en-US"><head><metacharset="utf-8"><title>Apply JavaScript example</title><script src="script.js"></script></head><body><buttononclick="">Click me</button></body></html>

functioncreateParagraph(){letpara=document.createElement('p');para.textContent='You clicked the button!';document.body.appendChild(para);}constbuttons=document.querySelectorAll('button');for(leti=0;i<buttons.length;i++){buttons[i].addEventListener('click',createParagraph);}

例）手元のブラウザの場合（今回はChrome）

<!DOCTYPE html><htmllang="en-US"><head><metacharset="utf-8"><title>Apply JavaScript example</title></head><body><button>Click me</button></body><script src="script.js"></script></html>

または

<!DOCTYPE html><htmllang="en-US"><head><metacharset="utf-8"><title>Apply JavaScript example</title><script src="script.js"defer></script></head><body><button>Click me</button></body></html>

設定環境

ホストOS
Windows 10 Pro
*IPアドレスを固定した状態

仮想環境ソフトウェア
VitualBox

仮想環境OS
CentOS7

インターネットに接続できなかった時点での設定

VitualBoxのネットワーク設定
ブリッジアダプター

その他の設定はデフォルトのまま

$ nmcli device
DEVICE　TYPE　STATE　CONNECTION
enp0s3 ethernet disnonnected --

設定の変更点

1．VitualBoxのネットワーク設定をNATに変更
2．ifcfg-enp03s　の設定変更
ONBOOT=no　→　yes

ifcfg-enp03sのパス
root/etc/sysconfig/network-scripts/ifcfg-enp03s　

なぜ接続できなかったか（なぜ最初はブリッジアダプター設定にしたか）

今回の環境構築の前に、IPアドレスがDHCP自動取得になっている別PCでテスト環境を構築した際には、ブリッジアダプターで問題なく接続できた。
ブリッジアダプターとNATの接続方法の違いを理解しないと…

参考

https://www.shookuro.com/entry/2018/02/10/172724
https://qiita.com/feifo/items/0fde474005589afcff68
https://endy-tech.hatenablog.jp/entry/2018/10/27/134223#VirtualBox%E3%81%AE%E4%BB%AE%E6%83%B3%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

ビアンカかフローラかデボラか

ビアンカとフローラとデボラ。
3人のうち1人としか結婚できないとしたら。
誰と結婚すればいいのか迷ってしまう人もいるだろう。
ではなぜ人は迷い、悩んでしまうのだろうか。

今回は迷うことそして悩むことについてプログラムを書いているときにふと気づいたことがあったので書き留めておこうと思う。

事の発端

昨日CS50の課題を解いていたときのこと。

CS50というのはこいつのことだ。

CS50 2019 - Lecture 0 - Computational Thinking, Scratch

「ハローワールドを書くだけでこんなに汗をかいているやつを見たことがない」
と言わしめるほどの熱の入り具合。
こんなにわかりやすい講義が無料で受けられるなんて。インターネット万歳。

さて、こいつのweek1のcreditという課題を解いている時に事件は起きた。
課題の内容は以下のアルゴリズムを実装しなさいというもの。クレジットカード番号の不正チェックらしい。

1. クレジットカード番号をuserに入力させる。
2. 入力された番号の偶数ケタの位の数を全て足し合わせる。
3. 奇数ケタの位の数を2倍して足し合わせる。
ただし2倍して10以上になる場合はさらに12 -> 1 + 2のように分解して足し合わせる。
4. 2と3で求めた合計を足す
5. 4の結果が10の倍数であれば有効な番号であると判定する

早速コードを書き始めた。
最初のuserに番号を入力させるところはOK。

次にどうやって番号を偶数と奇数のケタに分解するかを考えることになったが、

・whileでループさせるほうがいいのかforを使うほうがいいのか
・分解した数は配列に保存しておいたほうがいいのか
・それとも再帰を使うほうがいいのか

などとあれこれ考えて手が止まってしまった。

悩んだら、あとは動けばいい

んーーーーー分からない。どの方法が一番正しいんだ。
とりあえず一回時間をおいて考えてみよう。
ひとまずお昼ご飯を食べることにした。
そして赤いきつねにお湯を注いで麺がほぐれるのを待っているときにふと気がついた。

そもそも正解を探す必要はないんじゃないかと。

考えつく選択肢がいくつかあって、ぱっと見でどれが正解かなんて今はまだ分からない。
ましてや選択肢の中に正解が存在するかどうかも分からない。

だったら選択肢の中から正解を探し当てようとするのでは無く、
思いつく選択肢を順番にやってみればいいじゃないか。
なーーーにを悩んでいたのか。

そうしてコードを書いていくうちにまた新しい選択肢を思いついた。
まだ改善の余地はあるかもしれないけれど、とりあえず僕の中では納得のいくコードを書くことが出来た。

結論

生きていく中で多かれ少なかれ迷ったり悩んだりして立ち止まるときがあると思う。
そしてそれは取り得る選択肢が2つ以上あって、その全てを同時に選択することが出来ないときではないだろうか。
つまり何かを選ばなければいけないときに、どれを選ぶか（あるいは選ばないか）ということを迷うわけである。

だからもし自分が迷っていると気づいたら、まずは選択肢を考えつくだけ挙げてみる。
そしてその中からいくつ選ぶことが出来るだろうかと考えてみるといいかもしれない。

よくよく考えたら選択肢が1つだけだった、なーんてことになったらもう悩む必要もない。
たくさん選択肢があったとしても、いつも1つだけ選ばなきゃいけないなんてことはない。
実は全部選べちゃうなんて気づいてしまったら、あとはただ順番にやってみればいい。
また全部は選べなくても、2つや3つは選べるかもしれない。

ビアンカとフローラとデボラ。
3人のうち1人としか結婚できないとしたら。
誰か1人を選ぶ前のデータを3つ作っておいて、全員と結婚することもできる。

ただ人生はセーブできない。どうやら冒険の書は1つだけらしい。
だから、迷ったり悩んだりしたときには、できる限り多くの選択肢を挙げてみる。
そして1つだけでなくいくつも選べるかもしれないと考えることができれば、後悔は少なくて済むかもしれない。

どうも、UT(@ut_1029)です。ブログ(UTの日常)の紹介です。

JavaScriptで九九表を出力するプログラミングしたサンプルコードを紹介します。

JavaScriptで九九表を出力するプログラミング

<html><head><metacharset="UTF-8"><title>JavaScriptで九九表</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><h1>JavaScriptで九九表</h1><tableclass="table table-bordered table-hover table-sm"style="text-align: center;"><theadclass="thead-dark"><tr><th>#</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr></thead><tbody></tbody></table><script src="https://code.jquery.com/jquery-3.3.1.js"></script><script>for(varrow=1;row<=9;row++){$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');for(varcolumn=1;column<=9;column++){varnum=row*column;$('table').find('tbody').find('tr').eq(row-1).append('<td>'+num+'</td>');}}</script></body></html>

解説は、ブログ（UTの日常）で！

【初心者】JavaScriptで九九表を出力するプログラミングを解説 | UTの日常

はじめに

チームでアプリケーション開発をしていて、データベースを設計をしていくと
GitHubにpushしたマイグレーションファイルの取り扱いについていろいろと振り回され
学ぶことが多いと思います。
そのときに参考にさせていただいたのが、こちらの記事でした。
GitHubにpushしたmigrationファイルは安易に修正してはいけません

本記事は、テーブルを統合することによって不要になったモデルファイルを消すときのお話です。

2つのテーブルを１つに統合することになった

開発を進めていくと、２つのテーブルを１つに統合することがありますよね。

AとBの２つをAに統合して、Bが不要になったとします。

Bテーブルを削除するには、新たにdropするマイグレーションファイルを追加するとして、
Bモデルを削除するには、消し漏れを防ごうとして、「rails d(estroy) model B」を実行したくなりますが、やってはいけません。

なぜ？

Bモデルのファイルと一緒に、Bテーブルをcreateするマイグレーションファイルも
削除されるため、マイグレーション履歴が壊れてしまうからです。

実際にやらかしてみた

※ここからは、Aテーブルを「hoge」、Bテーブルを「test」で表現します。

testモデルを消したいので、「rails d model」コマンドで削除したら、こんな事になりました。

% cd アプリケーションのパス
% rails d model test

Running via Spring preloader in process 36020
      invoke  active_record
      remove    db/migrate/20200227115950_create_tests.rb
      remove    app/models/test.rb
      invoke    rspec
      remove      spec/models/test_spec.rb
      invoke      factory_bot
      remove        spec/factories/tests.rb

３行目のremoveに注目すると、testテーブルをcreateするマイグレーションファイルが
削除されていることが分かります。

この状態でマイグレーションの履歴をみるとこうなります。

% rails db:migrate:status

database: hogehoge_development

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200210112600  Create hoges
   up     20200210115950  ********** NO FILE **********
   up     20200211120823  Create fugas
   up     20200211133456  Add Column hoges
   up     20200211135601  Drop tests

Migration ID 「20200210115950」の名前が見事になくなっています。
このIDは、「test」テーブルを作成するマイグレーションファイルに当たります。
モデルを消したいだけなのに、必要なファイルまでもが消えてしまいました。

こうなってしまうと、後から参加するメンバーが git clone しても
マイグレーションの実行で失敗してしまい、データベースが構築できなくなってしまいます。

もちろん、マイグレーションの履歴を見た瞬間にあばばばばとなりました。

さあ、復旧しよう

削除したファイルがゴミ箱に残されていたのが幸いでした。
「20200227115950_create_tests.rb」を元の場所に戻すことで復旧ができました。
とにかく良かった(^^;

ではどうすれば良かったのか

「rails d model」コマンドでは消さずに手作業で対象となるファイルを消します。
今回は、モデルとRSpecテストの各ファイルを削除しましょう。

#モデルファイルを消す。
% cd アプリケーションのパス
% cd app/models
% rm test.rb

#RSPecファイルを消す。
% cd ../../spec/factories
% rm tests.rb
% cd ../models
% rm test.rb

ターミナルで消すのは面倒だという人は、VS Codeのエクスプローラーから削除するとラクです。
僕もこの方法で消しました。

まとめ

今のところは、不要になったモデル(とテストに関連する)ファイルは、手作業でしか消せません。
効果的な方法がありましたらコメントをいただけると助かります。

どうも、Shota(@Mii4a2501)です。
自作Webアプリの開発中、id取得と同じようにgetElementByClassNameを用いて作成した変数に処理を加えようとした際、

Uncaught TypeError: document.getElementByClassName is not a function

といったエラーが出てきてしまったので、getElementByIdとgetElementByClassNameでは出力に違いがあることに気が付けたので、調べたことを書き記しておこうと思います。

getElementByIdの返り値

<pid="hoge">hoge</p>
varhoge=document.getElementById('hoge');console.log(hoge);// =>　<p id="hoge">hoge</p>

このように、getElementByIdは引数に合致するidを持つタグと属性、タグに囲まれたテキストを返します。

getElementByClassNameの返り値

<pclass="hoge">hoge</p>
<pclass="hoge">hoge</p>
<pclass="hoge">hoge</p>
varhoge=document.getElementByClassName('hoge');console.log(hoge);// => HTMLCollection [ p.hoge, p.hoge, p.hoge ]

このように、getElementByClassNameはHTMLCollectionという配列風のオブジェクトを返します。配列風といっても実際の配列のように、添字での取得やfor構文で用いることができるようです。

詳しくはMDNをご参照ください
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

最後に

両者の処理方法について、同様の処理をすると勘違いをしていたので気が付けてよかったです。
ご覧いただきありがとうございました。

はじめに

JavaScriptを学び始め、
関数の理解に苦しんでいるという方が、
多くいると感じます。
私もその中の一人です。

関数とはどのような物なのか？
説明していきます。

関数とは...

定められた処理を定義することです。

処理内容を
「関数」として定義し、その関数を呼び出すと、
一連の処理が実行されます。

例えば

「アメリカに行って、野球観戦する。」という
一連の処理に、「baseball」（関数）という名前を付けたいと思います。

上記の処理を行うと、
「baseball」と記述するだけで、「アメリカに行って、野球を観戦する。」
という処理が行われます。

私事ですが、とても便利な機能だ！！
と、思いました。

よく使う処理を
定義してあげれば、毎回毎回その処理内容を記述しなくてすみます

本日のまとめ

関数はとても便利な機能です。
コード記述時間の短縮にも、繋げられます。

関数には
1.ユーザー定義関数
2.組み込み関数
の２種類があります。

その内容については、
明日投稿します。

はじめに

MAMPを使用してLaravelの環境を構築しようとした際にDB接続の設定でつまずいたため、その内容と解決した方法をまとめます。　　

対象読者

初めてLaravelでwebアプリを作ろうとしている初心者の方。

LaravelのDB設定がうまくいかない方。　

開発環境

・mac book pro(Mojave)　
・MAMP(version5.7)
・MySQL
・Composer(version1.9.1)
・Laravel(ver5.8.3)

エラーにハマった経緯

もともとXAMPPを使用してLaravelのアプリを開発していました。
しかし、macで開発をする場合はMAMPを使用した方がベターであるとの話を聞いて、 これを機にMAMPを使おうと思いXAMPPの環境からMAMPの環境にアプリを移行しようとしたのですが、SQLSTATE[HY000] [2002] No such file or directoryのエラーが出てDBに接続できなくなりました。

移行する際にやったこと(失敗例)

XAMPPで環境を作った際、筆者はWEBサーバーもDBサーバーもよくわかっていませんでした。
調べたところ.envと/config/database.phpあたりがどうやらDB接続の設定ファイルらしいとわかり、見よう見まねで何とか接続することができました。

で、MAMPに移行するに当たって、久々にDB接続の設定ファイルを見た所、とりあえず、.envと/config/database.phpのそれらしいところをMAMPに合わせて修正すれば良さそうな気がしたのでやってみました。

MAMPのアプリを立ち上げてサーバーを起動させるとスタートページに飛ぶのでページ内にあるMySQLの設定を参照します。

DB_HOST=localhost
DB_PORT=8889
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

/config/database.phpの中身は先頭に*をつけた項目のみ変更しました。

'mysql'=>['driver'=>'mysql','url'=>env('DATABASE_URL'),*'host'=>env('DB_HOST','localhost'),*'port'=>env('DB_PORT','8889'),*'database'=>env('DB_DATABASE','database_name'),*'username'=>env('DB_USERNAME','root'),*'password'=>env('DB_PASSWORD','root'),*'unix_socket'=>env('DB_SOCKET','/Applications/MAMP/tmp/mysql.sock'),'charset'=>'utf8mb4','collation'=>'utf8mb4_unicode_ci','prefix'=>'','prefix_indexes'=>true,'strict'=>true,'engine'=>null,'options'=>extension_loaded('pdo_mysql')?array_filter([PDO::MYSQL_ATTR_SSL_CA=>env('MYSQL_ATTR_SSL_CA'),]):[],],

このように設定してコマンドラインから以下のコマンドを実行したところエラー発生

$php artisan migrate

Illuminate\Database\QueryException:SQLSTATE[HY000][2002]Nosuchfileordirectory

エラーをみた感じどこかのpathが違うのかなと思いエラー内容を検索したところ、どうやら'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql.sock')の部分が関係ありそうとわかりました。
そう言えばXAMPPを使った時には/config/database.phpのこの部分をいじった覚えがなかったので、この記述について調べてみると、どうやらMAMPを使ってLaravelからDBに接続するにはTCP接続とUNIXドメインソケットを使用する方法の２通りがあるらしいということがわかりました。
【参考】Laravel5でデータベース接続にUNIXドメインソケットを使う

一応TCP接続が一般的ということでUNIXドメインソケットを使用するよりは簡単そうだと感じ、ひとまずUNIXドメインソケットを使用する方法は保留にしておくことにしました。
よくわからないものは書かない方が良いということで'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql.sock')の部分を削除し、またTCP接続をする場合にはDB_HOSTを localhostではなく127.0.0.1に変更する必要があるという記事を見つけて.env、/config/database.php共に修正をしました。

【参考】MySQLでlocalhostと127.0.0.1の違い

サーバーを再起動してから、再度以下のコマンドを実行したところ同じエラーが発生

$php artisan migrate

Illuminate\Database\QueryException:SQLSTATE[HY000][2002]Nosuchfileordirectory

修正した設定は絶対に正しいはずだったのでこうなってしまうとどこが違うかの検討もつかずお手上げでした。

解決方法

筆者は全く知らなかったのですが、どうやらLaravelではApacheを再起動した場合でも内部のキャッシュが残ってしまいプログラムを変更してもうまく反映してくれないことがあるそうです。

【参考】Laravel キャッシュクリア系コマンドなど

そこでコマンドラインから以下のコマンドを実行してキャッシュのクリアを行いました。

php artisan cache:clear
php artisan config:cache

.envファイルと/config/database.phpは以下のように記述

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

'mysql'=>['driver'=>'mysql','url'=>env('DATABASE_URL'),'host'=>env('DB_HOST','127.0.0.1'),'port'=>env('DB_PORT','8889'),'database'=>env('DB_DATABASE','database_name'),'username'=>env('DB_USERNAME','root'),'password'=>env('DB_PASSWORD','root'),'unix_socket'=>env('DB_SOCKET',''),'charset'=>'utf8mb4','collation'=>'utf8mb4_unicode_ci','prefix'=>'','prefix_indexes'=>true,'strict'=>true,'engine'=>null,'options'=>extension_loaded('pdo_mysql')?array_filter([PDO::MYSQL_ATTR_SSL_CA=>env('MYSQL_ATTR_SSL_CA'),]):[],],

DB接続の確認をするために以下のコマンドを打つとエラーが消えて実行することができたことから、DB接続が確認できました。

php artisan migrate

補足

以上の方法でDB接続をすることには成功したのですが、せっかくなので先ほど保留にしたUNIX_ドメインソケットを使用する方法にも挑戦しました。

UNIX_ドメインソケットを使用したDB接続（エラー編）　　

.envファイルと/config/database.phpのDB_HOSTの127.0.0.1をlocalhostに変更して、/config/database.phpのDB_SOCKETの部分を先の/Applications/MAMP/tmp/mysql.sockに設定をしました。
以下設定ファイル

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=8889
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

'mysql'=>['driver'=>'mysql','url'=>env('DATABASE_URL'),'host'=>env('DB_HOST','localhost'),'port'=>env('DB_PORT','8889'),'database'=>env('DB_DATABASE','database_name'),'username'=>env('DB_USERNAME','root'),'password'=>env('DB_PASSWORD','root'),'unix_socket'=>env('DB_SOCKET','/Applications/MAMP/tmp/mysql/mysql.sock
            '),'charset'=>'utf8mb4','collation'=>'utf8mb4_unicode_ci','prefix'=>'','prefix_indexes'=>true,'strict'=>true,'engine'=>null,'options'=>extension_loaded('pdo_mysql')?array_filter([PDO::MYSQL_ATTR_SSL_CA=>env('MYSQL_ATTR_SSL_CA'),]):[],],

このように設定ファイルを変更し、キャッシュをクリアしてサーバーを立ち上げ直し以下のコマンドを実行してDB接続ができているかを試したところまたしてもエラーが発生。
(DBを作り直すコマンドなので実行には注意)

php artisan migrate:refresh

Illuminate\Database\QueryException:SQLSTATE[HY000][2002]Nosuchfileordirectory

またこのエラーかということで詰みました。今回も変なところは見当たらないと思っていたのですが、ネットにあがっている記事を色々と見ていたところこのような記事を発見しました。

【参考】Laravelの.envファイルと、config/database.phpファイルについてのメモ

筆者は今まで設定ファイルの中のそれっぽい記述に飛びついて書いていたため全く意識してなかったのですが、config/database.phpのmysqlの設定部分は連想配列になっており、env()という関数に引数として.envファイルで設定した環境変数を渡す形のプログラムとなっています。また、env()の第二引数ではデフォルト値を渡しているそうです。

筆者は今までLaravelのDB接続設定で.envとconfig/database.phpの違いがよくわからないまま、どうしてDB接続の設定ファイルが二つもあるのかという風に思っていましたが、これに気づいて少し納得しました。
とはいえ実際に試してみないと曖昧なままなので、これを踏まえて先ほど成功したTCP接続で実験してみることにしました。

env関数の実験(TCP接続)

config/database.phpがenv()により.envで設定した環境変数の値を取得し、env（）の第二引数はデフォルト値であるということは、.envさえ設定していればconfig/database.phpのenv関数の第二引数には何も渡さなくていいんじゃないかという予想を元に.envとconfig/database.phpを変更してみました。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

'mysql'=>['driver'=>'mysql','url'=>env('DATABASE_URL'),'host'=>env('DB_HOST',''),'port'=>env('DB_PORT',''),'database'=>env('DB_DATABASE',''),'username'=>env('DB_USERNAME',''),'password'=>env('DB_PASSWORD',''),'unix_socket'=>env('DB_SOCKET',''),'charset'=>'utf8mb4','collation'=>'utf8mb4_unicode_ci','prefix'=>'','prefix_indexes'=>true,'strict'=>true,'engine'=>null,'options'=>extension_loaded('pdo_mysql')?array_filter([PDO::MYSQL_ATTR_SSL_CA=>env('MYSQL_ATTR_SSL_CA'),]):[],],

上記のように設定ファイルを変更して以下のようにコマンドを打ってキャッシュを削除します。

php artisan cache:clear
php artisan config:cache

サーバーを再起動してから、以下のコマンドを打つと実行できるようになり、DB接続が確認できました。

php artisan migrate:refresh

UNIX_ドメインソケットを使用したDB接続（解決編）　

要するに.envファイル内の記述がLaravelのDB接続の設定ファイルとしてはメインだということがわかったのですが、よくよく考えてみるとunix_socketに関する記述がデフォルトでは.envファイルの方に書かれていませんでした。
そこで試しに以下の一文を.envファイルに追加しました。

DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

上の記述を追加した後の.envファイルの設定は以下のようになります。

DB_CONNECTION=mysql
DB_HOST=localhost
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_PORT=8889
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

/config/database.phpについては変更なしのままです。

'mysql'=>['driver'=>'mysql','url'=>env('DATABASE_URL'),'host'=>env('DB_HOST',''),'port'=>env('DB_PORT',''),'database'=>env('DB_DATABASE',''),'username'=>env('DB_USERNAME',''),'password'=>env('DB_PASSWORD',''),'unix_socket'=>env('DB_SOCKET',''),'charset'=>'utf8mb4','collation'=>'utf8mb4_unicode_ci','prefix'=>'','prefix_indexes'=>true,'strict'=>true,'engine'=>null,'options'=>extension_loaded('pdo_mysql')?array_filter([PDO::MYSQL_ATTR_SSL_CA=>env('MYSQL_ATTR_SSL_CA'),]):[],],

このように設定したら、再度キャッシュをクリアするコマンドを打ちます。

php artisan cache:clear
php artisan config:cache

サーバーを再起動して、以下のコマンドを打つと実行できたことから、DB接続が確認できました。

php artisan migrate:refresh

まとめ

本記事ではMAMPを使用したLaravelのDB接続についてエラーを解決するために色々試してみました。

長くなったので本記事のトピックをまとめます。

1. MAMPを使う場合LaravelのDB接続方法にはTCP接続とUNIX_SOCKETを使用した接続がある
2. Laravelではキャッシュをクリアしないと設定の変更が反映されないことがある
3. TCP接続を使う際はDB_HOSTを127.0.0.1とする
4. UNIX_SOCKETを使用して接続する際はDB_HOSTをlocalhostとし、DB_SOCKETを設定する
5. config/database.phpで使われているenv関数は.envで設定した環境変数を取得する関数である
6. UNIX_SOCKETを使用して接続する際は.envにDB_SOCKETを設定する文を追加する

終わりに

今まで、あまり内容を理解せずに行っていたLaravelのDB接続設定ですが、今回しっかりと向き合えたおかげで曖昧にしていた部分がよくわかりました。
また、今回はMAMPを使用しておりますが、XAMPPや他の方法でも同じように設定できるのかはわからなかったので後々実験してみようと思います。
本記事を作成する中で色々と試し理解したつもりではありますが、まだまだ理解の浅い部分や間違った解釈をしている部分があるかも知れません。そのような部分があった場合はご指摘いただけると幸いです。

また、初心者の方を対象にした記事になっていますが、記事を作成した筆者もまた、合間の時間を使って独学で学んでいる初心者です。筆者の話をすると、現在webプログラマーを目指して就職活動中ですが、未経験歓迎と書いてありながらも現場で働いている社員の方は即戦力になる人が欲しいと思っているのが本音なのか、どんなに熱心に準備をして望んでも興味なさそうに面接をされて落とされることもありました。
ただ、それはそれで仕方ないと筆者は割り切るようにしています。笑
しんどいことや辛いこともたくさんありますが、頑張っていきましょう！

参考サイト一覧

本記事の中で参考にさせていただいた記事を一度リンクを貼ったものも含めて再度掲載します。

• Laravel キャッシュクリア系コマンドなど
• Laravel5でデータベース接続にUNIXドメインソケットを使う
• MySQLでlocalhostと127.0.0.1の違い
• Laravelの.envファイルと、config/database.phpファイルについてのメモ