はじめに
自分は社内SEとデザイナーの中間くらいの存在ですが、IT業界に関わる身としては、どんな職種にせよ業務外でのスキルアップも肝心となり、小規模でも実際にWebサイトやアプリを制作していくのが知識や経験を深める上で重要かと思います。
が、どうしてもサーバー契約とかFTPクライアントでのサイト更新（少し前まで「FFFTP」を使ってました…）が面倒に感じる部分もあり、途中で自然消滅したり、公開前に放棄してしまうことがありました。
そんな中、WebホスティングサービスのVercelを知り、
Gitにpushだけで更新できるという利便性に感動。
Pythonのスクレイピングなどを用いて、自分用の情報検索ツールを開発していましたが、ふわぁ〜っとしか理解していないJavaScriptやNext.js、それに最近盛り上がりを見せているfigmaを学び直そうと思い、何年ぶりかのリニューアルとなるポートフォリオ制作に取り組みました。
振り返りがてら学習方法を紹介していきつつ、今後の学習予定をまとめていきます。
やる前の知識
- デザインソフトは基本的にIllustrator、Photoshop、XDなどを利用。
- html、CSSはおおよその使い方は分かる。不明点はつど調べている。
- JavaScriptはすでにあるコードの編集のみを、雰囲気でやっている。
覚えた知識
- Figmaは一通り使える。
- JavaScriptはDOM操作はおおよそできる。
- Next.jsの基本の記法やディレクトリ構成は理解している。
- CSSのflexboxとGridを使い分けられる（想定外の学習）。
JavaScript学習編
今回のポートフォリオ作成とは直接の関連性はないですが、改めて学ぶこととしました。
理由としては、APIの利用だけではなく、インタラクティブな動的要素を付与するときに
JavaScriptの利用が必要になってきて、グラフィカルなサイトには必須と思ったからです。
学び方としては、youtubeでプログラミング講座を公開されているチャンネル、「しまぶーのIT大学」さんの【基礎から学ぶ JavaScript 入門】が非常に分かりやすく参考にさせて頂きました。
基本的にはNotionに動画埋込で再生しつつ、Notion内でそのままメモを取って学習しました。
これならギリ1画面に収まるので喫茶店でも学習しやすい。
動画視聴後にはローカル内にテストページを作成し、実践でJavaScriptの挙動に慣れていってみたりしました。
まだ全然さわりの部分ですが、DOM操作はなんとなくわかってきたため、一旦JavaScriptは切り上げて次へ進みました。
なお、「とは言えJavaScriptで何ができるんだ？」という気持ちが微妙にあったため、「JavaScriptコードレシピ集」を購入しています。
Next.js学習編
Next.jsに関しても「しまぶーのIT大学」さんの動画で解説して下さっていたため、こちらもNotionでメモを取るというフローをとっております。
ただし、動画だけでなく、落ち着いて読めるものも欲しいと感じ、「作って学ぶ Next.js/React Webサイト構築」という本も購入しました。
ただ、今回、コンポーネントの概要や基本的な記法は理解したものの、React Hooksのあたりは理解・実践ができていないので引き続き学びたいと思います…！
Figma学習編
Adobe帝国時代に終止符を打つ、革命軍Figma。
オブジェクトの移動とかそういった基本部分はわかっていたものの、
コンポーネントやインスタンス、オートレイアウトといった部分は今回初めて学びました。
参考にさせて頂いた資料は、書籍「Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜」とyoutubeのヒロコードさんの動画です。
ちなみにこのタイミングでFigmaのアップデートがありましたが、ヒロコードさんが解説してくれてたので助かりました。
それらで学習させて頂き、ポートフォリオのサイトデザインとして下記を作成。
正直言えばfigmaの使い方よりもデザインに苦戦した感はあります。
商業デザインはターゲットを意識すれば自ずとセオリーも決まってくるものですが、ポートフォリオとなると「自分はどういうものが好きなんだ？」と自問自答することになるので日々のインプットと自分自身の理解が重要…！
完成
Next.jsにてコーディングし、サイトとしては一応完成しました。
※あえて画質は落としておりますｗ
が、とりあえず動く＆完璧を求めて時間をかけすぎないことを優先しており、荒い部分もあるため、まだ色々（レスポンシブ対応とか）行わなきゃいけなさそうです_(┐「ε:)_
反省＆感想
行っている中で感じたことの一部です。
- 「しまぶーのIT大学」さんの解説はめちゃくちゃ分かりやすい。
- 過去参考書を何冊も投げてきたが、全然挫折せずに進められた
- 一方で落ち着いて読むことのできる書籍も学習が少し進んだ所で整理に役立つ
- FigmaプラグインのUnsplash神すぎる
- jsxで学んだが実際使っているのがtsxであり、ファイル名などよく分からない部分多々。
- 最初からコンポーネントを分けると書く切替が大変になるため、最初に書ききってから分けたけどこれで正しいのか…？
- Nextはもっとラクにコードを書けそうな気がしている。ClassName複数の時とか、画像のサイズ指定とか。
- Figmaのオートレイアウトを中途半端に使ってたが、もっと突き詰めればほぼ自動でコーディングできる？
- 現状でも取り敢えずスタイルをコピーすればそれなりには見れるので便利。小数点四捨五入できないかな
- CSSはグリッドジェネレーターとかもあるので活用すると複雑なレイアウトも早くなる
- VScodeのコード補完があんまり効いて無くて結構手打ちすることになったので見直したい
さいごに
学習メモであり、まとまり無くてすみません。
今だとNext.jsにhtmlを書いているのに過ぎない感じはあるので、
使いこなせるよう学習を進めていきます。
とは言え、Vercelとの組み合わせによる公開までのラクさは全Web開発者に味わってほしい所存…！