前回までこのブログでは、制作させていただいた『クリエイター(絵描き) 夜々』さんのサイト制作について説明してきました。
その過程でSpineやAnimateCCを使用したWebアニメーションで、作品の世界観を表現することはある程度のレベルで形にすることができたとは思っています。
しかし、細かい部分を見ると思い通りに作ることができなかった部分も多く、今の自分のスキルセットでできることには限界を感じています。
なので、最近はフロントエンドの技術を学び表現力をあげたい！と思うことが多くなりました。
今後、SPA(Single Page Application)のようなシームレスな画面遷移をさせたり、インタラクティブなUIを取り入れたWebサイトを作りたい！と考えています。
とはいえ、全くのフロントエンド初心者なのでそもそも何からやれば…
参考にしたい方のGitHubのソースを見ても見たことない拡張子ばかりだし、yui540さんのCSSアニメーション講座のようなチュートリアル形式のものを参考にさせていただこうにも、「pug？、sass？、babel？」みたいな感じで明らかな前提知識不足でサンプルのソースすら動かせない…
ググってみて、「npmを使うためにはnode.jsのインストールが必要」と分かったけど、「node.jsってサーバサイドのJavaScriptだから、できる気がしない…」と思って手が止まるみたいな；
でも色々ググりながら、とりあえずインストールだけでもやってみて色々手を動かしてみた結果、例えばNode.jsを使いこなせるようになるのはメチャ難しそうだけど、「npmを使うだけならNode.jsをダウンロードして、コマンドプロンプトでインストール設定するだけ」ということがわかりました。
なので、スキルとしてしっかり習得することは難しくても、自分のように他の方が作られたサンプルを理解する程度の知識を得るのは、それほど難しくないし、学習コストも思っていたほど高くはないのかなと感じています！。
このブログ記事[フロントエンド未経験Webクリエイターが0から学んだスキルの覚書]では、全くのフロントエンド未経験の筆者が色々試行錯誤しながら、フロントエンド技術を１歩ずつ学んでいく過程を書いていけたらと考えています。
やっぱり、まずは絶対避けては通れないGit(フロントエンドエンジニアの方が公開してくださっているサンプルファイルは必ずGitHub上に公開されている)から、覚書程度に学んだことを書いていきたい！と考えています。
そんな中まさに知りたかった情報は正にこれ！というYoutube動画+ブログ記事を見つけました！
ご自身が一流のWebエンジニアでありながら、教えることのプロフェショナルでもある『ともすた代表のたにぐち まこと』さんが書かれた以下Youtube動画+記事です。
※Youtubeとブログ記事の内容は関連していますので、Youtubeを見てからブログを読むとより理解が深まるかと思います。
次回はフロントエンドといえば、まずは『Git(ギット)』というイメージがあるので、Gitを0から学んだ覚書を書いていこうと考えています。
ちなみに次の記事で書いていくGitもたにぐち まことさんのYoutube講座を大いに参考にさせていただいています。