プログラミングをやってきた人には誰にでもあるだろう。初めてのHello World !!が。
ふらりふらりとWebに辿り着き、そこにはじめてモノを生み出すことで本気が芽生えるまでの話。

Hello Word !!(2017年)

紛らわしいけど、WorldじゃなくてWord。MicrosoftのWord。

小中学生時代はずっと物書きに憧れていて、友達が鬼ごっこしている横でずっと何かを書いているような子供だった。

ずっと紙とペンを愛してきたが、ついに執筆ツールをデジタルに切り替えたのが中学3年の頃(2017年)。iPhoneとデザリングできるキーボードを買って、iOS版のWordでいろいろ書くようになった。

まだPCは持っていなかったけれど、これがデジタル世界との最初の接点。

iPhoneの小さいタッチパネルだから無理もないが、範囲を選択して、その範囲の文字のスタイルをボタン操作で変える、という操作が本当にめんどくさかった。
すべての操作を文字入力で完結させたいという願望がこの当時から芽生えていたので、プログラムへの興味自体はおそらくここから始まっている。

Hello GeoGebra !!(2020年1月)

授業の進度に縛られず、興味のある分野を深めて、自由に先取り独学したいという理由で、高校は通信制を選んだ。

通信制高校の課題だけでは大学受験に到底届かないので、高1の頃から受験参考書に手を出していたのだが、そのわかりやすさに感動して、特に図解を駆使する数学の予備校講師に強い憧れを抱くように。

それ以来、自分なりの図解をつくって、それらに解説を添えたMY教科書制作が趣味となった。
高1が終わる3月、自分なりに咀嚼して表現したものに対するフィードバックが欲しくなって、Clearnoteというノート共有サービスに投稿を始める。そして、その2ヶ月後に運営から声がかかり、有料販売を開始した。

通信制高校の学習にはPCが必要だったので、仕方なく自分用のPCを手にした私だが、当時はデジタルへの苦手意識が強く、特に学校の課題以外でPCを触る気にはならなかった。

しかし、だんだんとアナログでのMY教科書制作、コンパスやトレースシートを駆使した手書きでの図版作成に辟易し、GeoGebraという教育系作図ソフトウェアを触り始める。

コマンドに対しては最初からあまり抵抗がなくて、むしろ一行のコマンドで一つの図形や処理を実現できることに感動した。
GeoGebraのコマンドで遊ぶ中で、英語ドキュメントを読むことも当たり前になった。

ちなみにtomixyアイコン(白い箱)もGeoGebra製。

Hello LaTeX !!(2020年7月)

GeoGebraを使い始めたことで、図版制作のデジタル化を実現。
しかし、MY教科書自体は依然として手書き。GeoGebraで書いた図を画像としてエクスポートして、印刷して、ノートに貼り付けて、…という逆にめんどくさい作業フローが生じていた。

ここまで来ると、解説書制作全体をデジタル完結させたくなるのは当然の発想で、組版に手を出し始めた。

学部レベルの内容に関するMY教科書も制作・公開していたことで、大学生や高専生の方との交流があった。
理系大学生がLaTeXで論文を書いていることを知っていて、かっこいいな〜とずっと憧れていた。

そんな期待に満ちてLaTeXに入門したら、最初に待ち構えていたのはHello LaTeX !!ではなくHello ターミナル !!だった。

「パスを通す」という概念も知らず、行き当たりばったりで黒い画面を操作していた。それだけでなんか自分かっこいいな、という優越感があったけど…(プログラミング初心者あるある)

そしてこの記事がはじめての環境構築時のメモ。懐かしい!!

エラーで血反吐を吐く機会も当然無数にあったが、私にとってLaTeXは、これまでの不満をすべて解消してくれるものだった。
文字列(コード)だけでスタイルを一括制御できる。図解だってGeoGebraでつくったものをわざわざ持ってこなくても、texファイルにTikZで直接書けばいい。複雑な有機化合物構造式だって、数行のコードで綺麗に出力できるパッケージがある。
キャッチアップに時間はかかるが、作業時間も筆記用具にかける費用も大幅に削減された。

LaTeXで遊んでいた期間は結構長い。
有識者の方のQiita記事にはついていけなかったが、CTANを漁っていろいろなパッケージで遊んだし、CTANに無いものは自分でつくった。

自作マクロや自作パッケージをつくる上での学習リソースは、主にCTANの既存パッケージ。
ある程度大きなパッケージのコードを読んでいると、見慣れない見た目のコードに遭遇することがある。それはTeX言語だったり、expl3というもの(TeX処理系で動作する新星プログラミング言語…語弊があるかも?)だったり。

Hello expl3 !!(2020年12月)

少ないLaTeXコードで複雑な文書を作成する、その目的はずっと変わらない。
それまでは表層のLaTeXしか触れなかったが、もっと深く潜って、TeX言語を身につけたら、expl3が書けたら、実現する手段は一気に増えるだろう。
LaTeXで遊び続けようにも、プログラミングがわからない以上、ひどく不自由でもどかしく感じ始めたのがこの頃だった。

そんなわけで、expl3を勉強しようと試みたのだが…

expl3は、学習リソースも少ないし、情報があったとしても、プログラミングの主要概念や用語がてんこ盛り。(そもそも、TeX言語がわからなければ理解不能な要素が多々あって、正直TeX言語に関しては諦めの境地にいた。)

スコープ、モジュール、型、グローバル変数とローカル変数、真偽値、浮動小数点数、…そんな単語の意味すら一つもわからない人間が、立ち入っていい領域ではないと思った。
QiitaやTwitter等で有識者の意見を聞く限り、TeX言語とexpl3をはじめてのプログラミング言語に選ぶのはあり得ない行為だとも薄々察していた。

スコープがなんぞや型がなんぞや、まずはそういう概念を学ぶことが必要だし、そのためには、もっと日本語の学習教材が豊富で可読性がマシな、メジャープログラミング言語を学ぼうと思い立った。

Hello C言語 !! (2021年1月)

C言語を選んだのは、Clearnote時代から交流があったたくのろじぃさんが、わかりやすいC言語学習教材を公開していたから。(実は、私のプログラミングへの憧れは、たくのろじぃさんへの憧れによる部分がとても大きい。)

たくのろじぃさんのC言語入門スライドを見つつ、半月かけて明解C言語入門編を写経した。「コンソールに計算結果を表示しましょう」、それだけでも楽しかった当時。

Hello Python !!(2021年2月)

C言語だけ学んでも、「モジュールとはなんぞや」「オブジェクト指向とはなんぞや」に対する答えが出ないような気がしていて、早々に別言語に乗り換えた。

数あるプログラミングの中でPythonを選んだのは、本のラインナップを見る限り、数学演算やグラフ作成に活用できそうだったこと、そしてtexファイルに埋め込むことができると耳にしたから。

クジラ飛行机先生の実践力を身につける Pythonの教科書という本で、Pythonの門をくぐった。
クジラ飛行机先生の書籍には「興味の種蒔き」がたくさん散りばめられていて、いろいろな活用分野に広く触れることができる。次はこれをもっと掘り下げてみよう、そういう好奇心がたくさん生まれる。こういう執筆者になりたいなあ…と憧れている。

書籍ではtkinterしか紹介されていなかったが、読了後にはPySimpleGUIを使って、人生初の自力自作アプリ、簡易家計簿デスクトップアプリを作ってみた。
とりあえずC言語のコンソールプログラムを卒業して、形のあるモノを作ってみたかったので、PythonでGUIアプリを作れたときは本当に嬉しかった。

そして、完成品プレビューをTwitterに投稿したところ、なんと…PySimpleGUIの開発者の方からリプライが来た…!!

You started learning Python 10 days ago? You learned the language and built a GUI after a couple more days?

That’s remarkable.

Would like to see your code to understand a bit more about the refactoring reduction you achieved. Do you have the code in a Repo?

Congratulations!

自分用に和訳を貼っておく。

10日前にPythonの学習を開始しましたか? さらに数日後に言語を習得し、GUIを構築したのですか?

それは驚くべきことです。

あなたが達成したリファクタリングの削減についてもう少し理解するために、あなたのコードを見てみたいです。 そのコードはRepoにありますか?

おめでとうございます!

つまり、「コード見せて!リポジトリにある?」と言われたのだが、はて、リポジトリとは??状態の私…

Hello Git/GitHub !!(2021年2月)

PySimpleGUIの開発者さんにコードを見てもらうため、慌ててGitHubに入門。

もう解説サイトを見ても当時は何もわからなかったので、見よう見まねでアカウントを作って、リポジトリを作って、remote addして、addして、commitして、pushするまでに5時間を要した。

そうして作った、当時のGitHubリポジトリ。

初心者のコードを見られるのも、とても恥ずかしかったのだが…リポジトリを共有したら、さらに次のリプライをいただいた。

You’ve got nothing to be embarrassed about! WOW! That’s quite impressive! The readme has images too. Fantastic job. Really appreciate you sharing. There’s much for everyone to learn from each other. I learn from you too.

和訳:

恥ずかしがる必要なんてないですよ! わあ! 本当に素晴らしいですね! readmeファイルには画像も載っていますね。素晴らしい仕事です。共有してくださって本当にありがとうございます。お互いに学び合うことはたくさんありますね。私もあなたから学ばせてもらっています。

嬉しかったなあ、このとき…
開発者の世界って、こんなに温かいコミュニティなんだ…!と感動して、私もその世界に入りたいな〜と意識し始めるきっかけとなった出来事だった。

Hello HTML/CSS !!(2021年2月)

前述したクジラ飛行机さんのPython本では、Webアプリ開発のチュートリアルも載っていて、そこで私は初めてHTMLを書いた。

PythonでのGUIアプリ作りも楽しかったけれど、部品のスタイルを自由にカスタマイズできないことが少しもどかしくて。
もっと自由に表示したいな〜という思いがあったので、今度はブラウザで遊ぶことにした。そうして、HTMLとCSSに入門。

作りながら学ぶ HTML/CSSデザインの教科書という本を3日かけて写経して、初めてWebサイト制作を体験。

ちなみにこの本、良い本ではあるのだけど…今考えるとレイアウトがfloat組みだったりと、古典な書籍ではある。
Webの進化の速さを知らなかった私は、出版年など何も気にしなかったのだ…

その後、今の時代はレイアウトにfloatを使うことはないと察し、最新知識を補うべく、エビスコム先生の本を読んだ。

最初にfloat時代にタイムスリップしておいたおかげで、flexgridを学んだときの感動は大きかった。

Webサイト制作が楽しくなった私は、今後はWebを深掘りしていこうと決めた。
当時は、Webデザイナーとエンジニアの違いすらわからなかったが、目指していた方向は完全にWebデザイナーだったと思う。

Hello jQuery !!(2021年3月)

最初に読んだHTML/CSSの本では、jQueryが一部使われていたけど、「ここはコピペしてね〜」という扱いだった。
しかし、ちゃんと理解して自力で自由に書けるようになりたかったので、次はjQueryを学ぶことに。

当時お世話になったのがこの本!

いや〜この本、本当に楽しくて楽しくて。
最初は図書館で読んでいたのだけど、どうしても手元に置きたくなって購入。擦り切れるまで読んでいた。後にJavaScriptの基礎を学び直したときにも、この本を何度も読み返して。
当時の私は他のjQuery本についていけなかったから、この本がなかったら挫折していたかもしれない。

それにしても、当時の私は思いもしなかっただろう。1年半後には著者の高津戸さんと小原さんと同じ会社で働いているなんて…

そして、0 -> 1 へ(2021年5月)

jQueryに慣れてきた頃、Twitterで交流のあったYoutuberさんの「そろそろ自分のサイトを持ちたい」というつぶやきを目にした私は、よかったら一緒に作りませんか?と声をかけた。

そして、お互いのやってみたいことを具現化するチャンスとして、共同プロジェクトが始動した。
要望に沿ってデザインし、実装し、デプロイまで、実案件に近い一連の流れを経験させてもらえる、大きなチャンスだった。

話を重ねるにつれて、どんどん壮大な話へと発展する。
元々は静的サイトの想定だったが、共同執筆が可能なCMSシステムを構築し、リアルタイムチャット風のBBSを搭載したいという話になり、いきなりフルスタックな開発を求められることに。
サーバーサイドのプログラムを組んだことがなかった当時、さすがに「できます!」とは即答できず、プロトタイプをつくってみてから搭載可否を検討する運びになった。

お互い本業の合間を縫って、TwitterのDMで議論しながら制作を進めた。
コンテンツ構成はT氏が企画し、それを受けて私が静的な仮サイトを作成。そのプレビューを見せて、フィードバックをいただいて、修正案を出して、…というサイクルで細かいデザインを詰めていった。

continue;

始動当初は、PHPもWordPressもSEOもAjaxも何一つ知らなかった。
そしてずっと疑問だった。if文、for文、while文、そんな単純な構文の組み合わせで、なぜさまざまなシステムを実現できるのだろう?と。

インプットを悠長にする時間はなく、知らない技術をすぐに自分のものにしてアウトプットすることが求められ続けた夏。そこでようやくプログラミングでなにかを「つくる」ビジョンが掴めた。

こうしてはじめてつくったWebシステムは、WordPressというブラックボックスの上に成り立つもの…
その現実がさらなる興味を引き立て、その内部の仕組みに迫ろうと、さらに旅は加速する。

私のWebエンジニア人生は、こんな風に始まったんだなあ…という懐古でした。初心はとても大切なものだからさ。