UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

全く技術がわからない人にプログラミングを説明してみた

おはこんばんちは!! 尾藤 a.k.a. BTO です

この記事は、UUUM Advent Calendar 2018 12日目の記事です。 (だけど遅れて13日目に公開しました。ごめんなさいごめんなさい)

UUUMでは新入社員に会社の事業を理解してもらうために、各ユニット長が自分たちが何をやっているのか新入社員に説明する事業説明会というのがあります。 そこでシステムユニットの説明をするのですが、1時間という限られた時間の中で技術のわからない人たちに僕ら開発部隊がやっていることを理解してもらうのには無理があります。そうすると結局開発しているツールの説明になってしまうのですが、会社の状況がよくわかってない新入社員にいきなりツールの説明しても理解できませんし、自分の職種に関係のないツールの説明を聞いてもわかりません。で、結局何もわからずに終わってしまいます。

せっかく新入社員の人に時間をとってもらっている貴重な機会なので有意義なものにしたいです。どうせツールの説明は業務を進めれば自ずと理解が進むんだし、事業説明会でもやらなくても大丈夫です。システムユニットは周りから何の仕事をしているのかわからないとよく言われます。じゃあ、技術のわからない人たちに少しでも僕らシステムユニットがどういう仕事をしているのかを理解してもらう試みをしてみようと考えました。僕らがやっているのはプログラミングです。なので技術がわからない人たちにプログラミングはどういうものなのか、なんとなく理解できるように説明してみました。

プレゼン資料

こちらがプレゼン資料です。ドドーン!!! プログラミングの説明のところだけ抜粋してます。

いくつかのポイントを説明していきます。

ゴール設定

ゴールは

  • プログラムを分かった気になる
  • システムユニットの仕事を分かった気になる

の2つです。プログラムを書くのがなんで大変なのか、なんでそんなに時間がかかるのか、といったことがなんとなくわかってもらえるようになることを目指します。

プログラミングに一番必要な科目は?

英国数理社の5教科のうち、プログラミングに一番必要なのはどの教科か? 僕はこれは 国語 だと思います(異論は認める)。

この質問をするとプログラム書いたことない人からの一番多い回答は 数学 です。知らない人からすると、プログラマはさぞかし難しそうな計算式を扱っているように思われているんでしょうね。でも実際にプログラムを書く時に使うのはせいぜい四則演算ぐらいです。もちろんそういった分野もありますが、僕らが開発しているようなアプリケーションはライブラリを使うことがほとんどなので、自分たちで難しい数式を扱うことはほとんどありません。

次に多い回答は 英語 です。でもプログラムを書くのにレベルの高い英語は必要ないですよね。せいぜいいくつかの英単語を扱うぐらいです。英語の文書を読むというのもありますが、なくてもなんとかなります。

この質問で回答が 国語 だというと、かなり意外な顔をされます。これで外から見たプログラミングのイメージもだいぶ変わるのではないかなと思っています。

コンピュータを小人に例える

コンピュータがよくわからない鉄の塊なので、もっと身近な存在として小人に例えます(小人が身近じゃないというツッコミは置いといて)。 小人は次のような特徴を持ってます。

  • 真面目
  • 作業が正確・高速
  • 24時間365日休み無し
  • 賃金が安い
  • いきなり死ぬ
  • 言われたことしかできない
  • 言われた通りにしかできない

だいたいコンピュータの特徴とあってるのではないでしょうか。

こういう特徴を持った小人さんにちゃんと働いてもらうためにはしっかりとしたマニュアルが必要です。マニュアルを書くには時間もかかるし、正確に記述するには国語力が必要です。逆にしっかりとしたマニュアルを書くことができれば、小人さんにいっぱい働いてもらってその恩恵を受けることができます。プログラミングはマニュアルを書くのに似ています。だから一見簡単そうに見えることでも書くのに時間がかかるのです。

実際に小人用のマニュアルを書いてみます

例として小人に水を飲んでもらうというタスクを設定しました。人間なら一言で済むことが、小人さんにやってもらうと随分面倒なマニュアルを書く必要があります。彼らは融通がきかず言われたことしかできないので当然ですね。これでなんとなく面倒臭さがわかるのではないかなと思います。

アンケート結果

気になるアンケート結果はこちら

満足度

満足度
満足度

理解度

理解度
理解度

ということで満足度も理解度もかなり高い結果になりました。一安心です。

結論

2018年 YouTube 国内トップトレンドに選ばれた動画は全て UUUM クリエイターによる動画でした!!!!

https://www.buzzfeed.com/jp/yuikashima/youtube-top2018www.buzzfeed.com


www.wantedly.com

タグ付きテンプレートリテラル <JavaScript の「なんだこれ・・・」その1>

前置き

序文

  • JavaScript の「なんだこれ・・・」シリーズの第一弾は、「タグ付きテンプレートリテラル (Tagged Template Literal)」です。

仕様

  • ES6 で追加された仕様に、テンプレートリテラル (Template Literal) があります。他の言語ではよく見られる機能です。この機能を使えば、変数の値を文字列中に埋め込みたい時に文字列連結演算することなくスマートにコード化できます。

  • 色々な言語のテンプレートリテラルを見てみましょう。自分が業務で扱ったことのある言語の例を挙げてみました。

# Ruby

love = '最愛の'
"#{love}嫁さん (^-^)"    # '最愛の嫁さん (^-^)'
// PHP

$love = '最愛の';
"{$love}嫁さん (^-^)"    // '最愛の嫁さん (^-^)'
# Python

love = "最愛の"
f"{love}嫁さん (^-^)"    # "最愛の嫁さん (^-^)"
// Kotlin

val love = "最愛の"
"${love}嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
// Swift

let love = "最愛の"
"\(love)嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
// Java

// テンプレートリテラルは存在しない   // "それでも最愛の嫁さん (^-^)"
  • Java にはテンプレートリテラルはありませんが、嫁さんへの愛は変わりませんでした。

  • 多言語を扱っていると、別プロジェクトの作業に移った際にちょっとした書式の違いにいつも悩まされます。コンパイラの構文解釈的な都合なのかなと考えてますが、一度その意図をコンパイラの作者に訪ねてみたいです。

JavaScript のテンプレートリテラル

  • それでは、ES6 で追加された JavaScript 版をみてみましょう。
// JavaScript

const love = "最愛の";
"${love}嫁さん (^-^)"    // "最愛の嫁さん (^-^)"
  • 方向性は Kotlin と同じようですね。嫁さんへの愛も同じです。

タグ付きテンプレートリテラル

  • 何かで調べ物をしている時に、「タグ付きテンプレートリテラル (Tagged Template Literal)」と出会いました。初めてコードを見た時、「( ) が抜けてるんじゃないの?」と、しばらくフリーズしたのを覚えてます。
// タグ関数を定義
function scaleTag(hashes, ...values) {
  return values
    .map((value, index) => hashes[index] + emphasize(value))
    .concat(hashes.slice(values.length))
    .join("")
  ;

  function emphasize(word) {
    if (!word) {
      return "";
    }

    return `<strong>${word}</strong>`;
  }
}

const love = "最愛の";

/*
 * 以下が「タグ付きテンプレートリテラル」の書式です。
 */
scaleTag `${love}嫁さん (^-^)`;
    // "<strong>最愛の</strong>嫁さん (^-^)"
  • 上のコード中で「scaleTag」がタグと呼ばれる箇所です。この書式を初めて見た時、まるで「ずっと昔の恋人の経年後の今を SNS で偶然見かけたような気分」で見つめていました。

  • タグとテンプレートリテラルの間に半角スペースを入れていますが、なくても動作するようです。

解説

  • テンプレートリテラルにタグを付与すると、変数を展開する際にその値を加工するための hook 処理ができるという仕様。使い所は難しいですが、以下の用途はいかがでしょう。
// 整数をカンマ区切りで表示するタグ
function commalizeTag(hashes, ...values) {
  return values
    .map((value, index) => hashes[index] + commalize(value))
    .concat(hashes.slice(values.length))
    .join("")
  ;

  function commalize(number) {
    return number
      .toString()
      .replace(/(?!^)(?=(?:\d{3})+$)/g, ",")
    ;
  }
}

const price = 2500;

commalizeTag `価格:${price}円`;    // "価格:2,500円"
  • 「price を commalize() で変換してから表示させる」という方法だと、文字列中に commalize(price) と記載することになりますが、その辺りのノイズが外出しされるので、文字列がどういう結果になるかを想定しやすくなるメリットはありそうです。
// どちらが良いか?
commalizeTag `価格:${price}円`;
`価格:${commalize(price)}円`;
  • 変数展開がひとつだけなら大差ないですが、例えば Excel のように金額がずらりと並ぶような表を Web ページで表示させる場合はどうでしょう。commalize() が価格表示の個数分だけ書くのに比べれば、テンプレートの直前に一回だけ記載する方法はスマートに感じます。

  • 他にもっと良さそうなサンプルを閃いた時は、随時追加していきます。

まとめ

  • JavaScript のコードに違和感を覚えてそこで立ち止まるのは、バグを探す目が自動的に反応しているのだと考えてます。超初心者の頃は、構文を知らずによく立ち止まっては「ああ、こんな構文があるのか!」と、感動して覚えたものでした。しかしながら、JavaScript で立ち止まってそれが新しい構文だったという感覚は、久しく体験していませんでした。

  • 街でふと昔の恋人を見かけて。見たことのなかった笑顔で歩いている様子に「ああ、今は幸せなんだね」と感じたような、そんな「なんだこれ・・・」でした。

  • UUUM では、技術にこだわりのあるエンジニアを募集しています!! 詳しくは以下のリンクをご覧下さい。

www.wantedly.com

www.wantedly.com

Electron で付箋紙ウィジェットを作る

この記事は、UUUM Advent Calendar 2018 6日目です。


エンジニアをしているナカハシ(@k_nakahashi)です。

付箋紙アプリ、自分に合ったものを使いたい(ので作りたい)

私は作業用のPCでは、デスクトップ上に付箋紙アプリを浮かべていることが多いです。ウィンドウっぽいものを起動せずに、とりあえずテキストを打てる領域があるって気軽でいいんですよね。

Macで仕事するようになってからは、デフォルトでインストールされているスティッキーズという付箋アプリを使っていました。

続きを読む

CSSでHIKAKINをかきました

こんにちは!エンジニア(仮)のめる(@c5meru)です。
こちらの記事は、UUUM Advent Calendar 2018 5日目の記事です!

最近「フロントエンドの方ですよね?」とお声がけいただくことが多いのですが、実は、UUUMに入社してからはバックエンドの業務をメインに開発しております😅
これまでの会社では、HTML/CSSコーディングを中心としたフロントエンドの実装が中心だったので、

「そういえば、最近CSS書いてないなあ...」

と思いまして、兼ねてからやってみたかったCSSお絵かきをやってみました!いえい!🎉パフパフ🎺

続きを読む

オフショア先と社内システム開発をエンジョイした話

この記事は、Engineering Manager vol.2 Advent Calendar 2018 4日目向けに書きました。

弊社では、UUUM Advent Calendar 2018 も公開していますので、こちらもどうぞよろしくお願いします!


開発兼マネジメントを担当しているナカハシ(@k_nakahashi)です。

先日まで半年間、ベトナムのオフショア先と一緒に社内システムの開発を行いました。

個人的にオフショア先との共同作業は初体験でどうなることかと思っていましたが、とりあえず形にはなったのではないかと思います。

やってみて初めてわかったことが多かったですし、そのとき試した進め方や感じたことなどを書いておこうと思います。

続きを読む

デザインブログ「UUUM DESIGN」をnoteではじめます。

はじめまして。デザイナー インターンのよーたです。

UUUMでは「鈴木くん」「鈴木さん」と呼ばれることが多いのですが、同じ名字が多いので、名前呼びを浸透させていきたいと勝手に思っているこの頃です(笑)

さて、本題ですが、この度、UUUMのデザインに関するあんなことやこんなことを発信する場がほしいなと思い、エンジニアブログとは別に、デザインに関する記事投稿が盛んに行われているnoteに公式ブログ「UUUM DESIGN」を開設しました 🎉

note.mu

最初は、同じユニットに所属するデザイナーで小さくスタートしていく予定でございます。

始まったばかりの「UUUM DESIGN」を暖かく見守っていただけると嬉しいです。noteのフォローもぜひよろしくお願い致します🙇‍♂️

www.wantedly.com