【現場目線からも納得のクオリティ】厳選Youtubeおすすめプログラミング系チャンネル3つ
「youtubeで学習したいけどたくさんあってどれがいいのかわからない」
「本格的な解説じゃなくて初心者向けが良い」
などなど、youtubeで何を見て良いのかわからない方も多いと思います。
youtubeは現状最大手の動画メディア、色々個性豊かなチャンネルがあります。
おすすめを厳選するのは非常に難しいのですが、
仕事で他人にプログラムを教える機会もある筆者も参考にしている3チャンネルを
ご紹介します。
とりあえずこれらだけでも追っていれば、相当なインプットになるはずです！
・しまぶーのIT大学
ホワイトボードを使いながら解説してくれるのですが、
字が上手＆図がわかりやすく、そして絵が可愛いです笑
しまぶーさんはYahoo!に勤めていた経験もあるフロントエンドエンジニアさんで、
IT業界の内情や現場で感じていたリアルな体験談などもちょこちょこ
聞けるので非常におすすめです。
・Webの神様
こちらはとにかく丁寧でわかりやすい、正直これだけ見ていれば十分と言ってもいい
レベルの動画が取り揃えられています。
ただし、一つの動画が40分超になることも多いため、まとまった時間が取れる人や
集中力が続く人に限られてしまうかもしれません。
実際のコーディングもリアルタイムで見れるため、
脳内でエンジニアがどう考えながらコーディングするのかがわかります。
・Akichun★PG
非常に丁寧な動画編集で見やすく、聞きやすい声とスピードで自然に耳に入ってきます。
主にJavascriptの基礎～初級者レベルの解説が多く、
馴染み深いテトリスなどのゲームを作りながら学習できるため
楽しみながら実践できます！
まとめ
・しまぶーのIT大学
・Webの神様
・Akichun★PG
【学習サイト決定版】成長を実感しながら簡単に続けられる厳選3サイト
「書籍やサイトの文字だと読む気が起きない…」
「成長や学習の進捗が分かった方がモチベが上がるんだけど…」
ご安心ください、フリーランスで現役活動中のエンジニアである筆者も
実際に使ったことがある、おすすめ学習サイトをご紹介します！
特にドットインストールは全ての回が3分で終わる、スキマ時間に
ピッタリの学習サイト。
私はここで育ったと言っても過言ではありません笑。
・ドットインストール
個人的におすすめ第一位のサイトです。
基本的には動画を見て学んでいくだけで、気付けばずっと見ていられる、
そしていつの間にか知識が増えている感覚が味わえます。
1つの動画が3分で統一されているのでペース配分もしやすく、
動画ごとにメモも残せるので便利です。
・skillhub
非常に丁寧に、初心者目線で作られた動画サービス。
1つ1つのコンテンツが本当に初心者向けで優しいです。
完全に素人で、それなりに時間を確保できるのであれば
こちらもかなりおすすめです。
※無料では一部のみ利用可
・Progate
実際に自分でコーディングしたソースがその場で確認できるサービス。
イラストと解説も丁寧で、初心者でもとっつきやすいと思います。
こちらは知識のインプットというより、実践アウトプットという
感じです。
上記3つ以外にももちろん様々な学習サイト・サービスがありますが、
一旦これらに触れてみて、どうしても合わない・納得できない
場合は他のサービスを探してみるくらいで大丈夫だと思います。
動画でのインプットと、ソースを書くアウトプットを繰り返し、
自分の手で成長を感じていってください！
まとめ
・ドットインストール
・skillhub
・Progate
【プロと同じ道具を使えば間違いなし】テキストエディタはこれ一択！
プログラムを書くにあたって、何を使えばいいのかわからない…
そんな方におすすめのソフトがあります。
プログラミング歴20年の筆者も使っているソフトです！
Windows標準のメモ帳でも一応書けますが、
効率が段違いですし、便利な機能もたくさんです。
これを知ってるのと知らないのとでは雲泥の差があります！
それではそのソフトを紹介しましょう。
細かい使い方は省略しますが、とりあえずこれで
間違いないです。
というのも、「プラグイン」という追加オプションのような
ものが非常に豊富で、自分が使いやすいように
カスタマイズが自由自在にできます。
・必須級のプラグイン
例として、筆者も使っている必須級のプラグインを紹介します。
１．Highlight Matching Tag
htmlタグは<div>～</div>のように開始タグと終了タグがペアに
なっています。
コードが長くなると、開始と終了のペアがどのペアかわからなくなりがちです。
そんな時にこのプラグインを入れていると、カーソルを開始タグに合わせると
それに対応する終了タグがハイライトされる便利なものです。
２．Auto Rename Tag
こちらも開始＆終了タグのペア維持に役立ちます。
例えば<div>～</div>の開始タグを<section>に変えると、
終了タグが自動で</section>に変わるものです。
・シンプルなテキストエディタをサブで持つ
vscodeは便利な反面、起動が若干重たかったりします。
個人的な好みもありますが、私はメインをvscode、
サブにサクラエディタを使用しています。
サクラエディタはよりシンプルなエディタで、起動も瞬時にできます。
例えばメールやチャットの下書き、ちょっとしたメモをしたい時など、
瞬発力が必要な時にはサクラエディタを使用しています。
用途に合わせて複数のエディタを使い分けても良いかもしれません。
ただ、基本vscode1種類、多くても2種類で十分だと思います。
そのくらいvscodeは万能ですのでご安心ください。
まとめ
・必須級のプラグイン
・シンプルなテキストエディタをサブで持つ
【これが出来れば第一線で活躍できる】デザインを即コード化する感覚を養う
実際にwebページを作るにあたって、よく見ているサイトのような
難しい構造が自分に作れるのだろうか…？
そんな不安を感じる方も多いのではないでしょうか？
現役エンジニアの私含め、誰もが最初のうちは通る道です。
ですが、この記事を見るだけでその不安の大部分が払拭されるはずです。
書籍や形式張ったwebサイトでは中々触れない、現場目線＆初心者目線に
合わせたポイントを紹介しますので、ぜひ御覧ください！
・ページを見た瞬間にhtmlが浮かぶ
例えば下のようなページを見て…
↓大まかに緑枠で囲った4つのブロックに分かれることがわかると思います。
これを突き詰めていくと、例えばモニターの半分でページデザインを表示しておき、
それを見ながらhtml/cssのコードをぱぱっと打てるようになってきます。
これにはどうしても慣れが必要ですが、割と早い段階で身につくと思います。
この感覚が身につくと、どんなページもパッと見ただけで脳内に
htmlの構造が湧いてくるようになります。
言わずもがな、開発速度の向上につながりますし、より複雑で個性的なデザインにも
挑戦しやすくなるでしょう。
・グリッドデザイン
webサイトは基本的に四角形を中心にデザインされています。
後述しますが、円形や星型なども、実は四角枠であることが多いです。
四角形を中心にデザインするメリットとして、要素を配置しやすい点があります。
イメージ的にはテトリスを思い浮かべてください。
すべての要素が四角形でデザインされているため、シンプルさが維持されます。
こういった考え方を専門用語で「グリッドデザイン」と呼んでいます。
グリッドデザインの詳細は省きますが、要はwebページは四角形の大小で
構成されている、ということだけ覚えておいてください。
・円、三角、六角などを四角形で考える
少し触れましたが、webページには円、三角、星など様々なデザインがあります。
しかし、これらは実はほとんどが四角形の枠に特徴的な背景を添えているだけだったりします。
例えば星型の中に文字が書いてあるデザイン。文字を配置するのはhtmlです。
htmlで四角枠を設定し、その背景画像として星の画像を設定、これだけです。
最初に書きましたが、やはりこれも慣れてくるとwebページを見ただけで
「あ、この星型っぽい部分は四角枠で、罫線をcssで表現してるんだな」
「この円形は画像で設定してあるっぽいな」
などと予想が立てられるようになります。
まとめ
・ページを見た瞬間にhtmlが浮かぶ
・グリッドデザイン
・円、三角、六角などを四角形で考える
【ニーズに応えてこそプロ】スマホサイトの意識を高める
「今回はレスポンシブでお願いします」
「レスポンシブでお願いしたはずですが崩れますね」
クライアントからこういったメールが非常に良く来ます。
これからweb、htmlを習得する方にとっても他人事ではありません。
学習する内容は現場のニーズに沿っていた方がはるかに効率的です。
ここでは現役エンジニアとして活躍中の筆者が、
現場で最優先に役立つ知識を一足先にお教えします。
・レスポンシブデザイン
ではレスポンシブとはなにか？
簡単に言うと「画面幅によってデザインが変わるページ」です。
実質的には「スマホだとデザインが変わるページ」と言ってもいいかもしれません。
どうやって実装するかなど詳細はまた別途書きますが、
ここでは一つ最大の注意点だけお伝えしておきます。
それは、「スマホ優先でコーディングする」ということです。
案件やターゲットにもよりますが、現状webページを閲覧する際に使われている
のはPCよりもスマホの方が多いです。
それなのに、PC優先でコーディングを始めてしまうと、htmlの構造やcssの無駄が
発生しやすくなってしまいます。
基本的にはスマホ優先でコーディング、と覚えておいてください。
・UI
さて、スマホのコーディングで気をつけるべきポイントはなにか？
まずは操作性です。よくUI(ユーザーインターフェース)と言ったりします。
例えば「OK」「送信」などメインのボタンと「キャンセル」などのボタンの
大きさや色を分ける。
画面幅が狭いのでなるべく1列表示にする。
横スクロールはなるべくしないようにする。
などです。
もちろん他にも色々ありますが、特に普段PCでサイトを見る機会が多い方は
前提や使い勝手の違いに気をつけたほうがいいです。
私も普段情報収集としてサイトを見ることが多いためPCでブラウジングしてるので、
スマホのコーディングに慣れるまでは結構時間がかかりました。
なのでもし私と同じくPCでのブラウジングが多い方は、スマホでのブラウジングも
少し意識しておくと良いかもしれません。
・jsやcssの挙動
最近は減ってきましたが、javascriptのライブラリやそもそもの仕様が、
スマホに対応していない、あるいはiPhoneだけ対応していないという
事態が稀にあります。
cssも同じで、Androidでは問題なく表示されるのにiPhoneだと全く表示されない、
という状態もままあります。
こればかりは使用するライブラリと端末に依存するため、どういう時に再現するのか
という条件付けが難しいです。
だからこそ言えるのが、Javascriptを使う際は、本実装する前にまず動作確認を
行うということが大事です。
cssも同じく、細かく打ち込む前に「このプロパティはAndroidに対応してるかな？」とテストしてみるのがいいでしょう。
公式リファレンスなどで対応○となっていても、特定のバージョンだと非対応などはよくあることなので、やはり実際に確かめた方が無難です。
まとめ
「常に勉強し続ける必要がある」？
・根本的な知識は不変
「新技術をキャッチし続けないと取り残される…？」
こんな不安はないでしょうか？
結論から言います。
プログラミング言語は最初にリリースされてから何度もバージョンアップされて
機能が増えていくことがほとんどですが、
"その全てをおぼえていないと何もできない"というようなことはありません。
また、プログラミング全体の視点で見たとしても、
プログラムの書き方や構成の仕方、基本的な関数の有無などは実は
ほとんどの言語で応用できるものとなっています。
つまり最低限のベースを知っていれば、新しく差分で覚える情報量は
かなり少なく済ませられるということです。
・技術で最低限見るべきポイントを抑える
「既出の技術は全部知っておかないと話にならないのかな…？」
という不安もないでしょうか？
こちらも結論としてはすべて覚える必要はありません。
ある程度習得してくると、自分が良く使う処理や目的によってはほとんど使わない内容があったりします。
そういった特殊な手法や技術は、正直覚えておかなくても大丈夫です。
「こんなのがあるんだ」程度で知っておいて、いざ使う際に
ググって詳細を調べれば事足ります。
つまり情報の取捨選択をし、自分に関連の深いものだけを習得していけば
効率的な学習ができるということです。
・勉強というより検証、楽しんでやる
「いざ勉強しようと思っても難しそう…」
「いつまで勉強すればいいんだろう…」
何でもそうかもしれませんが、勉強はだいたい楽しんだもん勝ちです。
プログラミングの勉強も、ある程度は座学で教科書的な勉強が必要ですが、そこからすぐに「あれ、サンプルのここを変えたらどうなるんだろう？」「サンプルのこの部分はこっちでも使えるのでは？」という応用性に気がついてくると思います。
これこそがプログラミングの妙というか、楽しさの一つであり、
上級者になるといろいろな知識を組み合わせてきれいなソースを書いたり、
様々な箇所で汎用的に使えるようなソースが書けたりします。
ぜひ楽しみながら学んでいってください！
まとめ
・根本的な知識は不変
・技術で最低限見るべきポイントを抑える
・勉強というより検証、楽しんでやる
実は英語の勉強が有利
・最新情報をいち早くキャッチできる
プログラミングの発祥はほとんどが外国です。
新しい技術や手法などを解説しているブログなども、比較的海外サイトの方がキャッチが早いです。
つまり、英語がわかるだけで最新情報の入手速度に差がつくのです。
・英語マニュアルが読めると有利
マニュアル整備なども外国の方が早いのですが、せっかく調べても結果が英語のページしかないと問題が解決できません。
もし英語が分かれば解決できる疑問も一気に広がることでしょう。
私も昔、とあるツールのマニュアルが英語版しかなく、必死に翻訳しながら調べていた時期がありました。言うまでもなく完全に無駄な二度手間ですよね。
・タグや変数、関数名
ちょっと専門的な話になりますが、プログラミングで使う「変数」や「関数」というものがあります。
例えば「水色を表す変数」を定義するときは「colorAqua」だったり、「英語をすべて大文字にする関数」は「wordToUpper」というような名前をつけることがあります。
ここでも英語の知識があればすぐに名前を決めることができますが、知識がないと「水色 和英」などといちいち検索して調べないといけなくなります。
またまた無駄が発生してしまいますね…。
言わずもがな、英語の知識が役に立つわけです。
まとめ
・webに限らずプログラミングはほとんどが外国発祥
・英語マニュアルが読めると有利
・タグや変数、関数名
