ライブコーディングセミナーレポート　9/28(土)

１．ライブコーディングとは何か？

9/28の土曜日に「ライブコーディングセミナー　～実演！現役のハッカーによるプログラミングセミナー～」がヒューマンアカデミー新宿校で開催されました。
http://haa.athuman.com/location/school/shinjuku/guidance/index.asp
講師は“ハッカーズバー”のオーナーであり、医師でもありエンジニアでもある中尾彰宏 先生です。

図1：セミナー講師の中尾先生

https://hackers.bar/
“ハッカーズバー”とは六本木にある、ハッカー（優れたITエンジニアやプログラマーのこと）が集まるバーで、エンジニア達の技術の共有の場になっています。

図2：TVでも紹介されたハッカーズバー

 

ITシステムはプログラミング言語というコンピュータに命令する文章を書いたもので、それを“プログラム”または“ソースコード”、さらに略して“コード”と呼びます。

それを作ることを“プログラミング”または“コーディング”といい、その作業をする人は“プログラマー”または“コーダー”と呼ばれます。

正しく書かれていないコードは、エラーを発生し正しい動作をしません。これを“バグ”と呼びます。

 

学校の講座などで先生が行っているプログラミングは通常は事前に完成したものを使っているだけです。ここで行う“ライブコーディング”とは、その場でパソコンのキーボードを高速にタイプしてプログラミングをして、ITシステムを開発していく、ということです。

高度な技術を要求されるもので、一般ではなかなか見ることができないものです。

２．プログラミングをするにあたり、重要なポイント

図3:本日のセミナー内容

 

まず、中尾さんから本日のセミナーの重要なポイントが提示されました。

まずは“コードを書くということは「恥を書く」ということ”が重要とのことです。
講師でも昔のプログラムを見返すのは恥ずかしいことがあるそうで、どんなに勉強してもバグや間違いはあり、初心者なら尚更です。プログラミングはそういうものであることを理解した上で、それを人に見せたり、公開する。そこで恥は書きますが、そこから人のアドバイスなどを受けて成長を重ねることが大切だそうです。まずは、汚くてもいいので、多くのプログラムを書いて、公開し、失敗していくうちに品質はだんだん上がっていく、ということです。

図４：コードを書くのは「恥を書く」こと

 

次に大切なことは“フィードバック”が必ず起こしながらプログラミングをしていくことです。このフィードバックが速ければ何回失敗してもいいそうです。つまり、少しプログラムを作って、すぐに実行し、結果を確認してから次に進むことが重要ということです。長いプログラムを長時間実行しないで入力し続けて、最後に実行したらエラー続出して動かない、ということはやらない方が良い、ということです。失敗は早く出して早く軌道修正するのが良いとのことです。

その次に大切なのは”フェアウェイ”です。フェアウェイはゴルフの用語で打ちやすい綺麗な芝生の領域のことです。プログラミングでも常にフェアウェイにいるのかが重要なポイントとのこと。

つまり、プログラミングをしている自分の作業や仕組みを把握しているか？ゴールはどこにあり、現在に地点はどこなのか？脱線していないか？ということを考える、まさに「ゴルフ」に似ています。
初心者にありがちなのは、本や先生の言う通りやったが、なぜそのプログラムが動いているのかが分からなくなってしまうというミスがあります。これはフェアウェイから外れてしまっている例です。プログラムを１行でも３行でもいいので、動かしてみてフェアウェイにいることを確認しながら作り、ある行を書いたら、動かないという場合はすぐに戻ればいい、とのこと。

３．プログラミングを難しくしているのは“開発環境”かもしれない

図５：中尾先生のパソコンの開発環境の設定しているところ

 

“開発開始”とはプログラミングをするパソコンにITシステムを正しく動作させる設定のことです。この設定の良し悪しがプログラムを組む効率を変える、と中尾先生は述べてます。

先ほどの話で、フィードバックが速いほどエラーを早く発見することが重要、ということでした。

図６：画面の左でコードを書いて、すぐに実行して右側で確認する

 

早速ライブコーディングのスタートです。(図６)画面の左側でJavaScrtptのプログラム（コード）をキーボードからタイプして、即実行します。すると画面の右側の２つ画面に結果が表示されるという仕組みです。このような状態に設定されたものを“開発環境”といいます。

右に２つ表示があるのは、パソコンとスマホの２種類の実行結果です。

図７：コンビニ決済でも使えるQRコードを表示

 

中尾先生がコードを作って実行すると、画面にQRコードが表示されました。セミナー参加者の皆さんがこれを自分のスマホで撮影すると中尾先生の作ったITシステムの実行結果を誰でも何処でも確認できるデモンストレーションです。

図８：「いいね」をクリックできるボタンに改造したところ

 

先生がさらにコードを書き替えると、今度はQRコードの代わりに「いいね」をクリックできるボタンを作成しました。このように良い開発環境を作れば即動作を確認でき、ITのプロジェクトの成功を導くことになるとのお話です。プログラミングの学習の際に、まずはこのような便利な環境を作ることが大切とのこと。

ヒューマンアカデミーのプログラミングコースは、このJavaScript言語の習得に重点を置いて構成されています。JavaScriptはサーバー、Webサービス、AIなど様々なプログラミングをすることが可能な言語である、と中尾先生の談です。

４．サーバ側プログラムを作成してITシステムを完成

図９：サーバーのプログラムをその場で作って説明する中尾先生

ここまでのプログラムは一般的には“クライアント”と呼ばれるもので、皆さんの手元のパソコンやスマホでの入力や表示を処理するものです。ITシステムはそれだけではなく、インターネット上にある別のパソコンである“サーバー”と通信することで様々ことが可能なのです。

例えば、Amazonや楽天のネット通販で例えれば、欲しい商品を検索する入力は“クライアント”で、商品のリストを検索するのが“サーバー”です。さらにサーバは検索した結果をクライアントへ送信する、という流れです。

次に中尾先生はそのサーバの開発環境を設定し、プログラムをその場で作成（図９）します。

図１０：サーバーに参加している人数表示と「いいね」をクリックした数をカウントする

図１０のように短いプログラムを書いて、即、ブラウザで結果を見て、同時にスマホでも見て確認します。ここでは、サーバにログインしている人（セミナー参加者の一部の方）の数のカウントと、ログイン後に「いいね」ボタンをクリックした数をカウントし、入力してくれるとボタンが「ありがとう」に代わる、というシステムです。これを数分で中尾先生は完成させました。

 

これはSokectIO（Webソケット）という技術で、通常はサーバーはクライアントが情報を要求しないと返答しませんが、これはリアルタイムでサーバが対応する“Push”という仕組みとのことです。
実例ですと、Lineで既読になる仕組みがこれと同じです。

これでライブコーディングのデモは完成です。

５．中尾先生へ質問

図１１：セミナーに参加していただいた方からの質問に答える中尾先生

 

ライブコーディング終了後は中尾先生へセミナー参加者から質問が多く寄せられました。

Q１．「ライブコーディングが凄かったです。どう学べばそのレベルになれますか？そのステップを教えてください」
A１. 「開発環境をまずしっかり設定してから学ぶことです。プログラミングして、すぐフィードバックされれば決して難しくありません。やってみたいITシステムをネット上で検索して、出てきたコードをまずはコピー＆ペーストしていくことがいいでしょう」

Q２「プログラムが速いのはなぜですか？」
A２「慣れですから頑張って練習あるのみです」

Q３「JavaScrtptはいつから勉強してますか？」
A３「JSは20年前くらいから出会い、このくらいの技術力は２～３年前から習得しています。これくらいになるには1年くらい頑張って勉強すればできるかもしれません」

Q４「今はJavaを勉強している。JavaScriptは違う言語ですか」
A４「全く違います。JavaScrtptはここ数年で大きく変化し、様々な用途に対応できるようになっています。」

Q５「キーボードを早く打つにはどうすればいいですか？」
A５「画面だけ見て入力すること。指と文字がどう関連しているかを訓練すること」

Q６「基本的なエラーがなかなか取れないで困っています」
A６「エラーをチェックするサポートツールがある開発環境を使うとある程度コンピュータが教えてくくれるので調べてみましょう。あとは大きなプログラムでエラーが出る場合、その一部を小さく切り取って部分的に実行して確認することです。

 

Q７「プログラミングでつまづいて、落ち込んだらどうする」
A７「一旦中断し、違うことをして気持ちを切り替えることをが大切です。プログラムを客観的に見直す。エラーの調査する検索キーワードを考え直すことも重要です」

６．まとめ

最後にセミナーの参加者の１人がPHPを勉強している方からリクエストで“Wordpress”の開発環境を即時作成するデモを中尾先生が行っていただきました。

WordPressについてはこちらをご覧ください。
https://www.sejuku.net/blog/4529

図１１：Wordpressのシステムを目の前で構築する中尾先生

図１２：Wordpressを起動し、TECHBASEの説明をしている中尾先生

２時間ほどのセミナーでしたが、中尾先生のテクニックで、目の前でどんどんITシステムが構築されて、正しく動作していく様は感動的でした。参加したみなさんも、これでITを勉強するゴールと悩みの解決の手助けになったのではないか思われるセミナーでした。TECHBASEでは今後もこのようなセミナーを定期的に開催していますので、次回はぜひ参加を検討してはどうでしょう。