こんにちは。mito（@mito_works）です。
今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。
30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。
#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。
2nd DAY16
一通りできた！！（と思う。）バッチリ仕様通りではないので完成度は70%くらいかな。
余裕がなかったので余裕がある人向け課題はほぼできず＞＜。
レスポンシブでの余白が微妙だな〜とかは少しずつ直していきます。 pic.twitter.com/frBC6iU5ce— mito@ひよっこwebデザイナー (@mito_works) September 24, 2019
twitter投稿でふりかえる10日間の学び
twitterで投稿していた内容をまとめました。
どんなことが学べるのかの参考になれば幸いです。
DAY17『マウスホバー時の動きを付ける』
2st DAY17 アニメーション
ずっと気になっていた画像にホバーすると少し拡大になるあの動き、簡単に実装できることがわかって使いたくてうずうずする！！— mito@ひよっこwebデザイナー (@mito_works) September 27, 2019
DAY18. 『Webフォント、デバイスフォントを理解する』
2st DAY18 Webフォント、デバイスフォント
Webフォントって重いんだ！知らなかった。デザインする時フォトショの中にあるフォントからデザインのことだけ考えて選んでいたけど、デバイスフォント、Webフォント、画像どれにするか決めてデザインするようにしようと思う。
— mito@ひよっこwebデザイナー (@mito_works) September 28, 2019
DAY19. 『コーディング後の品質を担保するテスト』
#30DAYSトライアル
2st DAY19
昔、プログラミングをしていた時、テスト仕様書作って、すべての分岐を通るように単体→結合と細かくテスト＆キャプチャも全部残してたんですが、HTML、CSSのコーディングは厳密にテストしないんだな〜と勝手な印象があったけど、プロはやっぱりそんなことないですね。— mito@ひよっこwebデザイナー (@mito_works) September 29, 2019
DAY20. 『スライダー（カルーセル）を作る』
#30DAYSトライアル
2st DAY20ウィンドウ幅いっぱいのスライダーをslickで実現。
「ウィンドウ幅いっぱい」という指定に苦戦しました。
ダウンロードしたjQueryもそのまま使うのではなく、scssを変更すると個性が出るなと。 pic.twitter.com/UCNEeb0n6k— mito@ひよっこwebデザイナー (@mito_works) September 30, 2019
jQuery、ダウンロードしたまま使うのではなく少しコードをカスタマイズして色や形を変えると印象が随分変わるのだなと思いました。
DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』
#30DAYSトライアル
2nd DAY21「WOW」ライブラリを使ってアニメーション。
こんなに簡単に、こんなにリッチな動きが実現できるなんてすごいなぁ〜。そして動きが入るとそこに命が吹き込まれたみたいな気がして楽しい♪
色々試してみた結果「flipInX、rollIn」の個性的なアニメーションが好きです。 pic.twitter.com/50IJ3By0kn— mito@ひよっこwebデザイナー (@mito_works) October 1, 2019
動きが面白いなと思い、ブログにも使い方を書きました。
DAY22. 『スマホ時のドロワーメニューを作る』
#30DAYSトライアル
2nd DAY22 ドロワーメニュー作成最近ちょっとコーディングで遊べるようになってきた♪#1日1サイトレビュー でもよく見かける（気がする）PCでも丸いドロワーメニュー＆中身の背景グラデーション＆メニュー項目の左にアイコンも作ってみました！ pic.twitter.com/bbb2acD86F
— mito@ひよっこwebデザイナー (@mito_works) October 2, 2019
メニューは特に“今の流行り”が一番反映されやすい部分だと思います。
色々なサイトを見てコーディングのストックを増やしておきたいです。
DAY23. 『スムーススクロールとフローティングアイテムを作る』
#30DAYSトライアル
2nd DAY23 ページ内リンクBootstrapや人のソースでページ内の各コンテンツの一番外側のdivまたはsectionにoffsetというクラスがあって、「一律、上幅調整するためかな」って思ってたんですが、「スムーススクロールの時にも効果を発揮するのか！」と分かって、朝から気分良し！
— mito@ひよっこwebデザイナー (@mito_works) October 3, 2019
#30daysトライアルと並行して模写も行なっています。
そこでの学びとここでの学びがリンクした日でした。
DAY24. 『ページ内リンクでクリックした要素に対して下線を引く（クリックイベントの処理）』
#30DAYSトライアル
2st DAY24：クリックした要素に下線。
boostnoteにもストック。画像も一緒に貼れると嬉しいな、できないので文字やハッシュタグで補足書いてすぐ欲しい情報にたどり着ける工夫をしてます。
ipadとかiphoneもアプリがあって見れるといいなと欲張りなことを思ったり・・。 pic.twitter.com/NvOoXnLwq8— mito@ひよっこwebデザイナー (@mito_works) October 4, 2019
コーディングをするだけでなく、次回同じようなコーディングをするときに使えるようにBoostnoteにコードをメモしています。
DAY25. 『Q and Aをアコーディオンでコーディング』
#30DAYSトライアル
2nd DAY25：QAのアコーディオン
自分で意図的にmarginやpaddingを入れていなくても入っている場合が結構ある。px単位で意識して作っている気になるので、padding:0、margin:0、でリセットする方法よく使うようになりました。 pic.twitter.com/GnUCYYMzE1— mito@ひよっこwebデザイナー (@mito_works) October 7, 2019
DAY26. 『モーダルを作る』
#30DAYSトライアル
2nd DAY26：モーダル画面
ゼロからとBootstrap使ったコーディング比較。
モーダル画面って、画面サイズ変わると収まらなくなったり、ズレたりするのでレスポンシブ対応がめんどくさいなと思っていて案の定ゼロからだとボタンずれまくりw。
Bootstrapを上手に活用しようと思う。 pic.twitter.com/apRosJwB2P— mito@ひよっこwebデザイナー (@mito_works) October 9, 2019
Bootstrapの威力を感じました。
今後はコーディングするときにBootstrapを上手に活用して、コーディングを効率化しようと思いました。
10日間の気づき
脇道逸れると学びが増える！
このコードをbootstrapで書き直すとどうなるか？デザインや色味を変えるとどうか？動きをつけるとどうか？と色々試してみると、自分が知っている知識だけでは実現できないことがわかったり、使っているコードの理解が深まります。
Boostnoteがとても便利！
今までは、「あのときに使った書き方を参考にしよう」と思ったときに探すだけで一苦労でした。
Boostnoteに該当箇所だけ切り出してストックしておくと後々、参照がしやすく、便利です。
Bootstrapでレスポンシブのコーディングが楽になる！
やっとPCでの実装ができたと思っても、タブレットやスマホのレスポンシブ対応でつまずき、想像以上に時間を使ってしまうことが多々ありました。
Bootstrapをうまく活用し、PCを実装する段階からタブレットやスマホを意識した実装をしておくと、効率的です。
サイトの細かいパーツの実装方法が気になるようになる！
「この閉じるの×印、レスポンシブで画面幅が変わってもずれないのはどうやって実装しているのだろう？」や「ハンバーガーメニュー内の文字がシュッと出てくるアニメーションはどのように設定しているのだろう？」とコードベースで動きや要素が気になるようになりました。
シャドウ、グラデーションの実現方法が気になるようになる！
デザインの観点で、画像やボタンなどの外側のシャドウの入れ方、背景グラデーションの色味と角度などもコードベースで気になります。
サイトを見たときにどの書き方の組み合わせかわかる機会が増える！
擬似要素を使って配置しているということや、flexを使っているなどどのようにコーディングされているか想像できる機会が増えました。
今後のスキルアップの方法
この10日間で基本的な実装方法は身についたのではないかと思います。
- 「この書き方とこの書き方の組み合わせだ！」とわかるものについてはもっと早くコーディングできるように繰り返し使うようにする
- 分からないものは覚えてストックしていく
