# 私的Webサイト制作part.3

書いていたらどんどん長くなっていて、気づけばpart.3……。今回はこれから個性派文庫で使っていきたいツール、技術がメインとなります。

# penpotに出会う

Webサイト制作の一環でWebデザインというのは避けては通れない単語だと思います。要するのWebサイトの見た目やユーザーのページ遷移の導線などをデザインすることです。

このときに必ずと言っていいほど使われているツールがAdobe XDとFigmaです。どちらもWebデザインをするプロトタイピングツールとか呼ばれるものです。

ですが僕はケチで、極力お金は払いたくないし、サブスクなんかなおさらで（無料プランはあるけれども…）、良さげな代替ツールを探していました。penpotを見つけるまでは手書きだったりInkscapeだったりを使っていました。そんなある日に見つけたのがpenpotです。penpotはFigmaと同じWebアプリで、OSSとして開発されているプロジェクトです。何が素晴らしいかって、アカウントを作れば無料ですべての機能が開放されていることです。さらにはセルフホスティングも可能となっています。

現在はまだあまり活用出来てないですが（大体なんとなくのイメージを持って作り始めてなんかそれっぽいデザインのものができちゃう）、次の個性派文庫のリニューアルや、FFRのWebサイトの作り直しとかで使っていけたら良いなと思っています。

# タイポグラフィに出会う

これもGoogle検索アプリのニュースで知った気がします。

タイポグラフィはWebサイト制作そのものというよりは、デザイン寄りの話です。ブログみたいな見出しがあって本文があるような文章をデザインしようと思うと、見出しの文字サイズとか字間行間、段落間のアキの大きさをどんなものにするか迷うと思います。それに対する解決策であり経験則がタイポグラフィとなります。

# 何が良いのよ

ちょっと長い文章をデザインするときに、カッコよく魅せることが出来ます。長い文章を本みたいに組版したり、Webサイトに載せたりするときにカッコよくなります。また、タイポグラフィを学ぶと一定のルールに則ってデザインすれば良くなるので、考える手間が減って楽に早くデザインできて、更により高次元で考えられるようになります。

# どうやって学んだのよ

とりあえず、その手の解説記事を色々読んで、インプットして、実際にやる機会になったら解説記事を読みながら実践していったって感じです。Web組版とかタイポグラフィって検索して出てきた記事や、Qiitaのデザイン寄りの記事を参考にしました。読んで設定すればそんな感じに見えるようになってくるので結構簡単に出来ます。

# JSに入門

JavaScriptについて今まで全く言及していませんでしたが、大学生になった今の今まであまりちゃんと触っていませんでした。謎の苦手意識がありました。

ここにも書きましたが、サークルでお触りする機会があって入門することになりました。

# 何使って学んだのよ

最初はut.code(); Learnでかなり適当に学びました。サークル全体の方針でとりあえず一通りやっとけって感じで取り組む機会があったって感じです。このサイトは、Web開発に必要な基礎を簡単に一通り学べるようになっています。環境構築からしっかり解説されているのが良いです。各セクションの最後には練習問題がついていて、実践できるようになっています。JS以外の内容は殆ど既知の内容だったので、一緒に取り組んだサークルの仲間に教えながら、というかJSについてもPythonとかの知識を応用して教えてたりしました。変数とか制御構造とかは結局一緒なので。

サークルでut.code(); Learnをやりながら、大学図書館でJSの分厚い入門書を借りたりもしました。この本では、JSの理解というよりもむしろ、プログラミング言語、特に変数と関数に関する理解が大きく変わりました。全部は読み切れない、というか読んでないですが…

その後、サークル内でハッカソン的なイベントがあって、そのときにrishu-appを作ったって感じです。ここで初めてJSを実践して、非同期に苦しみながらも、JSを使った初めての成果物が出来ました。

作っている間は、割と初期はut.code(); Learnを参照したり、MDNを眺めたりしました。チートシートとかも探して使ったりもしました。非同期を理解するのに苦しんでいるときはQiitaとかZennの解説記事を頑張って読んだりしました。ついでに非同期は、rishu-appが出来た後に改めて学び直したら理解が進みました。

私的プログラミング史でもそうですが、実際に手を動かしながら何か作ったら、必要なことは否応なく学ぶので、飛躍的に成長しました。ただ解説記事を読むだけ、ドキュメントを読むだけより何か作ったほうが成長しますね。アウトプットを意識した学習をすると良いのではないかと思います。

# flexboxとgridとoverflowをなんとなく理解

rishu-appを作ったときにやっとflexboxとgridとoverflowをなんとなく理解できました。なんか今更ですけど……

# Next.jsに出会う

Next.js自体はサークルに入ろうとした時点で、知っていました。というかサークルの公式サイトがNext.jsで動いていたので……。

Next.jsはまだそこまで深く触っていないので、あまり語れることはないですが、1つあげるなら何かと早い/速いことが素晴らしいですね。コマンド一発でSPAなプロジェクトが立ち上がって簡単速い、SSRやプリフェッチなどでサイトの動作が爆速、Vercelにデプロイすれば設定とかをしなくても動くから楽、って感じです。

rishu-appの書き換えで、Next.jsを採用しましたが、SSRのお陰で従来のやつよりデータの表示がめちゃくちゃ早くなりました。単なる簡単なWebサイトを作るだけだと対して恩恵はないかもしれませんが、何百ページもあるような大規模なサイトだったり、バックエンドとWeb APIで連携するWebアプリとかを構築するのに良いですね。

# 今後の展望

penpotとかタイポグラフィとかNext.jsとか、まだ個性派文庫で使っていないことやものを使って、個性派文庫をリニューアルしたいなっていうのが最初のステップかなと思っています。

Webサイト制作というかもはやWebアプリ制作になっちゃいますけど、データベースとかAPIとかのバックエンドも色々やっていきたいです。

# まとめ

もともとこの記事って、Webサイト制作を何でどうやって学んだかをまとめようと思って書き始めてたわけですけど、自伝的に書くのがあまりにも楽しくてついつい自分の体験談をたくさん書いてしまいました。ただ、書いていると、ここのサイトが良い！みたいなことがあまり書けないなという代わりに、こういうやり方が個人的には効果的だったよ、ということに気づきました。書き出してみると、

実際に手を動かしながら何か作ってみる
作りながら必要なことを学ぶ

って感じでしょうか？実際作ってみると飛躍的に成長すると実感することがあるんですよね。

ただ、何か作ろう！と言っても、何を作ろう？ってなってしまいます。僕なんかだと、個性派文庫とかrishu-appみたいな便利な学習用サンドボックスみたいなもので実践を積んでいます。しかしながら、そんな都合よくそういうものが見つかるわけではないので、いくつか代わりになりそうなものを提案します。

ブログ
todoアプリ
個性派文庫やrishu-appの開発に参加する

文章を書くのが好きなら、そのための下地としてブログサイトを構築してみると良いと思います。WordPressでPHPを極めてもいいし、JekyllやHugoといったSSGのテーマを自作してもいいし、それこそNext.jsで爆速サイトを構築してもいいです。

todoアプリはエンジニア界隈でよく言われるチュートリアルとして扱われる題材です。どちらかと言うとWebアプリっぽい感じです。ついでに僕はやったことがないです。

最後の、開発に参加するというのは、ちょっと宣伝になっちゃいますが、どちらも現在公開レポジトリで開発していて（個性派文庫はリニューアルしたら非公開になるかもだけど）一緒にやってくれる人がいたら面白いなぁと思って提案しています。他の人と一緒に開発するので、いろんな影響を受けられていい経験になると思います。

まぁとりあえず、なんでも良いので何かを作ってください。きっとそれがあなたを成長させてくれるはずです。