【JavaScript】意外と便利なショートカット演算(短絡演算)

はじめに

お仕事にてVue.jsのコードを見ていたら、

:class="[obj.is-active && 'is-active'"

というコードを見かけました。
最初はなんだこれ……となったのですが、調べてみたら意外と便利だったので紹介。
(ノルマがやばいともいう)

ショートカット演算(短絡演算)

JavaScriptにて、論理積/論理和(&&/||)演算子を利用するときに、「左辺だけ評価されて、右辺が評価されない」ことがあります。
&&を利用した場合、左辺がfalseと評価されると、その時点でfalseが返ってくるので、右辺が評価されません。
この演算のことをショートカット演算。もしくは、短絡演算と呼ぶみたいです。

コード例

const x = 0;

x === 0 && console.log('Hello');
// hello

x === 0 がtrueとなるので、右辺のconsole.log('hello')が評価されて、helloと出力されます。
うーむ、わかりづらい……

&&演算子の場合

&&演算子を利用した場合は、

• 左辺がfalseだったら、右辺は実行されない。
• 左辺がtrueだったら、右辺が実行される。

||演算子の場合

||演算子を利用した場合は、

• 左辺がtrueだったら、右辺は実行されない。
• 左辺がfalseだったら、右辺が実行される。

ES6仕様書での記述

ES6の仕様書ではここに書かれています。

http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

&&演算子、または||演算子によって生成された値は、必ずBoolean型になるわけではない。 生成される値は、常に２つのオペランド式のうちの1つになります。

Vue.jsで便利だった件

Vue.jsでオブジェクト構文を利用して、CSSのクラスをつけることがよくあります。
Vueのコンポーネントに渡したオブジェクトのフラグを利用して、CSSクラスのon/offを切り替えることがよくある(と思います)。

そんなときにこの構文が便利でした。
コード例はこれ(はじめにで書いたのと同じです。)

:class="[obj.is-active && 'is-active'"

一点、欠点として obj.is-active がfalseの際には、classにfalseという文字列が入ってしまうため、注意が必要です。
場合によっては、この後ろにも何かCSSクラスとなる文字列をいれていた場合は、falsehogehogeのように繋がってしまいます。
少々バッドノウハウな感じ……

おわりに

JavaScriptいろいろと他言語と違う仕様があるので、めちゃくちゃ難しいです。
もともとC#とか、Javaとか、コンパイル型の言語を書いていたので改めて体系的に勉強しようと下の本を買いました。
ES6の記法も覚えて良いコードを書けるようになりたい。
おわり。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

第11回ゆるはち.it【Web開発のテスト】に参加してきた

はじめに

先月に引き続き、ゆるはち.itという勉強会に参加してきました。
今回はソフトウェアテストについての勉強会です。

connpassページはこちら

yuruhachi-it.connpass.com

勉強会に参加したら、聴くだけでは頭から抜け落ちてしまうので、参加レポを書くという義務感。

どんな勉強会だったか

ソフトウェアテストについて、概論から実際のテストフレームワークを使っての実演まで幅広く学べる勉強会でした。

参加者は、意外にも(?)現在Webエンジニアではない人が多く、Windowsアプリケーションの開発をしていてC#を書いているという人が多かった、気がします(完全に主観)

駆け出し1か月目Webエンジニアでテストコードなんて全然書いたことがないという私ですが、
イントロダクションから入って、JavaScriptフレームワークを利用しての実例(実演付き)と順序立てて聞けたのでとてもためになりました。

勉強会後に二次会もありましたが、それについては割愛。

印象に残った点

以下勉強会で印象に残った点、学べた点などなどを列挙。

ソフトウェアテストへの意識が変わった

今回の勉強会に参加して良かったなと感じる一番の点がこれです。

今までソフトウェアテスト難しそう、理論はわかるけど具体的に何して良いかわからん、という意識でした。
それが発表を聞いたことによって苦手意識が減り、心理的不安が軽くなったので、人の話を聴くのっていいものだなと。

大事なのはコレ

Q. テストを書いてなにが嬉しいのか
A. バグが減少する。
安心感がある。
そして、 開発者の幸福！

テストコードは書かなければいけないのではなく、我々開発者のために書いているのだというその一点が勉強会のハイライトです。
また、テストは期間を経れば経るほど価値が高まっていくとのことなので、気を長くしてテストを書いていきたい。

そんな内容を学べたスライドがこちら

Wallaby.js

JestとWallaby.jsを利用したソフトウェアテストが紹介されてました。
実演付きで、お題はタイムリーな消費税増税に関するテスト。

Wallaby.jsがとても便利で、エディタにインラインでテスト結果が表示されるので、開発体験が一変するのではと。
テストコード書いて実行しているときって何して良いかよくわからないので、ストレスフリーになりそうですよね……

Wallaby.js 実行例¹

関連書籍とか参考サイト

wallabyjs.com

知識ゼロから学ぶソフトウェアテスト 【改訂版】

おわりに

ソフトウェアテストについて、苦手意識を変えてくれた勉強会でした。
Webエンジニアとして駆け出しの私にちょうど良く、今後に役立ちまくりそう。

次回は皆大好き「スプレッドシート」に関しての勉強会です。
どんな内容が発表されるのか、期待。

yuruhachi-it.connpass.com

---

1. https://wallabyjs.com/docs/index.html より↩

23, 24週目のふりかえり

先週書けなかったので2週間分まとめて……(とてもよくない傾向)

Qovo

ここ2週間Qovo基準での行動をまったくできていなかったので、無し。

なぜできていなかったのか

• 新しい職場で、新しい仕事をやるようになって何をすればいいかよくわからなくなっていた
• 新しく振ってもらった仕事の進捗が悪く、勉強というものへの意欲が減退していた
• 精神的にも、体力的にも、余裕がなくなってきていた
• 早く成果を出さなければ……という意識が強くなりすぎて、自分の身の丈にあった行動ができなかった

抽象的だけどこのあたり……
何か勉強しようと行動しても、めちゃくちゃ効率が悪かったりしたので、長い目で見ていったん落ち着いた生活をしようと思った。
ということで、来週はQovoなしで落ち着いた生活をしようと思う。

今週の健康情報

カロリー

前回のふりかえりブログでは棒グラフの画像を貼っていたけど、結局のところ1週間の合計消費kcalを知りたいだけということに気づいたので、数値だけ残す。

週目	消費kcal
23/52	15,034kcal
24/52	14,829kcal

前回の22週目の消費kcalが15,292kcalだったので若干減っている。
クロスバイクでの通勤は続けているけどそれ以外はできていなくて、徐々に運動量が減ってきている様子…… あまりよくないのでテコ入れをしたい。

ストレスレベル

23/52週目のストレスレベル

24/52週目のストレスレベル

軸が変わっているのでちょっと比較がしづらいかもしれない。
22週目と比べると、週末につれてストレスレベルがあがっていく様子はみられなくなったが平均的にストレスレベルが高い。
特に24週目は平均値がぐっとあがっている。
Qovoの部分で書いたようにあまり良い日々を過ごせていない実感があるから、1日1個ずつ良いことができるようにしていきたい。

今週のひとりごと

23, 24週はお仕事が全然うまく進まなくて、環境変化による疲労も溜まってしまって最後には体調を崩してしまった。
僕はできないことに対して妙にストレスを感じやすいらしく、異常に焦ってしまったり、他の物事が手につかなくなったりしてしまう。
具体的な対策とはいかないのだけど、焦らずに、身の丈にあったもので、1日1個ずつ良いことをするというようにしたいと思う。

改めて勉強とか、生活というのは長期的な目線を持たなければいけないというのを言葉としては理解しているが、実感が薄い。自分自身の生活に適用できていない。
というのを感じているので、もうちょっと長い目で行動をしていきたいなーと思う。

おわりに

焦りは禁物！

続けている学習活動について棚卸しをしてみた

はじめに

最近転職により環境に変化が起こったので、自分自身の学習活動についてふりかえり、もとい棚卸しをしてみました。
弱小ITエンジニアなので、参考になるかはわからないですが、まとめて記事にします。
(今週のブログネタに困ったということもある)

私が続けている学習活動6個

意識してやってる活動を棚卸ししてみたら6種類になりました。
かけている時間が長いものから順に書いてます。

仕事

なんだかんだ一番時間を費やして、一番学びが多いのは仕事。
ここは人類皆同じだと思います。

特別書くことがないのですが、1点だけ。 現職では、毎日1時間 自己研鑽タイム というものが設けられていて、仕事に関係ないことでも自由に時間を使うことができます。
自由なので、「今日は早めに帰って体を休める」という行動もOK。
1時間という設定が結構おもしろくて、割となんでもできます。
まだ具体的な成果を得られるほど経験できてないので、また別の機会にふりかえり記事を書きたい。

読書(紙書籍 + kindle)

読書は体系的に情報を得られます。
ネット記事で勉強するのも良いのですが、目的の情報を得るために時間がかかったり、情報が錯綜していて目が泳いでしまったりとふらふらしてしまいます……。
ということで私が一番学習の用途として利用するのは読書です。

紙書籍

基本的には紙の書籍で勉強用の本を手に入れます。
理由としては、

• 紙書籍の方が集中できる(これは個人差あるかも)
• 図や表を多用する本の場合、組版通りに表示されるから読みやすい
• 進捗具合がぱっと見でわかる

あたりが理由になります。
図表がみやすいっていうのが一番大きいですね。
電子書籍だと本によってデータへの変換形式が違って、文字ベースの検索ができなかったり、図表の表示位置がずれたりするので、取捨選択が難しいです。

最近だと 技術書典 が盛り上がっていて、そこで書籍を買って読むのも楽しいです。

techbookfest.org

電子書籍

図表が少ない本を買うときはこちらを利用します。
また、kindleだと結構頻繁にセールをやっていて、20%~50%OFFくらいの値段で本を買うことができます。
kindleのセールはそんなに露出が多くなく、気付かないことも多いので、こちらのtwitterをフォローしてセール情報を仕入れています。

twitter.com

(稀に漫画が無料で手に入ることもあるので、気付けるとかなりお得です。)

Podcast

次に多く利用しているのが podcast です。
podcast は、ネット上でアーカイブされている音声をエピソード単位で聞くことができるサービスのこと。
一般的なラジオと違って、専門的に別れたジャンルで自分が好きなものを選んで聞ける点が利点かなと。

以下、私がよく聞いているpodcastを列挙。
これ以外にもチェックしている番組はあるのですが、podcastを聞くのにはどうしても時間がかかるのであまり数を聞くことができないのが難点です……。

しがないラジオ

shiganai.org

毎回ITのお仕事に関わっているゲストを呼んで、生い立ちから、現在の仕事をするにあたった経歴などを詳しく聞ける番組です。
文字と違って、話すことによって伝えているので結構ぶっちゃけた話を聞けたりします。
転職に関する話題が多いので、その辺りに興味がある人は必見。

backspace.fm

backspace.fm

ほぼ(?)週一更新で最新の技術に関する情報を聞ける番組です。
ガジェットに関する話が結構多いので、カメラとか、スマートフォン端末とか、録音・録画機材とか、そういったものが好きな人にオススメ。

Rebuild.fm

rebuild.fm

こちらも週一更新でIT技術について情報を聴ける番組です。
とりあえずめちゃくちゃ音声が綺麗です。
シリコンバレーに関する話から、WWDCをはじめとしたイベントに関する話、映画の話と多岐に渡る話題が話されています。
どちらかというとソフトウェアに関連する話の方が多めでしょうか。

Automagic Podcast

https://automagic.fm/post/182728014830/commonstyle

automagic.fm

デザイナーさんの出演が多い点を特色と感じる番組です。
具体的な技術というよりはマインドに関する話の方が多い印象かなと。
Webデザインに関連する話を聴けるpodcastは他にみないので、貴重な話をいろいろと聞けます。

EM.FM

anchor.fm

エンジニアのマネジメントについて聴ける番組です。
マネジメントに関する話となるので、どうしても抽象的な内容になってしまうことが多い印象です。
しかし、実際にマネージャーという立場にある人からマクロな視点で話を聴けるのはとても貴重です。
マネジメントという領域に興味がある人にはオススメかと。

はてなブログ

週に一度、ブログに記事を投稿するという形式でアウトプットをするという活動を続けています。(このブログのこと)
アウトプットする過程でネタを用意しないといけないので自然と情報のインプットが増えます。
また、アウトプットのために文章を書くのが難しくて、文章を書く練習になったりします。

少し学習とは離れてしまいますが、目に見える形でアウトプットすることによって、転職等々に役立ったりするので、そういう意味でもオススメ(?)
あと自己承認欲求を満たすのに役立ったり

RSS(feedly + Pocket)

ニュースサイトの類のRSSを収集して暇な時間にチェックしてます。

Feedly というサービスでRSSを流し見て、 Pocket というサービスでリスト化してあとで読むという形をとってます。

feedly.com

app.getpocket.com

RSS登録してる一覧をぺたり

名前	RSS
@IT 全フォーラム 最新記事一覧	RSS
GIGAZINE	RSS
ITmedia TOP STORIES	RSS
Gizmode Japan	RSS
はてなブックマーク - 人気エントリー - テクノロジー	RSS
ライフハッカー［日本版］	RSS

技術系の記事で人気の出た記事は、結構はてなブックマークのRSSを見ているだけで網羅できたりするのでそんなに数多くRSS登録してないです。
この6つでも1週間で1000件以上溜まってしまうので、結構頑張って棚卸ししないと見切ることはできないです。
今は棚卸しするために頑張るのはちょっと違うかな……と気が向いた時にさらっと見る程度に。

TwitterやSlackなどのコミュニティ

最後に、結局は人との繋がりだというコミュニティ。

Twitter

ITエンジニアはTwitterをやっている人が多いイメージで、技術スタックが被ってる人とかフォローしておくといろいろと情報が得られたりして便利です。
(自分の興味あることが雑談できるから楽しいというのがたぶん本音)

Slack

Slack上でコミュニティのワークスペースをつくられていることが多く、今では3つほど参加してます。
コミュニティに参加していると、人との縁が増えたり、勉強会の情報が流れてきたり。
また、わからないことを聞いたら他のエンジニアが具体的に答えてくれたりと、自分一人では得られない情報が得られたりするので良いです。

勉強会

勉強会で思い出しましたが、勉強会の情報を得るためにTwitterアカウントをいくつかフォローしているのでそれも列挙。

twitter.com

twitter.com

おわりに

弱小ITエンジニアの学習環境についてまとめてみました。
意外と棚卸ししてみたら大変でした。ふりかえり大事。
かけている時間比率としては、

仕事 :  読書 : podcast : ブログ : RSS : コミュニティ
10 : 4 : 2 : 2 : 1 : 2

くらいの割合になるのかなーと。
もう少し自ら手を動かして成果物をつくれるようにしていきたいというのがここ最近の思いです。

ITエンジニアとしてレベルアップするにはどうしたらいいのか？ という点に興味があるので、
もしよかったら皆さんのやっている学習活動とか、効率良い勉強方法とかそのあたりのことを教えてください。

2019年23/52週目のふりかえり

今週のQovo

23/52週目のQovo

34pt中10pt消化して、消化率は29.4%

全然消化できませんでした。
先週28pt消化の71.4%だったので、比べるとかなり悪い……

消化できなかった原因は、

• 今週から新しい職場で働き始めたので、余裕がなかった

この1つに尽きてしまう感じが……
お仕事しながらのペースを見つけていきたい。

来週のQovo

24/52週目のQovo

先週の様子をみて、ペースを落とした方が良さそうなので、種類と量を絞って24pt。
webフロントの勉強を進めていきたいので、Vue.jsのチュートリアルをとりあえずやる。

今週の健康情報

Garmin Vivoactive3を利用してログをとってるので、これもふりかえりに入れていきたいと思う。
土日つけてなかったから、トラッキングされてないけどご了承。

GARMIN(ガーミン) スマートウォッチ 時計 GPS アクティブトラッカー 活動量計 vivoactive3 Black Slate【日本正規品】176971 最大7日間連続稼働

カロリー消費

23/52週目のカロリー消費

通勤時にクロスバイクを利用して、通勤しているのでその分ちょっとだけカロリー消費が増えている。
グラフの赤い部分が運動による消費のはず……
片道4kmくらいで、電車通勤の日と比べると250kcalくらい増えている。 続けていけば効果出ると信じたい。

ストレスレベル

23/52週目のストレスレベル

ちょっとどういう計算でだしてるのか謎だが、Garminの時計でストレスレベルが見れる。
週の後半に進むにつれてどんどんストレスレベルが上がっていく……おもしろい……
当たり前といえば当たり前だが、疲労が溜まっていく様子が見えるから、週の途中でなんか疲労を抜くことをしたりしたいなーと。

今週のひとりごと

今週から新しい職場にてwebエンジニアとなった。
転職エントリーみたいなものはそのうち書きたい。
1週目ということで、慣れることにほとんどのリソースを割いてしまった感じがする。
一応仕事としては2つほどPRを出して終わった。もっと……成果出せるようにしたい……

いろいろ勉強進めて、自分自身のブログをLaravel + Vue.jsという環境で作ってみようかなと思っている。
似たようなことやってる人いたら、ぜひ教えてください。

おわりに

来週はもっと自分で勉強していきたい。
がんばるぞい。

【Laravel】tinxを使ってデバッグを手速く行う

はじめに

Laravelで開発をしている際に、メソッドのテストを行いたくなりました。
そんなときにRubyでいうirbのようなものがあったら良いなと思って呟いたところtinxを紹介してもらいました。

とても便利なツールで、DBのレコード確認や、デバッグが手速く行えます。
私がまだLaravelでの開発に慣れてないからというのもあるのですが、try & errorを細かく繰り返さないとコーディングができないので、こういったツールは本当にありがたい……

Tinx実行サンプル

Tinx

github.com

Tinxとは

Tinkerのラッパーのようなツールです。
Tinkerの機能に加えて、

• セッションのリロード
• first(), where()などのメソッド
• モデルに対してのalias

と機能がついてます。

Tinxのインストール

dockerでworkspaceコンテナに入って、composerでインストールできます。

~# composer require --dev ajthinking/tinx

Tinxの使い方

同じくdockerでworkspaceコンテナに入って、以下のコマンドを実行することでTinxを起動できます。

~# php artisan tinx

起動すると、下記のように接続しているDBのテーブルが表示されます。

+-------------+--------------+
| Class       | Shortcuts    |
+-------------+--------------+
| App\Article | $a, $a_, a() |
| App\Blog    | $b, $b_, b() |
| App\Comment | $c, $c_, c() |
| App\Like    | $l, $l_, l() |
| App\User    | $u, $u_, u() |
+-------------+--------------+

レコードの確認

例えば、上記のようなDBのときにArticleモデルのレコードが欲しい時はこんな感じ。
レコードが見やすく表示されるので便利です。

>>> App\Article::first()
=> App\Article {#3067
     id: 1,
     title: "hogehoge",
     content: "hogefugapiyopiyo~~",
     created_at: "2019-06-06 23:39:33",
     updated_at: "2019-06-06 23:39:33",
     is_draft: 0,
     blog_id: 1,
   }
>>>

メソッドの確認

Blogモデルに対して、こんなscopeを生やしているのですが、

class Blog extends Model
{
    ~省略~

    public function scopeUrlEqual($query, $str)
    {
        return $query->where('url', $str);
    }
}

tinx上で実行して実行結果を見ることができます。
開発している上でterminal上で確認できるのが本当に便利……

>>> App\Blog::UrlEqual('fugafuga')->get()
=> Illuminate\Database\Eloquent\Collection {#3066
     all: [
       App\Blog {#3064
         id: 1,
         title: "hogehoge",
         url: "fugafuga",
         created_at: "2019-06-06 23:39:05",
         updated_at: "2019-06-06 23:39:05",
         user_id: 1,
       },
     ],
   }

Tinxの便利なところ

モデルに対してaliasが張られる

+-------------+--------------+
| Class       | Shortcuts    |
+-------------+--------------+
| App\Article | $a, $a_, a() |
| App\Blog    | $b, $b_, b() |
| App\Comment | $c, $c_, c() |
| App\Like    | $l, $l_, l() |
| App\User    | $u, $u_, u() |
+-------------+--------------+

上記の図にある通り、Articleモデルに対しては $a のように、自動的にaliasを張ってくれます。
モデルの頭文字をとってaliasを張ってくれるようです。

実行結果はこんな感じ

>>> $u->first()
=> App\User {#3037
     id: 1,
     name: "hogehoge",
     email: "hogehoge@test.com",
     email_verified_at: null,
     created_at: "2019-06-06 23:38:47",
     updated_at: "2019-06-06 23:38:47",
     avatar: "default_avatar.png",
   }

起動したままセッションを更新できる

Tinx(もといTinker)を起動しているときにコードを変更しても、反映されず起動し直さないといけないです。
しかしTinxでは re() と更新コマンドを実行することでセッションを更新することができます。
reo() というコマンドを実行しておくと、コードの変更に伴って、自動的にセッション更新が行われるようです。

実行結果はこんな感じ

>>> re()
Reloading your tinker session...
Psy Shell v0.9.9 (PHP 7.2.17-1+ubuntu16.04.1+deb.sury.org+3 — cli) by Justin Hileman
+-------------+--------------+
| Class       | Shortcuts    |
+-------------+--------------+
| App\Article | $a, $a_, a() |
| App\Blog    | $b, $b_, b() |
| App\Comment | $c, $c_, c() |
| App\Like    | $l, $l_, l() |
| App\User    | $u, $u_, u() |
+-------------+--------------+

おわりに

Tinkerでも同じことができますが、その上で便利な機能が存在するTinxの紹介記事を書いてみました。
開発でのtry & errorのイテレーションが本当に速くなるので、必須ツールだと感じています。

私事ですが、テストを全然書いたことがなかったので、テストを書くときにめちゃくちゃ便利に感じました……。
web開発のいろはを脳に叩き込んでくれる人募集中です。

2019年22/52週のふりかえり

id:kidani_a さんのブログを真似させていただいて、自分もふりかえりを行うようにしました。

kdnakt.hatenablog.com

今週のQovo

22/52週目のQovo

36pt中28pt消化して、消化率は71.4%

実際に手を動かして、コーディングしようと思っていた内容ができなかった。
できなかった理由としては、

• 来週から新天地でおしごとをするから、おやすみしまくってた
• 別の機能を触ってみたいとモチベーションが変化していた

あたり。

来週のQovo

23/52週目のQovo

とりあえずこんな内容で32ptの予定。
新天地でおしごとをするということで、状況が読みづらいという懸念点有り……

webGLにちょっとした興味が湧いたので、やってみようかなーと思ってる。

モダンなwebGL環境が何かとかまったく知らないから、詳しい方いたら教えてください。

今週のひとりごと

今週は胃腸の調子がずっと悪くて苦しんでいた。
とりあえず改善できたら良いなとビオフェルミン錠剤を毎食後飲むようにしていて、多少……よくなったか……？

本格的に運動不足を感じたので、運動を目標立ててやろうと思い、ランニングを久々にしてみた。
骨伝導イヤホンを利用して、podcastを聴きながら川沿いを走ってみたら結構良い気分で走れたので、続けられそうな予感。
カナル型イヤホンと違って、外の音を聴きながら活動できるから、ランニングのようなシーンだと危険が減る。
家事とかするときにもよく使っているけど、水道を強めに出していたりしても骨伝導のおかげでしっかり聞き取れるからおすすめ。

【正規輸入品】AfterShokz AIR 骨伝導ワイヤレスヘッドホン ミッドナイトブルー 30g AFT-EP-000007

おわりに

今日(6/3)から新天地でおしごとをします。
新たにwebエンジニアとしておしごとをするので、とにかくいろいろ勉強して、いち早く成果を出せるようにしたい所存。

ふりかえり投稿初回で、どんなこと書くべきかまだまとまってないから、内容が薄め。
これから良い習慣をどんどん増やしていきたいので、そのあたり書けるようになっていけたらいいなと。