秋葉原のメイドがプログラミングに挑む!シャッツキステのエンジニア登竜門

多くのIT企業が集まる賑やかな街。六本木。その街中に、珍しいバーがあります。その名は、「Hackers Bar」。おしゃれなカクテルを嗜みながら、現役ハッカーによるライブコーディングの様子を楽しめる店です。

同店の重厚な扉を開け、優雅にあらわれたのはこちらのお二人。秋葉原にあるカルチャーメイドカフェ「私設図書館 シャッツキステ」のメイドであるミソノさん(写真左)とノバラさん(写真右)。

「えっ! IT系のWebメディアなのに、どうして秋葉原のメイドさんが登場しているの!?」とびっくりした読者の方もいるかもしれません。でもご安心ください。決して出演するメディアを間違えたわけではありません(笑)。

本企画では、ITのスキルがほとんどないお二人に、さまざまな“プログラミングが体験できる施設”に足を運んでもらい、その楽しさや知識を学んでもらいます。

連載の初回は、Hackers Barの現役ハッカーがプログラミングの基本をレクチャー。果たして、ミソノさんとノバラさんは“エンジニア登竜門”を超えることができるのでしょうか!?

<今回の登場人物>

icon

浜辺将太さん
Hackers Barに務めるハッカー。今回の企画を快諾してくださった、心優しいエンジニア。柿の種が大好物で、Amazonで箱買いした大量のストックをお店に常備している。「たぶん僕が、六本木で1番柿の種を食べている人」とは本人の談。

icon

ミソノさん
「私設図書館 シャッツキステ」の司書メイド。街の図書館で司書をしつつ、シャッツキステにてメイドとしてお給仕中。面倒見がよく、子どもたちに絵本を読み聞かせるのが得意。

icon

ノバラさん
「私設図書館 シャッツキステ」のメイド。お肉が大好物らしく、プログラミングができるようになったら「お肉が焼ける映像をパソコンの画面上に延々と流せるシステムを作りたい」とのこと。

そもそも「プログラミング」って何?

image1

突如、プログラミングを学ぶことになったミソノさんとノバラさん。「メイドさんとプログラミング」ってずいぶん遠い存在のような気もしますが、いったい彼女たちはどれくらいのIT知識を持っているのでしょうか?

icon

浜辺:まず、このバーの名前に入っている「ハッカー」に、どんなイメージを持っていますか?

icon

ミソノ:誰にも知られないように、こっそりパソコンのデータを盗み取る人でしょうか?

ある日の夜、偉い人から「佐藤くん。ちょっとこの会社からデータを引き抜いておいて。よろしく頼むよ(悪そうな声)」ってコッソリ言われて、誰にも知られていない機密情報を調べて報告する、みたいな。

icon

浜辺:(なぜ、ハッカー=佐藤さんなんだろう……)

icon

ノバラ:私は、機密情報やデータを抜きとるために、ターゲットのパソコンをハッキングして、そのコンピュータにウイルスを送るのがハッカーだと思っていました。ちょっと危ないイメージです(笑)。

icon

浜辺:なるほど。確かにそういう要素もありますが、本来はハッカーって「主にプログラムを用いて、難しい課題や問題を簡単に解決したり、高い技術力や知識で思い描くことを実現する人々」の事を指します。

image2

もしかしたら、2人はプログラミングに対して「自分の生活から遠い存在」のように感じているかもしれません。でも実は、ミソノさんとノバラさんの身近なものにもたくさん使われているんです。日常生活のなかでプログラミングが使われているものってなんだと思いますか?

icon

ノバラ:ゲームアプリとか、Webサイトとかですかね? あとは街中にあるもので言うと、信号機とかモノレールの自動運転とかもそうでしょうか。

icon

浜辺:いいですね! そのとおり、すべてプログラミングが使われています。ちょっと話は変わりますが、お二人はメイド喫茶で働いていて、何か悩みはありますか?

icon

ミソノ:あります! 館内でクッキーを作るときに(※)、バターを常温に戻すため使用する1時間前に冷蔵庫から取り出さなければいけないのですが、毎回つい忘れてしまって。カチカチの状態になってしまうことがあります。

icon

ノバラ:私は、館内にある本の管理(※)ですね。館内に本がたくさんあるので、どこにどの本があるのか、わからなくなっちゃうんですよね。

※…シャッツキステでは、館内でクッキーやスコーンなどのお菓子を手作りしている。また、「私設図書館」というフレーズが示すとおり、バリエーション豊かな書籍の数々が置かれている。

icon

浜辺:お二人の悩み、どちらもプログラミングを覚えたら解決できますよ。

icon icon

ミソノ&ノバラ:えっ、本当ですか!?

icon

浜辺:例えばミソノさんの悩みは、小さな冷蔵庫を買ってきてその中にバターを入れておき、ある時間になると電源スイッチがOFFになるプログラミングを組めばいいんです。

ノバラさんの悩みは、本にICタグを貼って管理するのが一般的です。でもそれだと導入にコストがかかるので、最近の技術を使えばスマホでぐるっと背表紙を映しながら回るだけで、本の位置を管理できるアプリが作れるかもしれません。

icon icon

ミソノ&ノバラ:なるほど! プログラミングを覚えれば、日常生活の悩みを解決できるんですね!

プログラミングのソースコードを見てみよう!

icon

浜辺:お二人はソースコード(プログラミング言語で書かれた、ソフトウェアの動作を定義したもの)って見たことありますか?

image3
icon

ノバラ:いえ、ないです……。

icon

浜辺:では実際に見てみましょうか。ちょっと作ってみますね。

ダカダカダカ! ダカダカダカダカ! ダカ! ダカダカダカダカダカ!

(すさまじい勢いでキーボードを叩く)

icon

ノバラ:も、ものすごい速さ……! 

icon

ミソノ:すごい……。

ダカダカダカ! ッターーーン!!

icon

浜辺:はい、完成しました!

image4

▲画面内に、まるで雪が降るようなアニメーションが流れた。

icon icon

ミソノ&ノバラ:えっすごい! 雪みたいでかわいい。

icon

浜辺:HTMLとJavaScript、CSSというプログラミング言語を組み合わせて、画面に雪を降らせました。

image5

これが、雪を降らせる処理をするJavaScriptのソースコードです。

image6

この「mksnow」(make snow)というのが、雪を降らせるためのfunction(※)です。このfunction名は適当に自分がつけた名前なので、何でもいいんですよ。

※function…いくつかの処理をひとまとめに定義し、必要に応じて呼び出せるようにする機能のこと。

icon

ミソノ:自分さえ分かれば、「a」とか「b」でもいいんですか?

icon

浜辺:そういう名前をつけることもできます。でも、後で見直したときに、どんな処理だったか自分でもわからなくなっちゃうので、あまり良くないですね。この名前を見たときに「だいたいどんな処理をしているのかが一目でわかる」のが、良い名付け方です。

icon

ミソノ:でも、絶対に変えちゃいけない部分もあるわけですよね?

icon

浜辺:そうですね。例えばアニメーションを動かす「animate」や、位置を設定する「style.left」とか「style.top」っていうのは、JavaScriptという言語がもともと持っている機能なので、その名前でないと呼び出せません。

「style.left」「style.top」では、X座標とY座標を指定することで画面幅や高さを決めています。そのなかでランダムに雪が出るようにしているのが……(詳細な解説が続く)。

image7
icon

ノバラ:プログラミングって、いろんな要素が入ってるんですね。英単語とか、数字とか……。

icon

ミソノ:その上、デザインセンスも必要なのかなって思います。自分が何を表現したいのか、相手が求めているものをどう形にしていくのか考えを巡らせるのって、芸術のようだなぁとも思いました。

最初はただ文字がバーッて並んでいる風景にしか見えなかったけれど、こうして単語1つひとつを分解してみると、それぞれ意味が含まれているんですね。面白い!

AIが発達すれば、ドジっ子メイドロボが実現する!?

icon

浜辺:近年、新たなテクノロジーが登場しているので、そのお話もしましょう。お二人は、「ディープラーニング(深層学習)」ってご存知ですか?

icon

ノバラ:でぃーぷらーにんぐ? 

icon

浜辺:機械学習の新しい手法のひとつです。

難しいお話は割愛しますが、ディープラーニングとは「コンピュータに膨大なデータをインプットしてやることで、コンピュータが“自分自身で”ルールや規則性を見つけ出し賢くなっていく」手法のことです。

たとえば写真に映った「犬」と「猫」の違いを言葉で説明するのって意外と難しいですよね?このように人間がうまくルール化して「プログラミング」に落とし込めないことでも、コンピュータが勝手に規則性を見つけ出して判断できるようになります。

image8
icon

ミソノ:色んな情報を学ぶにつれて、コンピュータが少しずつ賢くなっていくんですね……! じゃあ例えば、AI(人工知能)のメイドロボができたとしたら、最初はミスばかりしていたドジっ子が、数年後には1人前のメイドに成長する、なんてことも実現するかも!

icon

浜辺:なるほど(笑)。もしかしたら、そんな未来も実現するかもしれませんよ。

icon

ミソノ:でも、それだけテクノロジーが進化していくと、いずれ人間の仕事ってみんなコンピュータに奪われてしまうんじゃないですか?

icon

浜辺:良い質問ですね。確かに、テクノロジーが進化していくにつれて、徐々に人間の仕事は代替されていくでしょう。

でも、代替されにくいものはあります。「人間だからこそできる」仕事です。例えば、メイドやバーテンダーなどのサービス業はそう。どんなにテクノロジーが進歩しても、やっぱり人間に接客してもらえた方が嬉しいじゃないですか。

icon

ミソノ:接客の話が出ましたけど、ちなみに浜辺さんはどうしてHackers Barのカウンターに立つようになったんですか?

image9
icon

浜辺:ここには、いろんな職種・業種の人々が集まります。プログラマーだけでなく、プログラミングに興味がない人も気軽に足を運んでくれるんです。その人々との出会いや、誰かが困っていることの解決策をテクノロジーを使って教えてあげられる。それが、今とても楽しいんですよ。

icon icon

ミソノ&ノバラ:良い話だ……。

【結論】アップルパイとプログラミングは似ている!?

image10
icon

浜辺:今回はこれで以上となります。プログラミングについて、どんな印象を持ちましたか?

icon

ノバラ:最初は、エンジニアってコンピュータを相手にする無機質な仕事なのかな、という印象がありました。

でも、コードを書くときに、どんな表現がしたいのか、ユーザーは何を求めているのか、などさまざまなことを考えているんだとわかって。実は、とても人間らしい仕事なんだと気づきました。

icon

ミソノ:プログラミングで何かを作る感覚って、“アップルパイ”を作ることと似ているかもしれません。

アップルパイって

・ パイのなかに入れるりんごを煮詰める
・ パイ生地を作る
・ 最後の仕上げに卵黄を表面に塗って、オーブンに入れる

など、さまざまな作業に分解できるのですが、プログラミングも同じですね。

初めてソースコードを見たときは何が書いてあるのかわからなかったけれど、要素を細かく分解してみてみると「アニメーションさせる」「色を変える」「スピードを変える」などさまざまなパーツで構成されているんだなぁって思いました。

プログラミングの基本から、ソースコードの内容、AIの発展まで、さまざまなレクチャーを受けたミソノさんとノバラさん。最初は右も左もわからなかった2人ですが、浜辺さんのお話を受けてエンジニアのお仕事や、プログラミングへの理解がぐっと深まったようです。

とはいえ、エンジニア登竜門への挑戦は道半ば。これから、どんな関門が待ち受けているのでしょうか。ともに見守っていきましょう。次回のミソノさんとノバラさんのチャレンジに、乞うご期待です!

~ to be continued ~

取材協力:私設図書館シャッツキステHackers Bar

この記事が気に入ったらいいね!しよう

いいね!するとi:Engineerの最新情報をお届けします

プライバシーマーク