見出し画像

これまでのHello WorldとこれからのHello World - 1

tomixy

2023年1月25日をもって、はじめてHello Worldプログラムを書いた日から2年が経った。
気まぐれで飽き性の私の興味が、プログラミングという領域の中で収まり続けていることが割と奇跡。

とはいえプログラミングの世界の中ではかなりいろいろな分野を遊び歩いてきたので、3年生プログラマの割には新たな技術にHello Worldした機会が尋常じゃないほど多い（はず）。

これまでHello Worldしてきた技術を振り返りつつ、今後どんな技術に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を触る気にはならなかった。

しかし、いい加減コンパスやトレースシートを駆使した手書きでの図解制作に辟易し、GeoGebraという教育系作図ソフトウェアを触り始める。

英単語ベースのコマンドには最初からあまり抵抗がなくて、むしろ一行のコマンドで一つの図形や処理を実現できることに感動。

GeoGebraのコマンドで遊ぶ中で、英語ドキュメントを読むことも当たり前になった。

…Sequenceコマンド懐かしい…

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

Hello LaTeX !! （2020年7月）

GeoGebraを導入することで、図解制作のデジタル化を実現。
しかし解説書自体は依然として手書き。GeoGebraで書いた図をjpegエクスポートして、印刷して、ノートに貼り付けて、…という逆にめんどくさい作業フローが生じていた。

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

前々からLaTeXに興味があった。
大学数学を齧っていたので、理系大学生がLaTeXで論文を書いていることを知っていたし、実際、ClearnoteやTwitterで話すようになった大学生や高専生がLaTeXを使いこなしているのを見て、かっこいいな〜と憧れていた。

Hello LaTeX !! は、Hello コマンドプロンプト!! でもある。

とにかく環境構築がめんどくさい。

「パスを通す」ってなんだろう？と思いながら、見よう見まねで黒い画面を操作していた。それだけでなんか自分かっこいいな、という優越感があったけど…（プログラミング初心者あるある）

上の記事がはじめての環境構築時のメモ。懐かしい！！初々しい！！

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

LaTeX界隈で遊んでいた期間は結構長い。
ガチ勢によるQiita記事にはついていけなかったが、CTANを漁っていろいろなパッケージで遊んだし、CTANに無いものは自分でつくった。

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

少ないLaTeXコードで複雑な文書を作成する、その目的は変わらない。
TeX言語がわかれば、expl3が書けたら、実現する手段は一気に増えるだろう。
LaTeXで遊び続けようにも、プログラミングがわからない以上、ひどく不自由でもどかしい。

Hello expl3 !! （2020年12月）

そんなわけで、expl3を勉強しようとしてみた。

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

スコープ、モジュール、型、グローバル変数とローカル変数、真偽値、浮動小数点数、…そんな単語の意味すら一つもわからない人間が立ち入っていい領域ではない。

そして正直、QiitaやTwitter等で有識者の意見を聞く限り、TeX言語とexpl3をはじめてのプログラミング言語に選ぶのはあり得ない行為だと薄々察していた。

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

Hello C !! （2021年1月）

C言語を選んだのは、Clearnote時代から交流があったたくのろじぃさんが、わかりやすいC言語学習教材を公開していたから。（ここだけの話だが、プログラミングへの憧れ ＝ たくのろじぃさんへの憧れ だったのだ…そもそも。）

たくのろじぃさんのC言語入門スライドを見つつ、半月かけて明解C言語入門編を読んだ。

コンソールに計算結果を表示しましょう、それだけでも楽しかった当時。

Hello Python !! （2021年2月）

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

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

クジラ飛行机先生の書籍は興味の種蒔きに最適で、いろいろな活用分野に広く触れることができる。
次はこれをもっと掘り下げてみよう、そういう好奇心がたくさん生まれる。

とりあえずコンソールプログラムを卒業して、形のあるモノを作ってみたかったので、GUIアプリを作れたことが本当に嬉しかった。

書籍ではtkinterしか紹介されていなかったが、読了後にはPySimpleGUIを使って、人生初の自力自作アプリ、簡易家計簿デスクトップアプリを作成。

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

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

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

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

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

おめでとうございます。

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

Hello Git/GitHub !! （2021年2月）

PySimpleGUIの開発者さんにコードを見てもらうため、慌ててGitHubに入門することになった私。
もう解説サイト見ても何言ってるのか全くわからなかったので、見よう見まねでアカウントつくって、リポジトリつくって、remote addして、addして、commitして、pushするまでに5時間を要した。

当時のリポジトリ！（※今とはアカウントが違うよ ← なんで？）
README書いてるのえらい…！この頃の私にPR書かせたら今の私より優秀なのでは…？（成長しろ）

初心者コード見られるのめちゃ恥ずかしかったんだが…

和訳

恥ずかしがることはないだろ！？すごい！なかなかすごいですねー。 readmeには画像もありますね。素晴らしい仕事です。本当にありがとうございます。誰もが互いに学ぶべきことがたくさんあります。私もあなたから学びます。

いやー嬉しかったなあこのとき。
プログラマの世界ってこんなに温かいコミュニティなんだ…！と感動して、私もITの世界に入りたいな〜と意識し始める。

Hello HTML/CSS !! （2021年2月）

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

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

この本を3日かけて写経して、初めてWebサイト制作を体験。

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

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


最初にfloat時代にタイムスリップしたおかげで、flexやgridを学んだときの感動はすごかった。

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

Hello RegExp !! （2021年3月）

前述したクジラ飛行机さんのPython本で、一番理解不能だったのが正規表現。
わからないまま保留にするのは癪だったので、ここで丸2日かけて一旦正規表現をガッツリ学んだ。

Hello jQuery !! （2021年3月）

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

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

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

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

Hello Sass !! （2021年3月）

YouTubeを眺めていたとき、「2時間でWebサイトをつくる」的な趣旨の動画が不意に流れてきた。
その動画のコーディング風景を見て、衝撃を受けた。CSSっぽいのに、ネストされた奇妙なコード。
ここで私はSassの存在を知ることになる。面白そうなので勉強してみた。

Hello ShellScript !! （2021年3月）

Webデザイン勉強の中、唐突にShellScriptに脱線。

この頃から、環境構築自動化のためのスクリプトをよく書くようになる。

--- 0 → 1 （2021年5月）

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

あくまでもまだ学んでいる段階であることを伝えた上で、双方合意。お互いのやってみたいことを具現化するチャンスとして、共同プロジェクトが始動した。
私にとっては、要望に沿ってデザインし、実装し、デプロイまで、実案件に近い一連の流れを経験させてもらえることになった。

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

お互い本業の合間を縫って、TwitterのDMで議論しながら制作を進めた。

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

Hello WordPress/PHP !! （2021年5月）

CMSに関しては、WordPressの力を借りることにした。

今思えば、当時もすでにWordPressはローコードでWebサイトを構築できるツール、という認識だったのかもしれない。
が、普通にゴリゴリコードを書いて自作テーマをつくっていた。
プラグインもなるべく使いたくなくて、カスタム投稿タイプの登録やら、記事の階層関係の管理やら、URL変換やら、権限に応じた管理画面の表示制御やら、セキュリティ対策やら、雑多な処理をhookで手書きしまくった結果、functions.phpは1000行超に及んだ。

いろいろとユーティリティもつくった。
埋め込み用のYouTube動画URLをいちいち取得して貼り付けるのはめんどくさそうだったので、アドレスバー等で取得できる通常の動画URLを入力すれば、自動的に埋め込み用URLに変換されるようにしたりとか。

BBSはさすがに既存のプラグインを使うつもりでいたが…リアルタイム性を持たせたかったり、画像添付を1枚のみ可能にしたかったり、いいねボタンを搭載したかったり、いまいち要件に合致するものがなかったので結局プラグイン自体を自作。
さすがにWeb Socketは使っていない。チャットほど相手のレスポンスが早いわけではないので、自分の投稿が即座に表示される（投稿成功したことがわかる）ように画面更新をするだけ。全部jQueryで頑張った。無茶だった。

入力値検証を組むにあたって、正規表現のガチ勉強がここで生きることになる。

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

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

continue;

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

本格的にWebプログラマを目指そうと決めたこの日以降の話は、また別の投稿で。既に長すぎ！！


この記事が気に入ったらサポートをしてみませんか？