はじめに
正直に言います。
パソコンを開いたらやることといえば...
- YouTube を見る
- 「寿司打」or 「夜の森タイピング」(※残念ながら2020年末に公開終了) でひたすらタイピング
...くらいでした。
Word も Excel も最低限しか触ったことがない、完全なる素人。
そんな私が、ある日ふと思ったんです。
「プログラミングってなんかカッコよくない？」
「食いっぱぐれないスキルっていいよね」
そう、完全にミーハー心だけで Web 制作に足を突っ込みました。
初めてのWeb制作、独学チャレンジ
近所の閉店間近のTSUTAYAにて、数少ない技術書の中から一番わかりやすそうだった
HTML & CSS と Webデザインが1冊できちんと身につく本 を購入。
これを片手に独学で作ったのがこちら。
処女作 「Utopia Trip」
コンセプト
「架空の国の観光情報サイト」
最初は地元観光サイトを真似しようと思ったのですが、絵面のパンチが弱くてテンションが上がらない...。
そこで Unsplash (フリー写真サイト) から「映える」写真を拝借し、技術力より見映えで勝負する戦法に！
テキストも全部英語にしてオシャレ感を出していますが、内容は完全にデマ (笑)
しかもコードより「架空の国の設定作り」にハマってしまい、気づけば一日中英文を考えていただけ...なんて日もありました。
AI先生に質問攻め
JavaScriptで動きをつけるあたりから、限界が来ました。
調べても分からないので、AI 先生に相談。
「このコードのこの部分って、何してるんですか？」
「ふむふむ、じゃあここはこうしているという認識であっていますか？」
「ここが動かないんですけど、どこが悪そうですか？」
「じゃあ、ここをこうしたらコードの書き方としてはキレイですか？」
という感じで、しつこいくらい壁打ち。
AI先生は文句ひとつ言わず、受け答えしてくれるので頭が上がりません。
たまに丸ごとコードを投げて泣きつくこともありましたが、最初から全部頼ると達成感が薄れる気がして、できるだけ「自力で理解してから次へ」スタンスを貫きました。
進め方は、ざっくり言うとこんな感じでした。
1. 真似したいサイトを見つける
2. デベロッパーツール で中身を覗いて「へぇ～こうなってるんだ」と感心する
3. 分からない動きがあれば、まずは名前を調べる (例: スライダー、カルーセル 等)
4. それでも分からなければ AI 先生に泣きつく
こんなループをひたすら繰り返す感じです。
終盤に知って絶望した VS Code の神機能
私は VS Codeで、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
この基本構造の雛形を毎回「ベタ打ち」していたのですが...
実は「! → Tabで 雛型が一瞬で出る」と知ったのは、制作も終盤になってからでした。
(※Emmetという機能で、自動補完が使えます。VS Codeに標準搭載されています。)
...いや、もっと早く教えてよ。
初心者プチエピソード
このサイトを作ったことで、
「なんか私、Webサイト作れるんだけど、むふふ」とすぐ調子に乗りました。
今思えば、HTMLとCSSをちょっと触った程度でなにを鼻の下伸ばしてんだよ、って感じですが、当時の私は怖いもの知らず。
この処女作サイトをポートフォリオ代わりに、ソフトウェア会社の面接に挑戦することに。
そして迎えた面接当日。
面接官： 「フレームワークも使わずに書いたの？」
私： 「はい！全部、自力で作成しました！」
(頭の中：フレームワークって何？？)
ほらみろ、なんも知らんやないか (笑)
初心者あるあるですよね...？（震え声）
(※ フレームワークとは「効率よく開発できる仕組み・ひな型」のこと)
学んだこと・気付いたこと
・なんにも知らない素人でも、とりあえず手を動かせばサイトは作れる
→ 「完璧な準備より、まず動くのが大事」
・分からないことは調べたり、AIに壁打ちしてれば何とかなる
→ 「聞き方を工夫すると理解も深まる」
制作中には「もっとこうしたい」と欲が出て、調べてはつまづくの繰り返しでした。
途中で「全然できない、向いてないかも」と思う瞬間も正直ありました。
それでも粘って形にできた時の達成感は、もうセロトニンがドバドバです。
おわりに
YouTubeとタイピングゲームくらいしかPCを使えなかった私でも、独学でそれっぽいWebサイトを作ることができました。
つまり 誰でもできます✨
もし昔の私のようにPCを宝の持ち腐れにしているが、プログラミングに興味がある方には、「寿司打」でキーボードをカタカタ鳴らすよりコーディングでカタカタしてる方がめちゃかっこいいぞ！と言いたいです (笑)
次からは「Flutterに初挑戦してコケまくる過程」(現在進行形) を赤裸々に書いていきます。