勉強嫌いだった過去の自分へ
このページを見る人がどれだけいるかは分かりませんが、このページは過去の私にあてた手紙のようなものです。
中学・高校と勉強を離れて落ちこぼれだった私のような人間でも、学んでいけばスキルを身につけることができます。その過程で得た気づきなどをここにまとめておきます。
Web制作の学習に必要な環境とツール
Web制作で必要となるパソコンはそこまで高性能でなくても大丈夫です。あわせて動画編集などもガッツリ行う場合はスペックが高い機種が必要になります。
- パソコン:スペックは高くなくても大丈夫
- ネット環境:サイトを公開するにはサーバーの契約が必要
- エディター:おすすめはVisual Studio Code
- ブラウザ:Google Chromeなど
- 学習用の動画:操作を理解しやすいので動画がおすすめ
Web制作の学習 - はじめのステップ
はじめは動画や本などに書いてあるコードを写すようにして入力してみる。入力ミスなどがあると思ったような結果にならないが、最初はそんなものなので必要以上に落ち込まないこと。
学習を深めていく流れ
- 見たままのコードを書き写すように入力する
- コードを入力できたときの変化をブラウザで確認する
- 内容を変えて入力してみる(色を変えたり、サイズを変えるなど)
- 思い出しながら書いてみる(つまったら教材を確認する)
- 調べながらコードを書いてみる(引き出しを増やすイメージ)
ツールの扱いに慣れる + プラグインの活用
Visual Studio Code(通称:vscode)は便利な機能が標準で備わっています。全部ゼロから1文字ずつ入力することもできますし、使い方を知っていれば労力を大幅に削減することもできます。
パソコンやツールというのは、同じように扱えば誰でも同じような結果を得られます。大事なのは知っているかどうかということと、普段から「なにかいい方法ないかな?」と考える癖を持っておくことです。
覚えておくといい知識
- Emmet(エメット)という入力方法
- ショートカットキーの活用
- プラグインの導入
プラグインは入れた瞬間からメリットを感じられるので早めに導入しておくのをおすすめします。入力方法やショートカットなどは知識を得たあと、一定の時間をかけて慣れる必要があります。その時間が苦痛でやりたがらない人が多いのですが、早めに慣れておくと後からやっておいて良かったと必ず実感できます。
参考のPDF
勉強が続く土台づくり

Web制作でもなんでもそうなのですが、学ぼうと思うと学び方を探す人が多いと思います。たしかにどんな方法で学ぶかは大事なのですが、それ以上に学ぶことに向き合える状態になる必要があります。
学ぶことに気乗りしない状態のままでは、どんなに良い教材があっても続けるのは困難です。まずは少しずつでいいので、学ぶことに向き合う時間を作っていくことです。
まずは心を慣らすことから

どうしても結果を焦って、いきなり「毎日2時間は勉強する!」と意気込んでしまいがちです。まずは自分でも「これなら楽勝!」と思えるレベルのことからはじめていきます。
私の場合で言うと、1日1回はvscodeを開いて1行コードを書いてみることからはじめました。本当に1行だけ書いて終えた日もありますし、気分が乗ってきたら追加で数行書いたりしました。
人によってはバカバカしく感じるかもしれませんが、いきなりやる気を爆発させるよりは、じっくりスロースターターで行くことが挫折を回避する秘訣です。
加速の法則

物事をはじめて挫折しやすいのは、はじめの3週間ぐらいだと感じています。そこで嫌になれば、その先もずっと嫌なのでいずれやめてしまいます。言い換えれば、はじめの3週間さえ乗り切ってしまえば、継続できる可能性がぐっと上がります。
続けていると少しずつ要領が良くなったり、ぼやっとしていたものが段々と理解できるようになってきます。この段階にくると学習するスピードが加速していきます。この段階に到達するまでの暗闇の期間を耐えられるかにかかっています。
真剣であれ、されど深刻にはなるな

はじめたばかりのときはできない状況が続くので、落ち込んでしまいがちです。慣れない分野であればあるほど、自分の出来なさに絶望します。そうなると人はどんどんとネガティブな考えになり、自分を責めたり、もっと勉強しなきゃと自分を追い込んだりします。
結果を急いだり、自分の成長が物足りなく感じるのは真剣に取り組んでいるからこそです。そこで自分を責めたり、落ち込む必要は一切ありません。基本的に何かを学ぶというのは個人種目で、比べるのは周りの人間ではなく過去の自分です。1ミリでも前進しているのであれば十分だと考えましょう。
今はまだまだかもしれないけど、このまま続けていけば時間が解決してくれる。それぐらいの気持ちで向き合っていくのが丁度良いです。ちゃんと向き合っている人には必ず微笑んでくれるのが勉強だと私は思っています。ときには人の知恵を借りるのも多いにありです。深刻になっていると視野が狭くなるので、やっぱりメリットはなにひとつありません。
勉強のサイクルが回りはじめるとき

学習をはじめたばかりの辛い暗闇の時期を抜けると、コードを入力することやパソコンの扱いに慣れてきます。学んでいる中で必要な用語なども分かってくるので、ここでやっと知識を吸収する条件が整います。
本来はこの段階になってはじめて、勉強したことが身につくようになってきます。やった分だけ知識やスキルが高まっていくのを実感できます。この段階に入ると「学ぶこと=楽しいこと」と思えてきます。この段階に到達してしまえば挫折することはほぼなくなります。
とにかく真似て引き出しを増やす

この段階からは、いかにして自分の引き出しを増やすか意識していきます。興味があるものを調べて、まずはそっくりそのまま真似て作ってみる。余裕があれば少しだけアレンジしてみる。自分を飽きさせないように工夫する心の余裕が大切です。
学びが加速する段階までの期間は、やっぱり人それぞれ異なります。焦る気持ちはあると思いますが、遅くても2~3カ月後には余裕がでてきている自分がいます。伸びてくる自分を気長に待ちながら、淡々と続けていけば必ず到達できます。
時間はかかっても諦めなければ、遅かれ早かれスキルは身につくものです。日々学んでいる自分をしっかりと認めて褒めてあげることも大切です。ときには勉強を忘れてリラックスするようにして、自分の成長を心待ちにしながらゆったり学んでいきましょう。
学んでいる過程で作ってみたもの
リンクをクリックすると別ウインドウで開きます。
- CSSのみでボーダーにアニメーションを設定する
- ボーダーアニメーションへのリンク
- カードデザインのスライダー
- カードスライダーへのリンク
- 円形に動くスライダー
- 円形スライダーへのリンク
- デジタルなネオン時計
- ネオン時計へのリンク
- クリックすると拡大されるモーダルスライダー
- モーダルスライダーへのリンク
- swiper.jsを使ったスライダー
- swiperスライダーへのリンク
- Todoアプリを見よう見まねで作った(英語仕様)
- Todoアプリへのリンク