こんにちは、小林です。今回は、最近よく見る記事を紹介していこうと思います。最近は主にhtml/css、python、Vue.jsを扱うので、その記事をまとめてみました。
- html/css
- python
- Vue.js
#html/css
###emmet
・HTML/CSSを爆速コーディング Emmet入門
https://blogs.adobe.com/creativestation/serialization/web-learning-emmet
こちらはAdobeの連載記事で、htmlの省略記法であるemmetについて導入から応用まで細かく書かれています。記事内ではBracketsとDreamweaverへの導入が解説されています。
###flexboxチートシート
・日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
こちらはcssのdisplay: flex;まわりに関するチートシートです。日本語なのが非常に嬉しいところ。要素の位置調整に困ったら見に行くと大抵解決します。
###Grid Layout
・CSS Grid Layout を極める！（基礎編）
https://qiita.com/kura07/items/e633b35e33e43240d363
・CSS Grid Layout を極める！（場面別編）
https://qiita.com/kura07/items/486c19045aab8090d6d9
最近僕のtwitterでもちょくちょく紹介しているdisplay: grid;ですが、この記事のおかげでかなり理解できました。解説が非常に深く、ほとんどチートシートと言っても良いレベルの情報量。特に場面別編は「こんな風にしたい」と考えたものが大抵載っているのでかなりありがたいです。Grid Layoutに触れるなら必ず一度は読むべき記事です。
・A Complete Guide to Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
こっちは英語のチートシート。gridでどうしても困ったらこれ。
###Less
・Features In-Depth | Less.js
http://lesscss.org/features/
cssプリプロセッサの中でも代表的なLessの公式ページ。Sassの方が人気のようですが、Mixinの書き方が便利なのでLessも捨てたもんじゃないですよ。で、Lessの場合は公式リファレンスが充実しているので、下手にググるよりよっぽどわかりやすかったりします。Lessに触れるなら一度は読んでみましょう。
#Python
###Django
・[Python] Djangoチュートリアル - 汎用業務Webアプリを最速で作る
https://qiita.com/okoppe8/items/54eb105c9c94c0960f14#%E4%BD%9C%E6%A5%AD%E6%A6%82%E8%A6%81
個人的にDjangoは公式のリファレンスなどが読みにくかったりで勉強しにくいと感じています。なので、とりあえず何か作ってみて挙動を確かめるのがおすすめですが、こちらの記事はチュートリアル系の中でも完成品のレベルが高めで達成感も良い感じです。
・naritoブログ
https://narito.ninja/
naritoさんという方が運営されている個人ブログです。内容が充実していて、ほとんどリファレンスのように使わせていただいています。ただ、レベルも高いので初学者には向かないかも。上のチュートリアルをクリアしてから読むのがちょうどいい感じですかね。ちなみに最近旧ブログ（https://torina.top/） から移行されたため、過去記事の大半は旧ブログにあります。そちらも合わせて読んでみては。
###Tweepy
・【Twitter】Pythonで勝手にファボ(いいね)とフォローをしてくれる自動化ツールを作ったのでサンプルコードを公開
https://www.torikun.com/entry/twitter-python-follow-favorite
pythonからtwtterを操作するためのライブラリ、Tweepyを使ったサンプルアプリの紹介です。こうもあっさりtwitterを自動化できるのかと感銘を受けた記事。pythonにあまり触れたことがなくても読めるように簡単に書かれています。
・Pythonメモ: Tweepyのややこしいレスポンスデータの読み方 〜Twitter API活用の最初の難関〜
https://www.statsbeginner.net/entry/2017/02/12/231400
こちらはちょっと上級者向け。Tweepyで取得してきたデータの読み方が細かく説明されています。自動化ツールのカスタマイズには不可欠なので、先へ進みたい方は必読です。
・Tweepyのgithubページ
https://github.com/tweepy/tweepy/blob/master/tweepy/api.py
公式のgitです。公式APIリファレンスもあるんですが、情報があまり更新されていないようで、古いままの部分が一部あリます。ソースをみた方が適切な情報が見られるので、困ったらこちらを読むのがおすすめ。
#Vue.js
・Hypertext Candy
https://www.hypertextcandy.com/vuejs-introduction-el-data
個人ブログですが、Vueの入門にはかなりおすすめです。最低限の理解はこのブログの入門記事を読めばOKかなと個人的には思います。Vue.js以外にも色々あるので、興味ある方はチェックですね。
・基礎から学ぶ Vue.js 書籍用サポートページ
https://cr-vue.mio3io.com/
チュートリアルのページでいくつかのサンプルが紹介されています。書籍もおすすめですが、このサポートページの充実さが個人的にポイントが非常に高いです。基礎を学んだらここのサンプルに取り組んで見ましょう。
・【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】
https://public-constructor.com/firebase-hosting-vuejs-for-beginners/
上述のサポートページにfirebaseを用いたチャットのサンプルがありますが、firebaseについての説明が若干難しかったのでこちらも合わせて読むと良いです。
・Vue.js + axios + Vue Routerで作る！シンプルなSPAの作り方
https://public-constructor.com/how-to-create-spa-with-vue/
せっかくVue.jsを学ぶなら、SPA(シングルページアプリケーション)は作れるようになっておきたいところ。シンプルなSPAを作りながら学べるので、まずはこの記事から始めてみましょう。
#まとめ
いかがでしたでしょうか。個人的にエンジニアのスキルの一つには"検索力"があると思っています。自分の求める情報を適切に検索できないと技術の進歩に追いつけないです。
この記事が皆さんのスキルアップの手助けになれば幸いです。
#個人ブログ紹介
個人のブログを運営しております。興味ある型は是非！
http://itokoba.com