カテゴリー: プログラミング

  • チャットでお願いするだけでWeb公開までノンストップで開発してくれる「Replit」のバイブコーディングが楽しい

    チャットでお願いするだけでWeb公開までノンストップで開発してくれる「Replit」のバイブコーディングが楽しい

    最近話題のVibe Coding。AIにざっくり「こんなアプリ作りたいんだけど」という要望だけでアプリを開発できるという、エンジニアはもちろん非エンジニアにも魅力的な機能なんですが、非エンジニアにとっての課題はアプリの公開場所。ただのHTMLファイルレベルのアプリであればレンタルサーバーに置いて、とかも可能なんですが、ログインの仕組み作ったりデータ保持しようとすると途端に難しくなる。

    そこまでのエンジニア知識の無い自分としては、ブラウザだけで完結するアプリを細々と作って遊んでいたのですが、散財No.1ポッドキャストのBackspaceでReplitというサービスが使われているのを知り、これなら自分の要求満たせるかもと思って試してみたらこれが大当たり。チャットにお願いするだけでアプリを作るだけではなくログインシステムやデータベースも構築し、さらにインターネットに公開するまでをワンストップで実現できました。

    登録したい方は以下のコードから登録すると10ドル分のクレジットがもらえるのでよろしければ。なお紹介者の私も10ドル分もらえるのでWin-Winの関係であります。

    https://replit.com/refer/kai3desu

    ただ先に期待値を下げておくと、日本語は通るもののメニューは英語なのと、日本語で質問しても英語で返事が返ってくることがあります。まあ英語メニューはそこまで難しくはないのと、返事が英語でも生成AIで翻訳すればいいので、手間はかかるもののそこまで困りはしません。

    どちらかというと困るのは途中で全然アプリがうまく作れなくなること。何度か「修正して」とお願いしても「完璧に修正しました!」と返事は来るものの全然直ってないということもあり、こういうときは諦めてそこまでやりとりした仕様を取りまとめて1からアプリを作り直すのがお勧めです。

    また、Replitは無料で利用できますが、ある程度開発したい場合は有料プランに加入する必要があります。有料プランは月額25ドルからで、生成AI系だと割と王道の価格帯ですかね。

    Pricing – Replit
    https://replit.com/pricing

    今回はReplitで以前から作りたかったオリジナルのソーシャルブックマークを作ってみました。仕様はこんな感じ。

    • 特定のユーザーのみで利用できる
      • それ以外のユーザーはログインできない
    • タグで分類
    • URLを入れるとタイトルや画像、概要も自動で取得
    • パソコンのブックマークレットやスマホの共有機能で手軽に共有
    • いいねボタンでブックマークを評価できる

    まあざっくりいうとはてなブックマークのプライベート版、みたいなイメージですね。特定のテーマ、たとえば推し活で応援しているアーティストの情報だけをみんなで集める、みたいな利用イメージです。

    本当はサービスそのものを公開しようと思っていたのですが、公開用のサンプル作ってたらエラー続きでクレジットを消費しまくっているのでほどほどにして画面紹介。実際のサービスは無事に動いております。

    トップページはこんな感じ。Googleアカウントでログインすると利用できますが、ログインできるGoogleアカウントを別途指定して制限することもできるようになっています。

    ブックマークはタグでの絞り込みやいいねなどの機能を搭載、いいね順でのソートや検索も可能です。

    追加時はURL入れるだけでタイトルや概要、画像も取得してくれます。

    Androidからはシェア機能で登録、iPhoneやパソコンのブラウザはブックマークレットから登録可能。スマホからもできるだけ気軽に登録できるようにしました。

    前置きはこのくらいにしていよいよVibe Coding開始。まずはユーザー登録してざっくり仕様を投げます。なおやたらと仕様が具体的なのは何度か作成に失敗し、その時の失敗を取りまとめて再度お願いしているからです。

    これでいったんは完成したのですが、日本語が文字化けするので修正を依頼。

    修正したというのに直ってないので再度修正依頼。こういうのはしょっちゅうです。

    それでも直らないので具体的なURLを示してお願いしました。ただ指示するだけじゃ無くて具体例を示すの、AIだけじゃなく人間のお願いでも大事ですね。

    こんな感じで仕様を修正しつつ、一通り完成したタイミングでAndroidからのシェア機能の実装を確認。

    こんな雑なオーダーでも提案してくれるので提案のまま実装をお願いします。

    実装はしてくれたものの、またしてもバグがあるので再度修正。新しい仕様を追加すると都度修正の繰り返しですね。

    Androidのシェアがうまく動いたので今度はiPhoneのシェア機能を依頼。

    Androidとは仕様が違うので、ということでブックマークレットやiOSのショートカットアプリで登録する機能を実装してくれました。

    このあともいろいろ修正依頼は発生しているのですが、一通りできあがったらいよいよインターネット公開、の前にセキュリティ面を心配しましょう。自分の持ってる知識では入力欄にプログラム書かれたらいかんな、ということで以下を質問。なお、「開発は不要です」としているのは、ただ質問しているだけなのに勢いよく開発始めちゃってクレジット消費されちゃうこともあるからです。こういうのもやってみての学びですね。

    ぼちぼち想定範囲内の問題があったのでここも改善を依頼。

    推奨対策を実装した上でさらにセキュリティの質問。

    まだまだあるよ、ってことなので片っ端から実装してもらいます。

    こんな感じでセキュリティ面も対策したらようやくWeb公開。なお実際には自分で確認するのに一度インターネット公開した方が早いのですが、セキュリティ面を対策すると大丈夫だった機能も使えなくなったりするので、最初からまとめて実装しといたほうがよさそうです。

    インターネット公開は画面右上の「Deploy」を選択。画面では一度Deployが済んでいるので「Redeploy」という表記になっています。

    Deployに関してどの環境を選択するかなど説明がありますが、ひとまず進められるままにAutoscaleを選択。

    Autoscaleの設定もとりあえずお勧めのままGO。

    最後にURLを決めてから「Deploy」でいよいよインターネット公開。

    あとはひたすらデプロイ作業が終わるのを待ちます。

    というわけで自作のソーシャルブックマークサービスができあがりました。ここ1週間くらい自分で運用していますが、ぼちぼち想定通りの仕様で動作しています。

    素人アプリなのでセキュリティ面が心配ではあるものの、今回のアプリのようにGoogleアカウントログインを必須としつつ、どのアカウントでログインできるかも指定できるので、友達のGoogleアカウントのみ利用できる、としておけばセキュリティの心配もだいぶ減らせそう。とはいえ私もプロではないのであとは自己責任でお願いします。

    言ったとおりに実装してくれなかったり、機能を追加するたびに問題なかった機能がだめになってたり、そもそも全然うまく動かなくて一からやり直したりと大変さはあるものの、それでも全然プログラミングができない人間が悪戦苦闘しながらもWebにアプリを公開できるのはすごく楽しい。そして繰り返しながら単なるブラウザ動作レベルではなくGoogleアカウント連携やデータベースまでまるっとやってくれるのが、アプリ作りたいけど作れなかった自分のような人間にとって夢のようなサービスです。

    そして自分でVibe Codingしてみると、ちゃんと適切に最初から仕様組む大事さも痛感できるし、脳内の仕様でとりあえず突き進んでアプリにしてみるというのもすごくいい経験になる。サバゲーで人を撃つことの怖さを知る、に近い感覚を覚えました。

    改めてですが興味ある方はぜひ以下のコードからご登録ください。25ドルの有料プランは割とたっぷり開発できるので、ここでもらえる10ドル相当のコードでもけっこう遊べるのではないかと思います。

    https://replit.com/refer/kai3desu

  • コミケ向けキャッシュレス決済システムをサンプル公開します

    コミケ向けキャッシュレス決済システムをサンプル公開します

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    電子書籍販売開始記念、ということで、以前にも紹介したコミケに向けて作ったキャッシュレス決済システムを、今をときめくナウなヤングにバカウケなFirebaseを使ってWebで公開してみました。

    KaiPay
    https://myprofileproject-8580b.firebaseapp.com/

    といっても実際に使える動作するようなシロモノではなく、「どんな動作をするか」というのを見るためだけのサンプルですが。

    このキャッシュレス決済システムは、当日の頒布で使う予定だったキャッシュレス決済をせっかくだからシステム化しようという思いに加え、「この本を読めばこのくらいは作れる」というサンプルとしての意味もありました。そのためコードとしては無駄に長く力業でゴリ押ししているところも多いので公開するのはお恥ずかしいのですが、本書を手に取っていただいた方の参考に少しでもなるのなら幸いです。

    ファイル一式ダウンロードはこちらからどうぞ。試行錯誤しながら作っていたので最終的に使ってないコードとかもありそうですがそのあたりは優しくスルーしていただければ幸いです。

    また、このプログラムは「フルHDの縦表示でタッチ操作」、つまりはSurface Goの縦置きで利用することを前提とした画面UIなので、横画面だといろいろとおかしな挙動があります。詳細は後述しますが、限られたコードで実現しているので動作がおかしいところもある程度大目に見てくださいませ。

    Surface Goの縦表示でぴったりサイズ
    Surface Goの縦表示でぴったりサイズ

    本書を読めばこのシステムの作り方は「ほぼ」わかるのですが、このエントリーにてシステムの補足もしておきます。

    画面遷移はclassListで表示・非表示を切り替え

    あの7payも活用したことでおなじみCSSのdisplay: noneをフル活用し、ひたすら長い1つのHTMLの中で該当の箇所をclassListで表示・非表示することで画面遷移をコントロール。最初に全部index.htmlで読み込んでいるので動作が早いという地味なメリットがあります。

    頒布品の数量と価格はletで個別にカウント

    すべての頒布品に+と−ボタンおよびletによる変数を個別に用意し、addEventListenerを使って+を押したらletに1を追加して冊数をカウント。間違って追加した時のために−も用意しておきつつ、操作性向上のために「画像をタップしても+」という仕様にしました。さらに合計金額を算出するためのletも別途用意しておき、+と−を押すたびに頒布品の価格を合計金額のletへ加減することで計算しています。

    画像またはプラスマイナスボタンで品数をカウント
    画像またはプラスマイナスボタンで品数をカウント

    選択した内容を確認画面で表示

    自分がどれを選んだか決済前に確認できるように、上記で用意した頒布品ごとの数をカウントするletが0でない場合はアイテム名をcreateElementで作成し、テンプレートリテラルを使って作品名と選択数量をliでリスト表示。最後に合計金額のletも表示しました。また、作品を1つも選んでいない場合は合計金額もゼロのはず、なので「合計金額のletが0だったらエラー表示」という画面をifで構成しました。

    確認画面で選択数と合計金額を表示
    確認画面で選択数と合計金額を表示

    Math.randomで「20回に1回当たり」のラッキーチャンス

    PayPayの仕組みが面白かったのでMath.randomを使って再現。とはいえこのシステムでは委託させていただいている鳴海製作所の頒布品も選べてしまうので、ifを使って「自分の本の数量が0でない時だけラッキーチャンスを発動」としつつ、Math.randomで1から20の数字を算出、「数字が1だったらラッキーチャンス」という仕組みで20回に1回を実現しました。

    自分以外の作品を含んでいる場合は900円引き
    自分以外の作品を含んでいる場合は900円引き

    まあこれ、デバッグ用に確率を1/2にしていたにも関わらず直すのを忘れて当日販売してしまい、結果として「Kyashを選んだ人は1/2の確率で1冊無料」という地獄を見たわけですが……。

    決済用QRは100円単位で画像を出力

    「エンジニアはぜったいこんなの実装しない」というお褒めの言葉をいただいた本システムの見せ場。最初は単に決済サービスを選ぶだけだったのが、複数まとめて選びたいというニーズに対応するため金額も必要となり、とはいえ決済サービスのAPIを叩くような仕組みはコンセプトから外れるしそんな知識も無い。

    よろしいそれならあとは実力行使だ、ということで、今回使ったKyash、PayPay、Pixiv PayそれぞれのQRコードを100円単位で1万円まで用意する、というジェバンニ並みの力業を発動。システム作るよりこっちのほうが大変だったかもしれない……。

    Kyashの場合、金額ごとのURLは生成できるのですがQRは発行できないので、URLを金額分発行した上でそれをQRコード化。PayPayはQRに金額を設定できるので、1つずつ金額を設定した上で画面をキャプチャし、必要な部分だけを切り出し。Pixiv Payは決済だけでなくレジシステムも兼ねているので、金額ごと販売アイテムを作成し、その画像をキャプチャして切り出しました。また、表示金額にエラーがあったときのために、金額を好きに指定できるQRもサブで表示しています。

    しかしこれまたサービスそれぞれ癖がありその対応も大変。Kyashの場合URLはバーコードリーダーアプリから読み取る必要があり、Kyash内のQRコードリーダー機能だとエラーになってしまう。PayPayはもっとめんどくさくて、作成したQRコードが一定時間経つと無効になることに気がつき、24時間は大丈夫そうだという手応えから当日の朝出力して対応しました。そういやこの件、PayPayのサポートがまだ返事くれないな。

    QRは2段階表示

    プログラムで計算した金額に加えて、万が一計算が間違っていた時にすぐ対応できるよう、金額が入ってないQRも表示する2段階設計にしました。ただこれも問題があって、Pixiv Payはアイテム販売のための仕組みなので「好きな金額を指定できる」という機能がないんですよね……。仕方ないのでPixiv Payでは画面下部に「うまくいかない時は売り子に伝えてね」という文章を入れて対応しました。とはいえ当日少なからずキャッシュレス決済を選んだ人がいた中でもPixiv Payを選んだ人はゼロだったので結果オーライ的に助かったのですが。

    上は金額入り、下は金額なしのQR
    上は金額入り、下は金額なしのQR

    location.reload();でリセット

    一度キャッシュレスで決済した後、次の人のための初期化をするためにlocation.reload();でリセット。これ、本書では触れていないのでなんとかこれを使わず実現したかったのですが、実現方法はあるものの恐ろしく面倒になりそうだったので、時間が迫っていることもあり泣く泣く使ってしまいました。addEventListenerの中に location.reload();って書くだけなので許して……。

    TOPページを下にスクロールするとリセットボタンがお目見え
    TOPページを下にスクロールするとリセットボタンがお目見え

    また、単にlocation.reload();だけだとページの位置もそのままなため、画面をスクロールしていた場合はそのスクロールした位置でトップに戻ってしまうため、正しい表示にならないという問題があります。

    画面をスクロールした状態でリセットするとTOPが正しい位置で表示されない
    画面をスクロールした状態でリセットするとTOPが正しい位置で表示されない

    ただ画面をスクロールするのはリセットや後述する緊急対応のみで基本的には自分しか操作しないこと、リセットでTOPに戻るという仕組みは、本に書いていない内容をさらに深掘りしてしまうということで今回は泣く泣く割愛しました。繰り返しですが横画面だとリセット押した時の挙動が微妙ですが、基本的に縦画面で使うためのシステムなのでご了承ください。

    決済がうまくいかない時の緊急避難ページ

    金額エラーが出た時のために、金額を自分で指定できるQRだけが貼ってあるHTMLを作成、画面の一番下から飛べるようにしておきました。前述の通りPixiv Payは金額を指定できるQRがないので、緊急避難で表示できるQRもKyashとPayPayのみです。

    KyashとPayPayのQRを表示した緊急避難ページ
    KyashとPayPayのQRを表示した緊急避難ページ

    システムの説明としてはこんなところかな。繰り返しながらとても稚拙なコードで無駄に長いのですが、初心者に大事なのはきれいなコードを書くことより「自分の持っている知識の中でなんとかする力」だと思っているので、本書1冊読めばこのくらいできるんだ! という参考になったらいいなという宣伝エントリーでした。

    本書のご購入はこちらからどうぞ。

    Amazon.co.jp: ゲーム脳で楽しむプログラミング: 初心者が捧ぐ超初心者向けのJavaScript入門書 eBook: カイ士伝: Kindleストア
    https://www.amazon.co.jp/dp/B07XGCNV3R?tag=kai4den-22

    ゲーム脳で楽しむプログラミング – 実用、同人誌・個人出版 カイ士伝(カイ士伝):電子書籍試し読み無料 – BOOK☆WALKER –
    https://bookwalker.jp/def1a25255-0d2d-40d3-9c54-aa39096196b9/

  • コミケで出したJavaScript本の電子書籍販売を開始しました

    コミケで出したJavaScript本の電子書籍販売を開始しました

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    先日コミケで人生初頒布したJavaScript本。

    C96夏コミケ3日目に出ます – カイ士伝
    https://bloggingfrom.tv/wp/2019/07/30/16206

    いろいろと細かな修正などで時間かかりましたが、なんとか電子書籍版の準備にこぎ着け、KindleとBook Walkerの2カ所で販売を開始しました。
    B07XGCNV3R

    Amazon.co.jp: ゲーム脳で楽しむプログラミング: 初心者が捧ぐ超初心者向けのJavaScript入門書 eBook: カイ士伝: Kindleストア
    https://www.amazon.co.jp/dp/B07XGCNV3R?tag=kai4den-22

    ゲーム脳で楽しむプログラミング – 実用、同人誌・個人出版 カイ士伝(カイ士伝):電子書籍試し読み無料 – BOOK☆WALKER –
    https://bookwalker.jp/def1a25255-0d2d-40d3-9c54-aa39096196b9/

    BOOK WALKERでは冒頭が試し読みできるのでこちらもどうぞ。「はじめに」を読んでもらえるとこの本がどんな位置づけなのかがわかるかなと思います。

    ゲーム脳で楽しむプログラミング(試し読み)
    https://viewer-trial.bookwalker.jp/03/6/viewer.html?cid=f1a25255-0d2d-40d3-9c54-aa39096196b9&cty=0

    この本を書いたきっかけやこだわりなんかは少し長いのですがここを読んでもらえると。

    プログラム初心者が初心者のための解説本を出します宣言(副題: 256timesを終えて) – カイ士伝
    https://bloggingfrom.tv/wp/2019/04/17/16076

    こだわりとしてはPDFではなくぜんぶePubへ変換したこと。技術書の電子書籍ではPDFをそのまま電子化したものが多く、レビューなどで「PDFは読みにくい」というコメントが多く付けられていたことと、何より自分もPDFだと読みにくいというのを実感していたので、ここは手間をかけてでもePubにしてみよう、と挑戦してみた次第です。

    ePubはWordや一太郎から変換したり、ePub専用リーダーを使ったりといろいろな作成方法があるのですが、今回は株式会社破滅派の「HamePub Enterprise」を使ってePub化してみました。

    HamePub Enterprise(エンタープライズ向けePub作成代行) | 株式会社破滅派|出版, 電子書籍, Web制作
    https://hametuha.co.jp/services/hamepub-enterprise

    HamePub自体はCerevo時代にIoTミニ四駆製作キットの電子書籍ガイドブック作成時にも使わせてもらっており、個人で電子書籍出す時にも使ってみたいと思っていたので、破滅派代表の高橋さんにご協力いただきつつ無事にePub発行できました。お忙しい時期にいろいろと細かく対応していただいた高橋さんにこの場を借りて改めて御礼申し上げます。

    HamePubを使うメリットは、普段から使い慣れているWordPressを使ってブログを書くかのようにePubを作成できることに加え、表紙や奥付といった書籍のためのフォーマットが用意されているので、必要な情報をそこに書き込んでいくだけでいいという手軽さが魅力でした。ど素人からすると奥付ってどんなこと書けばいいかもよくわからないですしね……。

    具体的な手順としては、各章ごとをWordPressの「投稿」として登録し、すべての章を登録したら「作品集・連載」を作成してそれらの投稿を紐付け。あとはメニューに用意された奥付や表紙、あとがきなどを登録していきます。

    販売についてはKindleならHamePubの管理画面から申請するだけなのでとても手軽。今回はBook Walkerにも出したかったので、管理画面からePubとしてダウンロードし、Book Walkerの登録をして手続きしました。

    なお、手数料はWebにもある通り収益から30%を破滅派へ支払います。今回はKindle独占ではないのでKindleのパーセンテージは70%が取られ、残り30%に対して30%を引いた分が収益に。Book Walkerは独占に関係なく50%なので、50%に対して30%を引いた分が収益、ということになります。

    有料サービスではありますが、使いやすいWordPressで電子書籍を作成できること、電子書籍のためのフォーマットも整っているので専門知識が不要なこと、Kindleなら販売の代行もしてくれることを考えるとその価値はあると思います。

    何よりエラーの出ないフォーマットで作れるメリットが大きくて、試しに自分でもダウンロードしたePubファイルをいじってみたのですが、見た目は変わらないのにエラーが出て変換できなかったり電子書籍としてアップロードできなかったりとかなり苦労しました。その点HamePubならKindleはもちろん、Book WalkerもダウンロードしたePubをアップロードするだけで一発OK。ePub編集で余計な苦労したくないならHamePubはなかなか有力な選択肢ではないでしょうか。

    しかし実際に電子書籍出してみてKindleはそりゃ一極集中の天下になるわと思った。Kindle独占にしないなら70%という半分以上の金額をロイヤリティとして持っていかれちゃうならKindle独占で登録しちゃうよなー。実際に使って見てBook Walkerはとても使いやすくよくできている仕組みなだけにますます惜しい。

    というわけで買ってくれる人のほとんどがKindleを選択する気はしているものの、この寡占状態にちょっとでも危惧を覚える人や新しいもの好きの人、ちょっとでもロイヤリティもうけさせてやろうという人はよろしければBook Walkerでの購入もご検討いただけると幸いです。

  • 初コミケに向けてJavaScriptでキャッシュレス決済システム作った

    初コミケに向けてJavaScriptでキャッシュレス決済システム作った

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    初コミケに向けた施策その1が思ったよりうまくできたのでエントリー。

    キャッシュレス推進派の私としましては、当日のお支払いも現金に加えてキャッシュレスでやりたいなと思っているのですが、ただキャッシュレスなだけでは面白くないので、JavaScriptでキャッシュレス支払いシステム作ってみました。

    これがその画面。デザインはまだ暫定なのでもうすこしオシャレにはする予定。

    IMAG4588

    タップして支払い方法を選ぶとQRコードが表示されるだけ、というとてもシンプルな代物です。

    IMAG4589

    とはいえそれだけじゃおもしろくないので、20回に1回無料になる仕込みも入れてみました。これ実装したはいいけどサンプルの画面撮るのがめんどくさかったw

    IMAG4590

    正直コードはとても冗長であまり褒められた内容ではないのですが、ポイントとしては「今回の書籍を読んだらこのくらいの仕組みは作れるよ」というアウトプットのサンプルでもあるということ。そのため本当はコードをもっときれいにしたいのですが、あまりきれいにしてしまうとなぜそう書いているのかがわかりにくくなるのであえて冗長にだらだらとコード書いてます。

    買ってくれた人にはコードの解説とかも配りたいところですが、その他にもちょこちょこ仕込み考えているので8月11日までがんばらんとな……。

    そして作ったはいいものの、当日モバイル回線が混雑しててとても決済するレベルじゃねーぞというオチも少なからずありそう。

  • C96夏コミケ3日目に出ます

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    4月に宣言しておりました下記の件。

    プログラム初心者が初心者のための解説本を出します宣言(副題: 256timesを終えて) – カイ士伝
    https://bloggingfrom.tv/wp/2019/04/17/16076

    なんとか予定のスケジュールを守り、無事に夏のコミケで販売できる運びとなりました。3日目の8月11日、下記ブースを間借りしてつつましやかに販売頒布予定です。

    文章書くこと自体はそこまで苦ではなかったものの、サンプルのプログラムを考えたり、本ならではの装丁考えたり、初の印刷所入稿でいろいろと悪戦苦闘しました。当初の予定では6月に原稿ほぼ終わらせる予定だったのに体調崩したりプライベートでいろいろあったりで予定がどんどん後ろに倒れていき、結局かなりギリギリのところまで粘ることに。いやー7月中のあまり時間はほぼこの作業に費やしていたなー。

    入稿周りの苦労はまた別途ブログでまとめる予定としつつ、ひとまずは無事に頒布販売できそうですよというご報告まで。当日は私もブースで販売員スタッフする予定なので、3日目にお越しの方はよろしければお立ち寄りください。うまく間に合うようならいろいろと仕掛けも考えているので、どうぞよろしくお願いいたします。

  • プログラム初心者が初心者のための解説本を出します宣言(副題: 256timesを終えて)

    プログラム初心者が初心者のための解説本を出します宣言(副題: 256timesを終えて)

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    今年に入って何度かエントリーしていたプログラミングスクール「256times」が、本日をもって全カリキュラムを終了しました。

    ドットインストールのプログラミングスクール「256times」参加します ? カイ士伝
    https://bloggingfrom.tv/wp/2019/01/16/15950

    256timesを受講して二週間が経ちました – カイ士伝
    https://bloggingfrom.tv/wp/2019/02/03/16018

    トータルで約3カ月のカリキュラムでしたが、残念ながら私はカリキュラム終了直前で脱退することとなり、予定されていた最後のイベントには参加しておりません。そんな人もいないかと思いますが「私のプレゼン見にイベント参加したのに」なんて物好きな人がいらっしゃったとしたらこの場を借りてお詫び申し上げます。

    とはいえ256timesでのプログラミング学習についてはすべて完了しており、残すは「イベントでのプレゼンテーション」「これまでの学習を踏まえてイベント参加者に共有できるアウトプット」というのが最後の課題でした。

    元々はイベントに向けて準備もしていたので、予定していたプレゼン内容はこのブログに代えさせていただきつつ、アウトプットとして準備していた「プログラミング解説本」についても執筆中のお試し部分をこのエントリーで無料公開することで、イベントに参加できないながらも最後の課題を自分なりに達成したいと思います。

    解説本のダウンロードはエントリーの最後に用意していますが、なぜ今回のアウトプットが解説本に至ったのかも含め、今回の256timesを振り返りたいと思いますので、少々長くなりますがお付き合いください。

    256timesで得たもの

    256timesへの参加を表明したブログでも書いていますが、プログラミングはずっと身につけたいと思いはあり、ドットインストールのような学習サイトを利用したり、書籍を買ってみたりしたもののなかなか続かず。思えばドットインストールもサービス開始とほぼ同時にユーザー登録していた1期生なのですが、それからもう7年以上経つというのにほとんどプログラミングは身につかないまま現在に至っていました。

    256timesに参加する前の自分のスキルはこんな感じ。ほぼほぼ何もわからない初心者同然です。

    • HTML: タグは部分的に読み書きできるが、Webサイトを自分で作れるほどではない
    • CSS: 読んでだいたい内容はわかるが自分で書けないのでその場その場で検索してなんとかする
    • JavaScript: 書籍や学習サイトで学習するも序盤で挫折。「配列」とか「代入」という存在をなんとなく知る程度

    こんなプログラミングのど素人が256timesを通じて、下記の画像くらいのJavaScriptは自分で書けるようになりました。プログラミングできる人にとっては本当に初歩の初歩レベルかと思いますが、個人的にはライザップもブルワーカーもびっくりの成長っぷりです。

    これまでの自習では身につかなかったのに256timesではなぜここまでできるようになったのか。個人的にこれのおかげだな、というポイントは以下の通りです。

    圧倒的締切

    256timesは基本的に2週間ごとに課題が提出され、期限内に目標を達成しないと脱落となります。勉強が本分の学生時代ならいざ知らず、仕事に趣味にとついつい時間を消費してしまう社会人にとって、明確な締切が設定されている効果は絶大。もちろん、そんな締切がなくても自分できちんと学習していける人もいるのですが、そんなタイプだったら苦労はしていないというか、ドットインストール登録してから今までの間にきっともうプログラミングが身についていただろうね……。

    圧倒的基礎練

    今回もっともありがたく、これが無かったらきっとプログラミングが身につかずに終わってしまったのでは無いかと思うくらい感謝しているのがこの基礎練。要は問題集みたいなもので、最低限のHTMLとCSSだけが与えられて「このような動作をJavaScriptで実現しなさい」という問題を80問近く解きました。内容も本当にシンプルなものからある程度JavaScriptを理解していないと解けないような問題まで幅広く、ほぼゼロのところから自分の手を動かしてプログラミングを動作させる、という場数をこなせたことが今回の成果につながっていると実感しています。

    圧倒的サポート

    そしてこの基礎練を支えてくれた両輪の存在が運営のサポート。この基礎練は参加メンバー10人、それぞれが70〜80問近くの基礎練を提出し、運営が中身を見てOKかNGかを判断するという仕組みだったのですが、初歩レベルとはいえ数百以上のプログラムに目を通し、正しいプログラミングまで導くという作業はとてもハードなものです。2週間という短いサイクル(80問を2週間で解いたわけではありませんが)の中、参加者それぞれが思い思いの時間に提出する課題にほぼ24時間体制で毎日回答してくれる徹底したサポート体制がなければ、基礎練をクリアすることも内容を身につけることもできなかったでしょう。

    少なくともプログラミングに関するカリキュラムはすべて終え、JavaScriptについては基本的なところを理解して自分でも書けるようになったことで、書店で書籍をパラパラ読んでも書いてある内容が把握でき、基本的な仕組みがわかったことで知らない知識についてもある程度理解できるようになりました。

    今まではプログラミングの学習に取り組んでも内容が理解できないために身につかず、それで結局途中で終わってしまう、というのが続いていたのですが、256timesを通じて基本的な知識を得たことで、ここから先JavaScriptはもちろん、他のプログラミング言語についても理解するだけの土台を得られたと思いますし、そのための場を提供してくれた256timesに対しては改めて深い感謝の意をこの場で表明させていただきます。

    プログラムを身につけたことで感じたこと

    256timesのおかげでプログラミングが身につく一方、当初は「アプリケーションを作りたい」という目的設定に向けて進んでいたものの、プログラミングを学習していく中で新たに別のモチベーションが生まれ始めました。それがタイトルにもつながる「初心者にとってのプログラミング学習」、プログラミングを学習するための初心者のハードルの高さをなんとか解決できないのか、ということです。

    これは以前に話題になったnoteの記事なのですが。

    文系でプログラマーになったけど色々失敗して3年半で会社を辞めた話|denkigai|note
    https://note.mu/denkigai/n/nafff6bd87802

    全体的に自分のような文系にとって身につまされる話も多い中、もっとも共感したのが下記の部分です。少し長くなりますが中略入れつつ以下引用します。

    自転車に乗れるようになってだいぶ経つ人間は、「自転車に乗れない」ということがもはやどういう状態なのかわからない。「今から自転車に乗れなくなってください」とお願いをされても実現できない(乗ったまま体を動かさずに倒れることはできる。それは「乗れる」人間だからできる技であり、「乗れない」人間はなんとかペダルを動かそうとしているうちにいつの間にか倒れている)。

    自転車に乗れない人間も、自分には何が足りないのか理解できない。「乗れる」というのがどういうことなのか全く分かっていない。だから何を質問すれば良いのかがわからない。

    (中略)

    そういう意味で、熟練のエンジニアと素人の間には深く暗い川が横たわっている。此岸から彼岸に至るとき、もとの人間ではなくなっている。三途の川を挟んでの意思疎通はできない。だから熟練のエンジニアが素人を教えることはほとんど不可能だと思う。三輪車に乗っている人は補助輪つき自転車に乗る人に教えを請うべきだし、補助輪付きの人は補助輪を外して転びまくっている人に質問すべきである。

    (中略)

    ※ 近年の幼児たちはSTRIDERというペダルのない二輪車を使って自転車に乗る練習をしている。足で地面を蹴って進むタイプの二輪車で、単に楽しいことに加え平衡感覚を養う効果がある。STRIDERに慣れると補助輪無しでいきなり自転車に乗れるようになるらしい。今流行っているプログラミング学習支援サービスはあくまで補助輪付き自転車に近いと思う。プログラミング教育におけるSTRIDERは、まだ登場していない。

    初心者なりに学習サイトや書籍をいくつか試しては挫折する……、という経験を繰り返していた自分にとってこの内容、特に「プログラミング教育におけるSTRIDERは、まだ登場していない」という部分は激しく膝を打つほど共感するものでした。

    今回256timesを通じてJavaScriptを学ぶ中で、世間一般的なプログラム学習とは違うアプローチがあるのではないか、もう少し初心者の立場から初心者に向けた解説ができないものだろうか、そんな思いがどんどん高まり、「初心者の立場から初心者に向けてプログラミングの解説本を書いてみよう!」という決意に至った、というわけです。

    プログラム解説本、コミケで売るってよ

    とはいえ256timesで学んだとおり、締め切りがないときちんとアウトプットが出せないと強く自覚している自分のようなタイプにとっては、解説本についても明確な締め切りが必要。ということで、思い切って「プログラミングの解説本を今年中にコミケで出す!」という宣言をすることにしました。

    とはいえコミケは出したいといって出せるものではないので、早くても冬コミ、受からなかったらコミティアかな、もしくは電書で売るかな……、などと遠い目をしていたところに「うちのブース、空いてますよ」と春日の横ばりに共同ブース出展の提案をいただき、今年の夏コミで販売できる機会をいただいてしまいました。

    コミケの出展詳細は期日が近づいたらまた改めて発表する予定。もちろん実際には締め切り間に合わず落としてしまう可能性も残しつつ、せっかくいただいた機会は最大限活用しよう、ということで、夏コミでの販売に向けて有言実行できるよう進めていきたいと思います。

    どんな本なのか

    内容そのものは末尾のリンクからダウンロードしていただくとして、この解説本を書くためのコンセプトをここでご紹介しておきます。

    console.logは後回し

    ほとんどすべてと言っていいほどJavaScriptの解説書はconsole.logから始まります。もちろんconsole.logはとても重要ですし、自分も256timesのカリキュラムの中でconsole.log先生には大変お世話になりました。

    なんですが、初心者にとってconsole.logでプログラムが動いても全然楽しいとは思えないんですよね。console.logの中でやるのも足し算引き算のような「それくらいは理解できるよ……」というものだったり。

    一方、今回の256timesで「これは楽しい!」と思えたのがDOM。自分が組んだプログラムがconsole.logの中ではなく実際のブラウザで動作するのはとても楽しい体験で「はじめからこれをやりたかった!」と痛烈に思いました。

    そんなわけで今回の書籍はDOMをテーマにして、JavaScriptがどんなことができて、どういう仕組みなのかを学べることをコンセプトにしています。もちろんconsole.logも大事な機能なのでしっかりフォローしますが、それは基本的な仕組みを覚えてから学ぶという順番でもいいのかなと。

    用語も後回し

    プログラミング学習でつまづいたもう1つのポイントが用語の多さ。初心者にとって新しい知識に加えてそれぞれを知らない名前で呼ぶのは結構疲れるものです……。スポーツ初心者にとって、専門用語満載で教えられても理解に時間がかかる……、みたいなものでしょうか。

    そのため今回の書籍では専門用語はできるだけ使わず、一通り終わったタイミングで正しい用語を解説する、という流れにする予定。テニスを教える時に「ロブという相手の頭の上を超える高い球を打つ技」という知識から入るより、「相手の頭の上を超えるよう高く打ってみよう。そう、それがロブという技だよ」というように、体験してから名前を覚える流れのほうが伝わりやすいのでは、という考えです。

    文字の間違いは無視

    解説の通り入力したのになぜかプログラムが動作しない、延々と原因を探っていたら大文字と小文字が違っていた……、なんていう経験は初心者だけでなく現役プログラマーでも同じ体験をしているのではないでしょうか。

    正しく動くプログラミングのためには、こうした間違いを探し出せすことも確かに重要なのですが、初心者にとってその時間はモチベーションを大きく下げますし、ただの間違い探しでしかない作業を初心者に課すのはとても非効率だな……、と思います。

    しかも最近ではプログラミング用のエディタが機能充実していて、正しい表記を補完してくれたり、カギ括弧も自動で入力したり足りないところを教えてくれたりという機能が用意されています。こういう機能があるにもかかわらず「手で書けないと意味が無い」というのは、プログラマーとしては必要な能力でありつつ、初心者にとってはちょっと度の過ぎる体育会系だな、というのを元体育会系としても感じたことから、今回の書籍ではこれらについては割愛します。

    具体的にはカギ括弧を正しく書くという説明はしませんし、コードも基本的にコピペで済むか、本当に最低限の単語を入れ替えるだけで動作する、という流れにする予定。コピペして該当箇所だけ書き換える、という作業も積み重ねればちゃんと身につくはず、それよりもまずは仕組みを理解してプログラミングを楽しむことに重点を置くという方針です。

    書籍以外の知識を使わない

    過去の経験として、書籍の解説を読みつつ最後に問題を解こうとするとどうやっても解けず、答えを見ると「ここでは説明してなかったこういう機能を使います」という解説を目の当たりにして「そんなんわかるわけ無駄な時間返せや!」と本を投げ捨てたことがあります。学生の頃に受けた模試で知らない範囲が出された、みたいな体験も近いでしょうか。

    初心者ながらプログラミングで必要な能力は「知らないコードの書き方を調べる力」「知っているコードを正しく組み立てる力」の大きく2つかなと思っているのですが、前者は実践に出れば出るほど重要になる能力ではありつつ、後者の能力が備わっていない初心者にとって、「知らない知識を正しく探す」というのも結構な負荷になります。

    なので今回の書籍では「自分で調べてなんとかしましょう」という要素は一切排除、「すべてはこの本の中に書いてあるからコードの組み立てに力を注ごう」という立て付けにしています。過保護かもしれないのですが、せっかく学習意欲のある初心者に対して、その意欲をいたずらに下げるようなハードルはできるだけ排除していきたいのですよね。

    執筆中の解説本アルファ版を無料公開

    えらく長い前置きになりましたが、現在執筆中の解説本、前書きと第1章、そして環境準備のための第0章までを以下のサイトで公開しました。


    ここからダウンロード

    まだ執筆中ということもあり、ここで公開した内容が実際の書籍では変わる可能性もありますが、上記で長々と説明してきたコンセプトで書く本はどんなものなのか、という体験はしていただけるかと思います。

    なお、ダウンロードには金額入力しなければいけないのですが、あくまでアルファ版で反応を見たいだけであり、下手に金額入っても面倒なので、編に気を遣わず「0円」のままダウンロードしていただける方が本人としてはとてもありがたいです。読んだ上で気に入ったら、きっと夏には出るであろう本番を購入していただければ十分ですので。

    余談ながら今回ダウンロード用のサイトをいくつか考えている中で「そういやgumroadってどうなってるんだろ」という興味本位からgumroad使ってみたのですが、gumroadをパクじゃなかったインスパイアして生まれ、その後史上最速でバイアウトされた「ameroad」も現在いまサービスちゃんと運営されているのですよね。

    ameroad【アメロード】-デジタルフリマ-Twitterでデータ売ろう【電子書籍もゲームも音楽も写真もイラストも】
    http://ameroad.net/

    せっかくなのでameroad使ってみようかなと思ったのですが、なんというかこう、配信されている作品を見ていたら少々悲しくなってしまいまして、結果としてgumroadを使うことにしました……。ameroad、いまこそ面白い存在になりそうなので、配信コンテンツとかもうちょいいろいろ整備してもらえるといいかなあ……。

    本題に戻ると、本書は執筆途中でもあり、さらにはあくまで初心者が書くものなので説明として正しくない可能性もありますし、正式な用語を使わず例えを多用することで間違った理解をしてしまう可能性はもちろんありますが、個人的には正しい知識はあとからでも修正できる、それよりもなによりもせっかく持ったプログラミングへの興味や情熱を失うことなく、楽しみながら基本的な知識を身につけることが大事、というコンセプトに基づいた実験的なアプローチとして、温かく見守っていただければ幸いです。

    前述で紹介した「プログラミング教育におけるSTRIDER」という考えには深く共感しつつ、多少知識として間違いがあろうとも興味を持ってもらい、学習のための入り口に立てるような解説本でありたい、というコンセプトを踏まえて、日本史における「お〜い!竜馬」や「日出処の天子」、バスケにおける「黒子のバスケ」、グルメにおける「美味しんぼ」のような立ち位置になれるような書籍を目指して参りますので、どうぞよろしくお願いいたします。

  • ドットインストールのプログラミングスクール「256times」参加します

    ※この記事は5年以上前に書かれたため、情報が古い可能性があります

    Twitterではちょこちょこと投稿しておりましたが、初心者向けプログラミング学習サイト「ドットインストール」のプログラミングスクール企画「256times」に挑戦しており、書類選考、14日間連続の課題選考を抜けて、晴れて初の0期生として参加することになりました。

    『ドットインストール』公式ブログ – 【第0期生募集中!】 少人数スパルタ方式のプログラミングスクール『256times』を始めます
    http://blog.dotinstall.com/post/181264803770/256times

    14日間の感想はTwitterでまとめておいたので興味ある方はご覧ください。途中でツイートつなげるの忘れてたので途切れ途切れになってはいますが。

    元々プログラミングには興味があり、ドットインストールはもちろんのことほかのプログラミング学習サイトや書籍やらをちょいちょいかじりつつも、仕事が忙しかったりプライベートの予定が入ったりするとついつい勉強をおろそかにしてしまう自分にとって、このスクール企画はとても興味深いものでした。

    一時期、ちゃんと時間を取ってスクールに通おうかなと思った時もあったのですが、さすがに仕事を長期休んで勉強するというのは現実的には難しい。ならば毎日ちゃんと時間を取って勉強すればいだけなのですが、自分の性格のせいもあってなかなかそういう時間を確保できずに月日だけが流れていくのが今まででした。

    その点この企画はオフラインで集まる日もありますが基本的にはオンラインであるため時間を取りやすく、自習式ではないスパルタ制とのことなのでついつい学習を怠るということもなさそう(というかあったら退会ですな)。そして何より完全初心者に特化しており、自分がきちんと最初に学んでおこうと思っていてJavaScriptのみ、というのも参加に向けて背中を押された理由でした。

    聞けば413名もの応募があり、その中から絞られた10名ということで、今回参加できなかった方の分までしっかり成果を出す責務を感じつつ、一方で参加できなかった人もそれはそれでプログラミング学習の意欲が高まっているようで、アウトプットとしてはむしろ参加できなかった人のほうがいいものができてしまうんじゃないかという点でもいい意味でプレッシャーを感じております。なんというか俺たちのフィールドでいう日本代表とリザーブ・ドッグス的な。

    ここから3カ月の学習を通じてどんなものができるのか、むしろアウトプット以前に退会の、憂き目に遭ってしまうのか、はたまた「このサービスが作れたのはドットインストールのおかげですね」とドヤ顔でインタビューに答えられる日が来るのか、期待と不安に駆られながらまずはキックオフに参加してきたいと思います。