コーディングの勉強

【30DAYSトライアル2nd】day27~30の演習&2nd全般で学んだこと

こんにちは。mito(@mito_works)です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何?どうやって始めるの?といった疑問をお持ちの方、こちらをご覧ください。

mito
mito
いきなりですが、30DAYSトライアルの2ndステージ。完走しました!!

mito
mito
2ndで学んだことをまとめます。
こんな人におすすめ

30DAYSトライアル 2ndでどんなことが学べるのか気になる方
30DAYSトライアル 2ndのコンテンツに興味ある方

2nd前半の学び

コードの書き方からアニメーションの使い方まで幅広くインプットできました。

30DAYSトライアル〜JavaScriptの基礎を学ぶDAY1~3〜こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...
30DAYSトライアル〜jQueryの基礎を学ぶDAY4~6〜こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...
30DAYSトライアル〜Sassの基礎を学ぶDAY7,8〜こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...
mito
mito
特に勉強になったり、忘れたくないなと思うものは切り出して記事にしました!
【初心者向け】縞模様の見出し作り方こんにちは。mito(@mito_works)です。 今回は、この見出しをどうやって作るかのご紹介です。 そもそも、...
【初心者向け】CSSで要素を横に並べるfloatの基本的な使い方を理解する!こんにちは。mito(@mito_works)です。 今回は、XDでデザインされたサイトを模写して学んだことをまとめます。 ...
【初心者向け】CSSでコンテンツ表示位置の調整(positionとflex)~画像をちょっと下に表示したい(30DAYSトライアル)~こんにちは。mito(@mito_works)です。 2つのコンテンツを横に並べてそのうち1つの位置をちょっとずらしたい。 つい...
【簡単】wowで要素をふわっと表示させたりシュッと表示させるアニメーションをつけるこんにちは。mito(@mito_works)です。 今回は、jQueryのライブラリーを使って要素がふわっと登場するアニメーショ...
SVGファイルとは?有効な使い方とPNG、JPEGからの簡単な変換方法こんにちは。mito(@mito_works)です。 今回はSVGファイルについての話題です。 SVGデータの特徴と...

2nd後半

学んだことを試す場。前半で学んだSassやjQueryやJavaScriptを使って実践です。

mito
mito
答えがないので「習得した知識を組み合わせて試す→検索して試す」をひたすら繰り返していました。
【30DAYSトライアル2nd】day17~26のアニメーションの付け方編で学んだことこんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

人から「これポイントですよ!」と教えられたことよりも、実践の中で「これはポイントだ!」と気づいたことでは、「めちゃくちゃ重要なことだ!」という切実さが違います。

そして知識としての定着率も変わってくることを実感しました。

BootstrapはCSSフレームワーク(骨組み)なので、ワイヤーフレーム時点で必要な箇所に必要な分だけ使うようにする。

計画的な使い方が大事なんだと学びました。

 

最終課題の学び

 

3日で終わらせるのがベストという演習を4~5日かけました。

mito
mito
つまずいたら根詰めてやるのではなくて一旦寝かせるというやり方をしていました。実質の時間だと3日くらいだと思いますが、頭を一旦リセットするために寝かせる時間は必要でした。
momo
momo
時間がかかった一つの要因として、ワイヤーフレームを書いていなかったということがあるね。

https://twitter.com/mito_works/status/1186476124886298624

 

それから「このデザインよく見ている気がするけれど、どこで見たか思い出せない・・」というものが結構ありました。

mito
mito
いつも見ているはずなのに。。見た場所も思い出せないし実装もできない・・。もう少し意識的にサイトを見るようにしたいという教訓を得ました。

実装方法の引き出しを増やしていきたいと思います。

mito
mito
ひとまずパーツごとのサイトレビューをやってみたいなと思っています。

まとめ

1stから約2ヶ月間取り組んだ #30DAYSトライアル。

2ヶ月前には、今は当たり前のように使っているテキストエディタVscodeも知らなかったし、BootstrapもScssも知らなくて。。

mito
mito
今ではショートカットキーを駆使しながらVscodeを使い、BootstrapやScssを使い、効率的にコードを書くことを意識してます。

0から10以上になった知識。ふりかえると、毎日の積み上げてきたもの、感慨深いです。

知識のインプットからそれを使ったアウトプットまで止まることなく一気通貫で取り組めてスキルアップできるものだと思います。

mito
mito
学んだことを即実践で活かせるので、スキルとして身につきやすい。短期間でスキルアップしたい人にとってはとても良いコンテンツだと思います!

全力でオススメします!

習慣にしたいこと
  1. コーディングはワイヤーフレームを書いてから行う。(Bootstrapは計画的に使う)
  2. 日頃からサイトを「私だったらこのパーツをどうやって実装するか?」という視点でみる

 

 

ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。