"musubi"

プログラミングに関する記事を1日1つ挙げていく予定であります。

在宅勤務最高に満喫している件

お題「#おうち時間

 

在宅勤務が楽すぎる…。

9時出社なら、8時50分に起きちゃえばいいじゃない…!

エンジニアはなぜか朝弱い人が多いそうなのですが(ソースなし)

まさにその通りですね。

 

在宅勤務のいいところは寝れるところだけじゃなくて

 

・めちゃくちゃ集中できる(人にとられる時間がすくない)

・自分の時間に余裕ができる

 

これに尽きるんじゃなかろうか…?

 

今まで、近くのデスクの方に

「●●さん、これってわかる?」「●●、このことなんだけど…」

って声かけられて、いちいち自分の時間を使ってたわけだけど

そんなのなくなるわけだ!!

まぁ、結局本当にわからないときは、聞かないといけないけど、集中力を削ぐ雑談がなくなるのは最高だと思う。

 

特に、深い海にダイビングするようにプログラムを見ているときとか、話しかけられたら終わるからね。

今まで潜ってた時間、パーだから!

あと5分待って!っていう間に記憶なくしちゃうから!!(自分だけ)

 

自分の時間に余裕ができるってのは、やっぱり通勤時間がないこと、昼休みを切り替えを使えるってことが大きいかなと思います。

私の場合、通勤時間はさほどでもなかったけども、昼休みに寝たり、ベランダいったり…と1人で切り替えれる時間があるだけで、マジで気持ちが違う。

 

在宅最高なので、出社したくないです~~~

 

…在宅のデメリットも一応。

 

・実機ありきのテストや製造、障害対応はつらい

・コミュニケーションが少なくなり、伝わる情報が少ない(slackで何度も聞いちゃう)

 

実機が1台しかなくて、それを1人が持って帰ってたら…

まぁ、目に見えてあかん状態よね。その人が全部こなせるわけじゃない。

でも、その人が最後確認をしないといけなくなるわけだ。

 

非効率的~~~✋

 

あとは、伝達力の問題だとは思うけど、伝わる・伝える情報が少なくなっちゃうことがつらい。

「●●が✕✕になってしまったのですが、どうしたらいいですか?」

 

分かりません(真顔)。

 

もうちょっと情報下さい…。

その聞き方、ぜったい人の時間奪うで…。

・何がしたいのか(目的・目標)

・やってみたこと

・教えてほしいこと、やってほしいこと(要求)

これは、まとめて送ってほしい。

私自身も気を付けています。気を付けているだけで、できているとは限りませんが、時間泥棒にならないよう気を付けよう。

曖昧な表現とかもわかりにくさを感じさせるので、わからないならわからない。どこがわからないかなどできる範囲で答えよう。

 

こればかりは、経験だと思います。

たくさん経験を積んでいこうね。私も頑張るよ。

 

ここまで読んでくださってありがとうございました。

puppeteerでテスト自動化しよう

こんばんは。

今日もpuppeteerをやっていこう。

 

ちょっと復習。

puppeteerを使う環境は昨日できたはずだから、今日はコードを書いていこうね。

まずは、moduleを作っていこう。

puppeteerを使おうと決めた君には、puppeteerにやってほしいことが色々あるはずだ。

でも、それを1つのコードに入れ込もうとしていないかい?

それは、見づらさやメンテナンスのしにくさに繋がってしまう。

 

1つずつパーツを作ってそれを組み合わせて、実行は1つだけで全部できちゃう!って状態にするのが、完成形だよ

 

puppeteerには、とりあえずこれは書いとけよってコードがあるよ。

それがこれ↓

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await browser.close();
})();
 
1行目:puppeteer使うやで!(宣言)
2行目:非同期処理やで!(asyncとawaitはセット)
   ※非同期処理とは…送信側と受信側のタイミングの一致を気にせずデータを進めること…らしい
3行目:"browser"っていう変数は、"puppeteerを始めるまで待つってことやで!"
(launch(ローンチ)って始めました的な意味らしい(衝撃))
4行目:"page"っていう変数は、"browserで新しいページ開くってことやで!"
5行目:ブラウザ閉じるまでまつやで
 
はい。内容見て分かるように、何もしてないっすね。
ブラウザ開いて秒で閉じる。
 
簡単でしょ…?
 
基本的に
Aの処理を待って、次はBの処理待って…って感じで、作っていけばいい。
ぶっちゃけ非同期処理とかわからんでも作れる。
作ったもん。
 
最初が作れたら、あとの動きはawaitしていくだけ。
ブラウザが開き終わるまでにボタン探されたってそりゃ見つからないもんね。
 
んで、書き方について躓いたらこの子の出番。

f:id:musubimusubipurasu:20200527201259p:plain

①Recordってボタンを押す

②実際に書きたい動きを行う(ボタンぽちっとするとか)

f:id:musubimusubipurasu:20200527201445p:plain

自分がやった内容が1.2.3…と書かれていくよ。

③ ②を最後まで行ったら、Stopを押す

 すると…

f:id:musubimusubipurasu:20200527201559p:plain

ほら見て~~~!
もうできちゃったよ~~!
すごーい!!天才!!
 
あとは、copy to clickboardすればいいだけ!
 
ちなみに、この↑のコードは、yahooのサイトで、yahoo!のボタン押しただけ。
 
このrecordくんは、ブラウザのサイズまで決めれるので、スマホの大きさでも確認できるよ!(実機で確認したほうがいいとは思うけどね)
 
 
ちなみに、puppeteer recorderくんを入れた状態で右クリックをすると

f:id:musubimusubipurasu:20200527202116p:plain

Puppeteer Recorderってのが出てくるよ。

f:id:musubimusubipurasu:20200527202205p:plain

これでスクリーンショットを取るってもできる。
最高だね。
 
moduleとしては、こんな感じで作っていけばいいと思います。
 
ただ、そのままこのコードを使うと、こんなデメリットもある。
 
\\なんだ、このコード何やってるか全然わからねぇ状態になる//
 
なんでかというと、selectorで、htmlの要素を追いかけてくれてるわけですけども、実際わかんないわけよ。
「trのtdの……。え?これ一体何やってんの?」状態
コードを追いかけるのがめんどくさいの極みマンになる。
自分で書いてもそんな感じにはなっちゃうんだけどもさ、できる限り簡単にわかりやすくまとめたいじゃん?
 
だから、次回はmodule同士をまとめる、コンパクトにするコードを作っちゃいましょう。
 
 
---
余談
 
昨日、このブログの設定いじってるときに、googleアナリティクスを入れれる所見つけたから、googleアナリティクス埋め込み始めたんよ。
 
ブログ書いている自分以外来てないよね。
つまり、自分で盛り上げていくしかない!!
人の役に立つためには、まず自分がしっかり理解しておかないといけないなと改めて感じました。
ぶっちゃけ、非同期処理とかわからんかったから調べると、奥がかなりふかそうだったので理解するまでがマジで長い。
あと、非同期処理だけで1記事書ける人がすごい。
金、土は暇になりそうなので、まとまって時間とれるときに書いていこうと思います。
---

puppeteerでテスト自動化していくよ

こんばんは。

今日ほんとはgit bashが使えるようになるまでのやり方書こうと思ったんやけども、

急にpuppeteer書きたくなったから本能に従うわ✊

 

まずpuppeteerとは何かを説明しよう!

puppeteer

web上の情報を抽出する(スクレイピング)技術の1つ

 何に使えるかって?

例えば、好きなジャンルの絵があったとする。

その絵をまとめてみたい!…でも、調べるのは面倒だし、大変…

そんな時に使えたりするよ!(雑)

スクレイピングを禁止しているサイトもあるから気を付けて。規約に触れない程度にするんだよ。確かtwitterとかはだめだった気がするよ。

 

エンジニアなら"テスト自動化 puppeteer"なんて調べ方するんじゃないかな

Web上のボタン操作なんて簡単に操作できるからね、便利なもんよ。

 

テスト自動化って言ったって、いろいろあるだろう

私が今まで調べたのは、

  • selenium(Webdriver)
  • selenium(IDE)
  • puppeteer
  • Selenide
  • Katalon Recoder
  • Cypress
  • Testcafe
  • Appium
  • TestComplete
  • Sumartphone Test Farm   …etc

 こうやって見るとめちゃくちゃテスト自動化の手段があるんですよ。

使わない手はないですよね?(テスト、面倒ですよね?)

 

色々あってあさ~く調べてはおるんやけども、

 

アプリとかじゃない限り、上3つのどれかを使っているところが多いんじゃなかろうか?

Seleniumは有名どころだしね。

でも、私は、puppeteerを選んだよ。理由は3つ。

  1.  導入が簡単(node.jsぐらい)
  2.  バージョン確認が楽(chromeのバージョンに捉われない)
  3.  テストできる幅が広い(スクショからPDF出力とかまで)

あとこれに加えて、reactで作ってるからjsと相性が良さそうってのもある。

 

変わって、Seleniumは、以下3つの理由で選ばなかった。

  1. 環境構築がくそめんどくさい
  2. バージョンに捉われる
  3. エビデンスとるのが大変らしい

どの言語を使ってるかってので変わってくるとは思うけど、Seleniumは複数言語(JavaPHPC#PythonRubyJavascriptなど)に対応しているので、使いやすいのがいいとは思う。

 

ただ!!!!

 

私は環境構築がめんどくさすぎてSeleniumを諦めた!!

しかもchromeのバージョンもよく見とかないと動かないときがあるとか。

そんなお暇はないので!!

…まぁ、機能が増えるたびにどんなものもメンテナンスは必要やけどな。

 

さ、習うより慣れろ。

さっそくインストールしてみましょ。

 

puppeteerのインストール方法

npmでインストールしていくのが簡単だと思うから、下のコマンドをgit bashに打ち込もう。

※ちなみに、npmとはNode.jsのパッケージ(必要なソフトやライブラリ)を管理するものよ。お得セット!みたいな覚え方でいいと思う。

$ npm install --save puppeteer

 

めっちゃ楽だね。

あとはnodeのバージョンとかを確認するコマンドもかいとこう

$ node -v

 

もうnodeが通るから、あとは書いてくだけだと思います。

seleniumだとpath通してあれしてこれして大変。挫折の道。

 

次に、自分がどこにソースを置くか決めようね。

どこにおいてもいいとは思うけど、迷ったら面倒だから、OSの下にでも置いちゃおう。

フォルダ自力で作ってもいいけど、フォルダを作るコマンドはこれ

$ mkdir XXXX

ディレクトリを作るって意味です。XXXXの部分はファイル名だよ。

プロジェクト名とかpuppeteerとかでいいんでないかしら。

 

git labやgit hubでプロジェクト管理するならつなげたり色々しておくんなまし。

 

さて、次は実際のコードだ!!!

と思うやろ?

はやる気持ちはわかるが、一度落ち着いて↓インストール↓するんや。

puppeteer recorder

https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda

 これがあると、まじで楽。

やってほしい操作を実際にやると、それをコードにしてくれる。

そんな神拡張機能

損はないぞ。

とりあえず動くやつ作りたいんや!という少年少女の諸君は入れておこう。

 

さて、明日はさっそくコードを書いていこう。

というか、puppeteer recorderを最大限活用して楽してこ?

 

 

 

------

ここからは余談。

 

puppeteerってめちゃくちゃ導入簡単だし、これでテストもできちゃうんだから最強!って思うじゃん?

まぁテスト自動化ってのが都合が良すぎる言葉なんだけど、そんなことはないよ。

だって、既存のシステムだけで成り立つシステムなんてないっしょ。

常に新しい機能やらなんやらがつくわけじゃない。

だから、メンテナンスは必要。

1回作ったら完成!なんてあり得ないんよね。(そうであってほしいけど)

メンテはする。でもテストも楽したい!っていうなら導入検討してください。

メンテする時間もかけれないなら、いつまでも同じ作業をどうぞ行ってください。

それぐらいは、めんどくさがらずやろうな。

作ったものがゴミになっちゃうぞ☆

(弊社のpuppeteerコードくんもゴミになりかけてるので、腐らないようメンテ頑張ります🤖)

------

gitコマンドまとめたいマ~ン!

こんばんは!

これで2日は続いてますね!えらいぞ~!(⌒∇⌒)

 

ほんとはですね、業務でやったプログラミングやら、wordpressの使い方やら今日知ったExcelで楽する方法、linuxについて、puppeteerとかいろいろシェアしていきたいんですが

話したいこと、やってみたいことがありすぎて順番ぐっちゃぐちゃです...( = =) 

 

もしこんなん知りたいよーとかいうリクエストが来たら、やります。

コメント来たらめちゃくちゃ喜んでやります。人間だもの。 むすを。

 

茶番はおいといて、今日はgitコマンドについてです。

gitはプログラムのソースコードを管理するシステムですから、ソースコードを上げたり持ってきたり…と色々処理があるわけです。

(…まぁぶっちゃけtortoisegitに任せちゃえば視覚的に何でもできちゃうんですけどね…)

 

今回は本当によく使うコマンドを書いていきます。

(ちなみにgitを使うための方法は省くよ!笑)

私は、打つ場所もわかってなかった人間なので、一応伝えておきますが、これらのコマンドはgit bashで使ってみてな!

gitbashのインストールの仕方は明日にでも教えたろう!

まずはモノだけ教えたろうもん。

レッツゴ~!!

 

ソースコードをもらう

$ git pull

 git上にあるソースコードをくれくれするコマンド。

$ git pull -p を私はよく使うけど、-pってのは、linuxのコマンド。

存在しないディレクトリも作ってくれる。

linuxってなんやねんって人。私もわからんのや。git bashのインストールについて上げた次の日でもまとめるYO。

 

ブランチを切る

$ git branch

 開発する時にブランチを作るのは絶対必要。

開発するとき、開発をする環境(個人のPC内)、テスト環境、ステージング環境、本番環境といったように、環境を分けないといけない。

それぞれ、環境ごとに役割があるわけだ。

  • 開発環境:ソースコードを書く
  • テスト環境:テストをする
  • ステージング環境:デグレが起こっていないか確認する
  • 本番環境:実際にお客様が使われる

ブランチ(枝)を切らないまま使うと、もらってきた場所に上書きすることになって、最新版が欲しいけど、製造もしてるんだがって時につらいよ。

f:id:musubimusubipurasu:20200525215514p:plain

3人がコードをあげます

上げるのは問題ない。

もらうときに、branchがないと…

f:id:musubimusubipurasu:20200525220303p:plain

自分の修正分ともらってきたデータが違うからconflictが起きちゃった

Bさんは、すぐに最新版のソースを受け取ることはできません。

競合を解決しないといけないからです。

それは、ソースを見ていけば分かるけど、いちいちそんなことしてるのめんどくさいよね。回避できるなら回避しときたいよね?branchつくっとこ?

製造しているコードと、最新版のコードのファイルが被っているときは、conflict(競合)が起きるので、製造を始める前は必ずブランチを切っておこう!

製造入るだいぶ前に切ると、また最新版とってくる必要があるので、製造直近で切ったがええでよ。

 

マージする

$ git merge <commit>

 

マージのイメージは、合体!

自分のブランチ内で開発する時は、これでおっけーです👌

大人数での開発の時は、マージリクエストを出すよ!

なんでかって?

出てきていきなり合体されたらびっくりするじゃん!

↑死ぬほど雑すぎて泣ける

要するに、他の人にコードが問題ないか見てもらうんですわ。

動かないコードがあったり、リファクタリングができてなかったりするものを本場環境には入れたくないからね!(メンテとか面倒だから)

ここで、他人がOKかNGかを出してくれるわけです。

 

ソースコードファイルをコミットする

$ git commit . 

 

コミットってのは、合体!ってイメージでいいと思います。

これは、自分が作ったものをブランチに合体させること。

ブランチを切らずにしちゃいけないやつだと思います。

conflictになる未来が見えてくる…。

開発にかかわっている人が多くなればなるほど大変だから、ブランチをちゃんと切ろうね…

 

gitに上げる

$ git  push .

 

はい。これでgitに上がります。

commitしたら、pushしましょうね。セットです。

イメージとしては、自分が作ったガ〇ダムを合体!させて、イケー!と出撃させているような感じ。

出撃するまでは、誰からも見えてない。ヒーローはカッコ悪いところ(コード)なんて見せないものだからね…。

はい、意味わからんことは置いといて、commitしたらpushする流れを覚えとこう

 

あとは、マージする必要があるんだけど、git labやgit hubを使ってるんなら、

マージリクエストのボタンを押して、あとはちょちょいのちょい。

詳しくはまたいつぞや上げるけど、すぐできる。

 

gitしか使わねぇって人には、git commit、git pushはいらないね。

 

まとめ

 

【gitオンリーで使う人】

①$ git pull(自分が持ってるコードが最新版なら①飛ばしてもいい)

②$ git branch(1人なら別に②飛ばしてもいい)

③$ git merge <commit>

 

【gitのオンライン上サービスを使う人】

①$ git pull

②$ git branch

③$ git commit . 

④$ git  push .

⑤マージリクエスト(git labまたはgit hubで)

 

楽したいならオンライン上サービスのgitlabやgithub使ったがええです。

更新履歴やらなんやらがすごくわかりやすい。視覚的に見えるってとても大事。

あと、gitのコマンド打つのがめんどくさいぜっていう人は、tortoisegitとか入れると便利だと思います。

tortoisegitを入れると、コマンドとか考えずに何でもできます↓

f:id:musubimusubipurasu:20200525222004p:plain

gitのコマンドいちいち調べるのめんどくさいわって人は、ぜひ使ってみて下さい。

まぁ大概のエンジニアは入れてるんだろうけど、知らない人もいるかもしれないからね。

 

今回は、ざつにコマンドをまとめました。

めちゃくちゃ使うのだけね。

ちょっと調べりゃわかることでも、実際説明してみるとわかってないこととかあるので、gitについてもやっぱり知っておいて損はないんだろうなぁ…と思いつつも、新しい技術のほうが調べるの楽しいよね。仕方ない。

 

需要ありそうなのは、puppeteerだと思うんだけど話すと長くなるし

環境構築だけでも少したいへんなので後からにします(クロミウムよりましだけど)。

 

長くなりましたが、今日は以上で。

ここまで読んでくれた方ありがとうございました。

3日すら継続できない坊主の日記 ~gitとgitlabってなんやねん編~ 

こんにちは。

1日1記事なんてほざいてたんですね、私。

いやぁ3日も続けることできてないやーん(゜∀。)

…とりあえずいきてはいましたので、更新いたします。。

 

今回はgitについて

gitゆうても本当に初心者なので、皆さんご存じかと思いますがね

自分の記録としても残していきますので、お付き合い下さいませm(_ _"m)

(説明のため、後輩A、先輩Bという人が出てきます!)

 

まずgitとは

プログラムのソースコードを管理するシステム

 

A:なるほど…?じゃあ、gitっていつ使うんですか?

B:開発する時に使うよ!

  1人で開発する時も、たくさんの人で開発する時も使えるよ

  例えば、ソースコード1、ソースコード2別々のコードがあったとする。

  自分が開発者なら、どっちが新しいものかわかるかい?

A:まぁ、わかるんじゃないですか?

B:そうだね、でもいつまでも覚えてられるわけじゃない。

  時間がたてば、下の人のように(どっちが新しい?)か迷ってしまう。

A:確かに。そんなこといちいち覚えながらやってられないですね。

f:id:musubimusubipurasu:20200524165351p:plain

↑どっちのソースコードが最新かわからなくなる人↑

B:そう、だから管理してもらうんだ。gitに。

A:なるほど。プロジェクトに参加する人が増えるほど管理は必要になるってことですね。

B:そゆこと!

 

gitはソースコードを管理するシステムになります。

また、gitをよりうまく活用するため、gitlabというものがあります。

 

次ページ:gitlabとは?

続きを読む

paiza trim 配列ってなんやねん編【】

 

突然ですが、配列って存知ですか?

 

最近私は配列にずっと悩んでおります。

 

配列とは、空の箱の中にえいやと入れていくイメージです。

私自身その感覚で考えています笑

 

以下の内容を取ってきた場合、

ご飯

パン

 

ご飯

 

 

$input = fgets(STDIN);    //↑の内容を取ってくるコード

while($input){     //$inputという変数の中になんか入っているとき繰り返す

   $array = trim($input); //$arrayという配列入れる箱に入れてください(trimの部分で改行等を省く)

}

print_r($array);               //配列を出力してください~~

 

とすると

[0][1][2][3]の箱の中に中身(ご飯、パン)を入れてくれるのですが、

if文を利用し、条件を絞ってご飯が何回出たかをカウントしようとするときは、

 

whileの部分下に、if文を書いてくのですが、これがわからん!!!!!!

 

なぜtrim(改行を省く)を先にいれなければいけないのか

わからなーい!!

 

先に省かないといけない理由がわからないので、ご教示いただきたいのです…

 

先はまだまだ長いですね、では…


while($input = fgets(STDIN)){
if($input=="勇者"){
$input=trim($input);
$array =$input;
}
}
echo count($array);