今回はAstroというJSフレームワークについて紹介します。React・Vueあたりを触ってきた人なら、感覚的にそれほど違和感なく書き始められるフレームワークです。気になって少し触ってみたので、その感想をまとめます。

また新しいフレームワーク？React覚えたばかりじゃん

考え方はReactに近いから、そこまで一から学び直す感じじゃなかったよ

Astroは表示速度に特化したフレームワーク

Astroの一番の特徴は、表示速度を重視したウェブサイトを作ることに特化している点です。表示速度が重要な理由はシンプルで、ページの読み込みが遅いと、それだけでユーザーが離脱しやすくなり、結果的にSEOにも悪影響が出るとよく言われています。

実際、体感で「重い」と感じたページはすぐ閉じてしまう、という経験は多くの人にあるはずです。エンジニアがリファクタリングをしたり、画像を軽量化したりするのも、突き詰めればこの表示速度を上げるためです。

なぜAstroは速いのか

Astro公式のドキュメントには、おおよそ次のような説明があります。

コンポーネントのフロントマター内にはJavaScriptを書けますが、そのコードはビルド時に処理され、最終的にユーザーのブラウザへ送られるページからは基本的に取り除かれます。つまりデフォルトでは、ページにJavaScriptがほとんど含まれない状態で配信されます。

Reactなどはコンポーネントの仕組み上、ブラウザ側でJavaScriptを読み込んで動かす部分が多くなりがちですが、Astroは「必要な部分にだけ後からJavaScriptを追加する」という考え方（アイランドアーキテクチャと呼ばれます）を採用しているため、初期表示が軽くなりやすい、という仕組みです。

実際にAstroテーマでポートフォリオサイトを作ってみた

百聞は一見にしかずということで、実際にAstroの公式テーマを使ってポートフォリオサイトを作ってみました。（実際に作ったAstroのポートフォリオサイトはこちら）試しにアニメーションするイラストを組み込んでみたところ、開発時と公開後で問題なく同じ挙動をしていました。

それだけならReactとかVueでもできそうじゃない？

正直、見た目の動き自体は同じ。違うのは裏側で送られてるJavaScriptの量なんだ

Astroテーマのダウンロード手順

1. Astro公式のThemesページから好きな無料テーマを選ぶ（今回は「Astroship」を使用）
2. ターミナル（Windowsはコマンドプロンプト、Macはターミナル）を開き、作業用フォルダに移動する
3. git clone (GitHubのURL)を実行するとひな形が完成

なお、テーマをGitHubから直接cloneする代わりに、Astro公式が用意しているコマンドで最初からテンプレートを指定して作成することもできます。

npm create astro@latest my-project -- --template ユーザー名/リポジトリ名

この方法はAstro公式のcreate-astroパッケージのドキュメントで紹介されている手順です。

まとめ

• Astroは表示速度を重視したサイト作りに特化したJSフレームワーク
• デフォルトでJavaScriptを最小限にする仕組みのため、SEOにも良い影響が期待できる
• React・Vueの経験があれば、学習コストは比較的抑えられる

ReactやVueに比べるとリファレンスや日本語情報はまだ少なめですが、その分「表示速度で差別化したいサイト」を作るときの選択肢として覚えておいて損はないフレームワークだと感じています。

---

The post Astroとは？表示速度が速いJSフレームワークをReact経験者が触ってみた first appeared on kinoblog.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

前回の続きをしていきます。↓

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

2020年5月21日

Boostrap編が終わって、次はポートフォリオ編をやっていきましょう。

ポートフォリオとは、いろいろな意味があるのですが、

ここでは「クリエイターが自己紹介や自分の実績を載せて企業やお客様にアピールするもの」と捉えてください。

DAY18. 『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』

DAY18. 『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』
今日からスキルアップ中心の課題から『制作物の具体的なアウトプット』にシフトします👍
ここからが副業感でてくるところ❗️ファイト️です😎https://t.co/mTE5EE1n0k#30DAYSトライアル#30DAYSトライアル課題

— ショーヘー@東フリCMO (@showheyohtaki) September 25, 2019

ここから費用がかかります。

DAY18はポートフォリオ作るための有料テンプレート（約1700円）を入手しましょう。

僕は有料テンプレートのKerriを購入しました。

「ポートフォリオを実装する」経験を得ると考えれば、約２千円自己投資しましょう！

有料テンプレートを購入すると以下のメリットがあります。

DAY19. 『自分のポートフォリオサイトを作ろう②』

DAY19. 『自分のポートフォリオサイトを作ろう②』
今日の作業としてはDAY18の続きです。新しい課題はないので、HTMLテンプレから効率的に学習する方法とメリット・デメリットを解説しました👍
ぜひ意識してみてください❗️https://t.co/A6NkRpOfWf#30DAYSトライアル#30DAYSトライアル課題

— ショーヘー@東フリCMO (@showheyohtaki) September 26, 2019

リンクのブログ記事に『上手い人が書いたコードを見て盗むこと』とありますが、

そのとおりで「有料のテンプレートってどのくらいのレベルなんだろう？」って僕はずっと考えていました。

有料テンプレートのコードを見ておくと、いざ、自分が実装するときに

このくらいやれば、金を貰える！

という自分の中で具体的な「指標」ができていきます。

DAY20. 『ポートフォリオを公開しよう』

DAY20. 『ポートフォリオを公開しよう』
今日はサーバー契約・ドメイン取得・FTPクライアントソフトのインストールを完了し、実際にDAY19までに作ったポートフォリオを公開してみましょう☺️
ついにネット上に「成果物」公開です‼️https://t.co/i2EvnFVWB5#30DAYSトライアル#30DAYSトライアル課題

— ショーヘー@東フリCMO (@showheyohtaki) September 27, 2019

それをネット上に公開する費用（ドメイン代、サーバー代）

僕はこのブログのドメインがあったので、このブログのドメインを利用してサブドメインでやりました。↓

ちなみにエックスサーバーのX10プランを契約しました。

FTPソフト　Cyberduckを使ってみよう！

FTPソフトを使ってポートフォリオを公開しよう！

FTP(File Transfer Protocol)ソフトとは、クライアントとサーバーのデータ（HTMLとか）を受け渡しするために必要なソフトです。

Cyberduckは、シンプルな操作で直感的に理解できると思います（古臭いのがたまに傷ですが）。

キノのポートフォリオ

僕の例です。Kerri　テンプレートを編集して（といっても簡単なことばかり）、当時勉強してたHTMLやBootstrapやRubyのアプリのリンクを貼っています。

キノのポートフォリオ

このポートフォリオには、１年目に作った簡単なHTML（レスポンシブ対応あり）、見様見真似で作ったアプリがあります。

ぜひ、参考にしてください。

終わりに

お疲れさまでした！

今回は手順通りに進めていくだけだったので、話すことが少なかったと思います。

しかし、みなさんは初めてやる作業だったので戸惑われたかもしれません。

僕も当時、同じ気持ちで新鮮で楽しかったです。

エンジニアになる第１歩にしてみせる！と思っていました。

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑦ ポートフォリオ編　18DAYS~20DAYS first appeared on kinoblog.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

前回の続きをしていきます。↓

【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS

2019年6月6日

DAY15. 『Bootstrapを使ってビジネスLP制作③』

DAY16. 『Bootstrapを使ってビジネスLP制作④』

DAY15. 『Bootstrapを使ってビジネスLP制作③』
今日でデイトラ開始からちょうど半分です‼️
DAY15は、これまでの総集編としてHTML5/CSS3/Bootstrap4でのサイト制作です。Bootstrap編ももう少しで終わり🤗🎊

課題詳細👉https://t.co/cFJYpAh3yF#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/6JypgCbk3e

— ショーヘー@東フリCMO (@showheyohtaki) September 22, 2019

DAY15はちょうど折り返し地点です。

動画の59:00まで

長いですね。

でも、踏ん張りどころです！

前回と同じクリエイターなので、要領は分かっていると思いますが

あえてここでいっておきます。

英語は無視していいと！

DAY16. 『Bootstrapを使ってビジネスLP制作④』
DAY15から引き続き、HTML5/CSS3/Bootstrap4でのサイト制作です💻
勉強時間を長めに取れるかた向けの勉強法も書いてるので、余裕があればぜひトライを☺️‼️

課題詳細👉https://t.co/ubW21IGah1#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/b5G4Qup62w

— ショーヘー@東フリCMO (@showheyohtaki) September 23, 2019

動画の59:00～最後まで

前回と今回でBootstrapは完璧に理解しました。

LPを２本作ったんですよ！

しかも、手打ちで！これは誇っていい！

（実際は、①Bootstrapの公式を見て、コピペする。

②用途に合わせて自分が作ったclassやidを付与してアレンジしていきます）

DAY17. 『HTML5/CSS3/Bootstrap4の復習』

DAY17. 『HTML5/CSS3/Bootstrap4の復習』
DAY13〜16までBootstrap4を使ったビジネスLP制作を進めてきました。
インプット多めだったので、今日はその復習に当ててください👍
デイトラ1stで1番の山場はもう越えました️‼️残り2週間も完走しましょう☺️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/vKSI266fs6

— ショーヘー@東フリCMO (@showheyohtaki) September 24, 2019

復習です！

ココ、大事なところです。

でも、ちょくちょく休憩していいですよ。難所はもう越えたので！

ここまでよく頑張りました！

Bootstrap Editor

Bootstrapを慣れるために、Bootstrap Editorをおすすめします。

これは、Bootstrap に慣れるために使えるツールです。

セーブやダウンロードできるので、自分が作った型を保存するのに便利！

Bootstrapの本はこの1冊で十分！

さらにBootstrapを極めたい人はこちら↓

Ｂｏｏｔｓｔｒａｐ４フロントエンド開発の教科書 ウェブ開発の知識とコツをしっかりマスター /技術評論社/宮本麻矢

posted with カエレバ

楽天市場

Amazon

終わりに

お疲れさまでした！

これでBootstrapは完璧です。

いつでも公式サイトを見て慣れてください。

Bootstrap公式

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS first appeared on kinoblog.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

今日は堀江貴文さんの本、「多動力」を感想を書いていきます。

この「多動力」は、僕がブログやプログラミングをやるきっかけになった本なんですよ。

この本を書評しようと思ったのは、僕、去年まではやる気がなかったんですよ。

このままじゃダメだな。って思い、多動力を購入しました。

「多動力」は、やる気がでない人、

もしくはやる気があるのに恥ずかしがってできない人におすすめします！

いつも、読んでたよね！５回くらい？

お気に入りのページがあって、奮起しようとした時、読んじゃう感じですね！２０回じゃきかないくらいです！

多動力 全産業の“タテの壁”が溶けたこの時代の必須スキル [ 堀江貴文 ]

posted with カエレバ

楽天市場

Amazon

そもそも多動力って？

「多動力」がある人は、次から次に、興味が移り変わってしまい、まったくもって落ち着きがない。と書かれています。

これは、僕も身をもって知っているので、本を先へ先へと止まらなくなりました。

「やるべきことをしていないのに、やりたいことばかりしてしまう。」

多動力本来の意味は、こういう意味だったはずです。

しかし、堀江さんは「多動力」をこう定義しています。

「いくつもの異なることを同時にこなす力」

前時代的な価値観である、「一つのことをコツコツとやる」という考え方では、今の時代は対処できない。

インターネットによって、すべての産業がつながっています。

”タテの壁（昔の時代）”が溶けていく時代において「多動力」という考え方は私たちにとって大切な考え方です。

というのが堀江さんの言及したいことです。

多動力を読むメリット

多動力を読むメリットはやはり

「合理的な思考ができるようになる」ことです。

これによって、

とにかく、行動的になれる！

行動的な思考になっているので、

自分の時間が増える！！

自分をレアな存在にしよう！

３つの肩書を持つ

”タテの壁”が溶けていく時代において、スキルが１つというのは不安ですよね。

オリンピックの選手は「１００万に１人」と仮定して

さずかに、全員が１つのことに対して「１００万に１人」になれませんが、

「多動力」によれば、１つのことに１万時間取り込めば誰でも「１００人に１人」の人材になれる。

ここで、別の分野で１万時間取り込めば、

「１００人に１人」✕「１００人に１人」＝「１万人に１人」の人材になり、

さらに飽き足らず、まったく別の分野にもう１万時間取り込めば、

「１００人に１人」✕「１００人に１人」✕「１００人に１人」＝「１００万に１人」になります。

スキルを掛け算すれば、オリンピックの選手と同等になれる。

もちろん、誰でも最初は掛け算を使うことはできません。

最初は誰でも（堀江さんも）足し算をずっと続けて、

スキルを大きくしていったんです。

ここで多動力の出番です！

3つのスキルを並行して勉強するんです。

参考に、僕はプログラミング、ブログ、デザイン絵をスキルアップしています。

こんな感じです↓

最初は目に見える成長が見えてこない。

だから、脱落者が出てくるんです。

↑ココ重要です！

あなたの思っている辛さも全員が味わっているんです！

このことを意識していると脱落しないで、「頑張ろう！」って気持ちになります！

ここで脱落しないで続けた場合、今度は掛け算を使うことができます。

なんとなくイメージできましたか？

ここで言っておきたいことは、「スキルはなんでもいい」ってことです。

今、自分が面白いと感じた分野のスキルを伸ばしていくんです。

Udemyとは？コスパよくプログラミングを学ぶ使い方と注意点

2019年8月15日

スティーブ・ジョブズはまさにこの典型です。

彼は意図的に「カリグラフィー（西洋習字）」と「コンピューター」を選んだわけではありません。

ただ好きだったのです。

彼は言いました。

「点と点は、先を見ながらは繋げない。過去を振り返ることで繋げるものだ。だからその点と点が将来繋がると、信じなければならない。自分の勇気でも、運命でも、人生でも、カルマでも、何かを信じなければならない。この方法で失敗したことはない。この方法は私の人生を変えてくれた。」

【保存版】勇気を与えてくれるスティーブ・ジョブズの名言24選

つまり、「カリグラフィー（西洋習字）」と「コンピューター」という一見何の関連もない点をつなげて、成功者になったんです！

最大のハードルは「恥」という感情

「他人にどう見られるだろう？」、「恥ずかしい」という感情が、

多動力をする上で最も邪魔になるものです。

堀江さんはこう言っています。

はっきり言おう。誰もあなたには興味がない。好きなように生きて、思いっきり恥をかこう。

恥をかく勇気、失敗する勇気さえもてば、どんどん免疫ができてリスクを取ることを恐れなくなる。

この勇気をもつことが何よりも重要なのだ。

この言葉を読んで、僕はブログとyoutubeで発信することと今通っている最中のプログラミングスクールに行く決断をしました。

仮に失敗しても…

この動画はイーロン・マスクさんが失敗する瞬間をとらえた動画ですが、

正直どうですか？（決してイーロン・マスクさんを批判したくて話題に出したわけではありません！）

「どうでもいい」とか

「ああ、一時は話題になってたよね。今は……うーん」ってなりませんか？

イーロン・マスクさんの知名度でもこれなんです。

ちなみにこの後、テスラ社は独フォルクスワーゲンを抜き、自動車メーカー２位になりました。

テスラ、トヨタに次ぐ時価総額世界2位に。日産は？ホンダは？

「誰もあなたには興味がない」のは真実です。

日本に限定してもそうです。

堀江貴文さんの犯罪なんて、今になって誰が気にするのでしょうか？

失敗しても、すぐに忘れる。

あなたにも、過去、知人友人が失敗したことを覚えているのでしょうか？

「恥ずかしい」という感情は主観であって、「恥」は自分だけのものです。

失敗を恐れないマインドにする4つの意識

プログラミング学習で失敗を恐れないマインドを作る4つの意識

2019年3月4日

多動力 全産業の“タテの壁”が溶けたこの時代の必須スキル [ 堀江貴文 ]

posted with カエレバ

楽天市場

Amazon

終わりに

まとめ

行動ができない方におすすめします！

では、また

ここまで見てくれてありがとうございました。

こちらもおすすめ↓

【体験談】ブログ初心者がBlog Hacksをレビュー【最初の目標は月20万！？】

2019年3月12日

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 堀江貴文さんの本「多動力」を読んでみた【感想・レビュー】 first appeared on kinoblog.

Udemyとは

Udemyとは、購入すれば期限なしで視聴できる買い切り型のオンライン講座サービスです。プログラミングに限らず、デザインやマーケティングなど幅広いジャンルの講座が揃っています。

Udemyって名前は聞くけど、実際どんなサービスなの？

イメージとしては「YouTubeの有料スキルアップ動画版」って思ってもらうと近いかな

動画学習のメリットについては、以前こちらの記事でも触れています。

kinoblog

プログラミング初心者は入門書より動画がいい？独学の学習法を比較

🕒️2019年8月7日

 プログラミング初心者は動画から始めるのがおすすめプログラミング初心者は、いきなり分厚い入門書から始めるより、動画で全体のイメージを掴んでから学ぶ方が挫折しにくい傾向があります。これは、以前入門書だけで挫折した経験をもとにした実感です。プログラミング勉強するなら、まず本を買うべきなんじゃないの？自分は最初それで挫折した口だから、今から始めるなら動画を先におすすめしたいなぜ動画の方が理解しやすいのか心理学には「画像優位性効果」と呼ばれる考え方があり、文字だけの情報より、絵や映像を伴う情報の...

こんな人におすすめ

• 年収アップやキャリアチェンジのためにスキルを学びたい人
• 仕事に関連する資格取得やスキル獲得が必要な人
• プログラミングスクールを検討しているが、まず費用を抑えて試したい人
• 気になる技術を試しに学んでみたい人

Udemyの価格帯とセールの仕組み

通常価格はコースによってばらつきがあり、数千円〜2万円台のものまでさまざまです。ただしUdemyは頻繁にセールを実施しており、セール期間中は定価から大幅に割引された価格で購入できることが多いです。

プログラミングスクールが1講座あたり数十万円かかることも珍しくないのに比べると、コストパフォーマンスの高さは大きな魅力です。ただし、セールの実施時期や割引率は変動するため、気になる講座を見つけたら一旦ウィッシュリストに入れておき、セールのタイミングで購入するのがおすすめです。

セールいつ来るか分からないと、買い時が分からなくない？

かなり頻繁にやってるから、気になる講座はウィッシュリストに入れて待つのがコツだよ

30日間返金保証で失敗しにくい

Udemyには、条件を満たせば購入から30日以内であれば返金を申請できる制度があります。動画教材は「買ってみないと自分に合うか分からない」という不安がありますが、この保証があることで気軽に試しやすくなっています。

▶ Udemy公式：返金ポリシー

講師の質は信頼できるのか

Udemyは受講生からの評価がそのまま講座の評価に反映される仕組みのため、講師同士の競争によって講座の質が向上しやすい構造になっています。多くの講師が実名や経歴を公開しているので、書籍の著者と同じような感覚で信頼性を確認できます。

購入前には、受講者のレビューで「内容が説明と違った」といった指摘がないかを確認しておくと、ミスマッチを避けやすくなります。

講師に質問できるサポート体制

Udemyでは、講座内のQ&A機能を使って講師に直接質問できます。返信の速さは講師によって差がありますが、数時間〜1日程度で返信をもらえたケースが多いです。独学は「詰まったときに聞ける人がいない」のが弱点になりがちですが、この機能があることである程度カバーできます。

Udemyとプログラミングスクール、費用感の違い

項目	Udemy	プログラミングスクール
費用感	セール時は数千円以下も多い	数十万円規模が一般的
サポート	Q&A機能で講師に質問	メンターに直接質問・伴走支援
学習ペース	自分次第（自由）	カリキュラム・期限あり

「まず低コストで独学を試してから、必要ならスクールで環境ごと変える」という順番で検討するのも一つの選択肢です。

実際に購入してみた感想

実際にプログラミング系の講座をいくつか購入してみましたが、動画は本よりも挫折しにくいと感じています。文字だけの入門書は理解できても、実際に手を動かすタイミングでつまずきやすい一方、動画は講師の操作をそのまま真似できるので、手を止めずに進めやすいのが大きな違いでした。

よくある質問

Q. Udemyの講座に受講期限はありますか？
A. 基本的に期限はなく、購入すれば何度でも見返せます。

Q. セールはいつ行われますか？
A. 時期は不定期ですが、頻繁に実施されています。気になる講座はウィッシュリストに入れておくと、セール時に気づきやすくなります。

Q. 返金はどんな場合でもできますか？
A. 購入から30日以内かつ、Udemyの返金ポリシーの条件を満たす場合に申請できます。詳細は公式の返金ポリシーページを確認してください。

まとめ

• Udemyは期限なしで見返せる買い切り型の動画講座サービス
• セールを狙えば、プログラミングスクールに比べて圧倒的に低コストで学習できる
• 30日間返金保証やQ&A機能があり、独学のデメリットをある程度カバーできる
• まず低コストで試してから、必要に応じてスクールを検討するのも一つの進め方

---

The post Udemyとは？コスパよくプログラミングを学ぶ使い方と注意点 first appeared on kinoblog.

プログラミング初心者は動画から始めるのがおすすめ

プログラミング初心者は、いきなり分厚い入門書から始めるより、動画で全体のイメージを掴んでから学ぶ方が挫折しにくい傾向があります。これは、以前入門書だけで挫折した経験をもとにした実感です。

プログラミング勉強するなら、まず本を買うべきなんじゃないの？

自分は最初それで挫折した口だから、今から始めるなら動画を先におすすめしたい

なぜ動画の方が理解しやすいのか

心理学には「画像優位性効果」と呼ばれる考え方があり、文字だけの情報より、絵や映像を伴う情報の方が記憶に残りやすいとされています。プログラミングも、実際にエンジニアが画面を操作しながらコードを書いていく様子を見た方が、「何をしているのか」のイメージが掴みやすいと感じています。

特に初心者のうちは、エディタの使い方やターミナルの操作といった「本には書きづらい細かい動き」でつまずきやすいので、その点でも動画は相性がいいです。

動画学習のメリット

• 実際の画面操作を見ながら学べるので、環境構築やエディタ操作でつまずきにくい
• 倍速再生ができるサービスも多く、時間の融通が利く
• 講師の説明の間（ま）や強調から、重要なポイントが直感的に分かりやすい

入門書にも意味がある理由

動画をおすすめしつつも、入門書がまったく不要というわけではありません。文字として整理された情報は、頭の中の知識を体系立てて整理するのに向いています。動画で「なんとなく分かった」状態のものを、本を読むことで言語化し直すと、理解が一段深まる感覚があります。

ただし、初心者のうちから分厚い入門書に手を出す必要はなく、あくまで動画で得たイメージを補強する位置づけとして、軽めの入門書を併用するくらいがちょうどいいと感じています。

初心者向けの入門書の見分け方

入門書といっても難易度はさまざまです。以前挫折した入門書はページ数が多く余白がほとんどないタイプで、初心者にはハードルが高すぎました。

• 易しい入門書：余白が多く、図解でプログラミング全体の流れがイメージできるもの
• 難しい入門書：活字がぎっしり詰まっていて、前提知識がある人向けに書かれているもの

目安として、2週間ほどで（分からない部分は飛ばしながらでも）2〜3周できるボリュームの本を選ぶと、挫折しにくいです。

動画・入門書・スクール、結局どれが一番効率的か

方法	費用感	向いている人
動画教材	数千円〜（セール時は割安）	まず全体像を掴みたい人
入門書	数千円	動画で得た知識を整理したい人
プログラミングスクール	数万円〜数十万円	独学でつまずいた経験がある人、転職まで期限がある人

独学（動画＋入門書）は費用を抑えられる一方、疑問点を自分で解決する必要があります。「調べても分からない」状態が続いて挫折しそうな場合は、スクールで質問できる環境を作るのも一つの選択肢です。

実際にやってみて感じたこと

以前挫折した入門書を、別の教材で基礎を学んだ後にもう一度読んでみたところ、驚くほどすんなり頭に入ってきました。同じ本でも、先に動画でイメージを作っておくかどうかで、理解のスピードがまったく違うと実感した出来事です。

同じ本なのに、そんなに変わるものなんだ

うん。前提のイメージがあるかないかで、文字の入り方が全然違ったよ

よくある質問

Q. プログラミング初心者はまず何から始めればいいですか？
A. まずは動画教材で全体のイメージを掴み、そのあと軽めの入門書で知識を整理する順番がおすすめです。

Q. 入門書は不要ですか？
A. 不要ではありません。動画で得た感覚的な理解を、文字として言語化し直すことで理解が深まります。順番の問題です。

Q. 独学とスクール、どちらがいいですか？
A. 費用を抑えたいなら独学、疑問点をすぐ解決できる環境が欲しい・転職までの期限があるならスクールが向いています。

まとめ

• 初心者はまず動画で全体像を掴んでから、入門書で知識を整理する順番がおすすめ
• 入門書は「余白が多く流れが分かるもの」を選ぶと挫折しにくい
• 独学で行き詰まりを感じたら、スクールで環境ごと変える選択肢もある

初心者のうちは、プログラミングという未知のものに対して漠然とした不安を感じやすいものです。まずは動画で「エンジニアが実際に何をしているか」を見て、少しずつイメージを具体化していくのがおすすめです。

---

The post プログラミング初心者は入門書より動画がいい？独学の学習法を比較 first appeared on kinoblog.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。

個人的にBootstrap編は楽しかったです（英語抜きにすれば）。

というのも僕はBootstrapを以前から学んでいるんですよ↓。

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

なんでBootstrapを勉強するんだ？

それはですね

Bootstrapを学んでおけば、ボタンとか、ナビバーとかが簡単に実装することができるからです。

プログラマーやエンジニアが

余計な負担をかけずにコーディングをしたいと思っています。

そんなとき、Bootstrapを使えば負担が急激に減るでしょう。

詳細は下記に↓

Bootstrapってなんなの？

さて、そもそもBootstrapとは何でしょうか？

元々はあのTwitter社が開発したCSSフレームワークです。

フレームワークとは

ボタンを思い浮かべてください。

皆さんが思い浮かべているボタンは、デザインが変わっているだけで、

基本的な機能は大きな違いはないと思います。

「ボタンがあってそれを押すと何かが起動する」って感じです。
こんな皆さんが思っている当たり前なことをHTMLで１からコーディングするのって面倒くさいですよね。

フレームワークはそれを解決してくれるありがたいものなんです。

「ボタンがあってそれを押すと何かが起動する」
この「ボタンがあってそれを押す」ところをCSSを使わずに実装することができます。

フレームワークは以下の言い換えることができます。

どうでしょうか。イメージつきましたでしょうか？

テンプレートがもうすでにあって、僕たちはテンプレートに装飾するだけでいいんですよ。

Bootstrapは数あるwebフレームワークの中で最も選ばれているフレームワークです。

DAY11. 『Bootstrapの基本を学ぼう』

DAY12. 『Bootstrapでレイアウトを作ろう 前編』

DAY11. 『Bootstrapの基本を学ぼう』
デイトラも1/3を突破👏スゴイ🎉
ここまで来たら完走しましょ‼️
️
今日からは、最も有名なCSSフレームワークの一つ『Bootstrap』を使ったコーディングを学びます。まずは基本を抑えましょう！

課題内容はこちら👉https://t.co/rYeDi2XTq7#30DAYSトライアル pic.twitter.com/hj0YCLkmfA

— ショーヘー@東フリCMO (@showheyohtaki) September 18, 2019

DAY11. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍

DAY12. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍

課題詳細はこちら👉https://t.co/rQ5n0z9E2B#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/NqK4ODWLMs

— ショーヘー@東フリCMO (@showheyohtaki) September 19, 2019

ドットインストールで『Bootstrap 4入門』を観て勉強しましょう！

ドットインストールはProgateよりも教材数が多く、

無料の枠でも学べることが多いので今後もお世話になると思います。

ブックマークを推奨します！

次はGridレイアウトです。

現在では、パソコンじゃなくスマートフォンやタブレットで見る人が増えました。

Gridレイアウトはスマートフォンやタブレットの幅に合わせてくれるものです。

これも、Bootstrapで簡単に作れちゃうんです。

初心者がよくやるミス

CSSとBootstrapを読み込む時、

必ずCSSは下に置くこと、

なぜならどのプログラム言語やマークアップ言語でも、上から下に読み込むからです（これを順次処理と呼びます）。

例として、僕はCSSはタイトルの下に配置して置くと決まっています。

　　　　　　　　　　　　　　　　　　（中略）
　　
　　
　　

これがもし逆ならCSSがBootstrapに上書きされてしまいます(これを順次処理といいます)。

基本的にCSSは下に配置して置くのが無難です。

DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①

DAY14. 『Bootstrapを使ってビジネスLP制作②

DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①』
DAY13はドットインストールを終わらせ、YoutubeのBootstrapチュートリアルでLP制作に入っていきます。今日は39:00まで進めましょう💻

課題詳細👉https://t.co/9dNMQLnwyd#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/HFigrVbeh8

— ショーヘー@東フリCMO (@showheyohtaki) September 20, 2019

３日間続いたドットインストールで『Bootstrap 4入門』レッスン#16〜#22クリアです！！

DAY14. 『Bootstrapを使ってビジネスLP制作②』
今日でデイトラ開始から2週間です‼️初めてコードに触れてから2週間でここまで来たって本当にすごい🎉
デイトラはまだ続きますが、まずは2週間お疲れ様でした☺️

今日の課題はこちら👉https://t.co/MYofuAgdfc#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/egop0cdNlz

— ショーヘー@東フリCMO (@showheyohtaki) September 22, 2019

YouTubeで英語の動画を観てコーディングです。

DAY13. 動画の39:00

DAY14.最後まで

少し長いですが、

ただ観たままコーディングするだけなので（英語は無視で、じゃないと疲れます）、

「海外でも、同じなんだ」という感想を持っていただければこの課題は完了です。

急に理解できなくても、大丈夫です。

使っていくうちに慣れていきますから。

終わりに

お疲れ様でした。

containerクラスとrowクラス、text-centerクラスはよく使うので自分でググって理解するのをおすすめします。

Bootstrapは、

「あるクラスは既に修飾されたものがあって、自分がCSSに何も書かなくてもいいんだ！」という理解で大丈夫です。

では、また

ここまで読んでくれてありがとうございました。

次回はこちら↓

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

2020年5月21日

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS first appeared on kinoblog.

こんにちは、キノ(@zB75pWavnhDTIxr)です。

今日は前々から書きたかったSkill Hacksについてのレビューを書いていきます。

本当なら、もっと早くにレビューを書きたかったんですけど、

コーポレートサイト作成演習 という追加コンテンツがあってそれを消化してからレビューをしようと思い、Blog Hacksを先に書きました。

結論を先に言います。

初心者にオススメです。

ここでいう、初心者とは「１からプログラミングをして成果物を作ること、そしてその成果物をネットで公開できない人」を指します。

迫　祐樹って何者なの？

 

中高生から社会人まで，今まで3000人以上にプログラミングを教えながら, フリーランスとして活動する学生エンジニアブロガー．
月18万回読まれる当ブログ，ロボット・IT雑食日記を運営中．

プログラミングスキルを使って収入を上げ，ブログや電子書籍等をはじめとするスモールビジネスや資産運用で人生のセーフティネットを構築中

……ロボット・IT雑食日記のプロフィール欄より引用。

迫さんの本業はエンジニアで、2018年10月25日より、株式会社スキルハックスを運営しています。

Skill Hacks（スキルハックス）の内容は？

……Skill Hacksから引用。

↑上記に、新たに2019年2月28日 コーポレートサイト作成演習(8本)が追加されました。

これは、クラウドソーシングサイトで最初の案件を取るためのコツや、

HTMLやCSS、Bootstrapを使ってコーポレートサイト＝ランディングページ（LP）を作って実践的なことが学べる章です。

上記の章で言うと01章～04章の知識を使って、よりフリーランス向けにした感じですね！

Skill Hacksを学習した後は、エンジニア初心者を脱しているので、下記のサイトで実践することができます。

または、

クラウドソーシングとフリーランスエージェントの案件探しのコツは、

キーワード入力時に「未経験者」や「未経験者歓迎」、または「コーディング」など検索をかけると、未経験者でもできる案件が絞り込めます。

Skill Hacksを学習した人は「Ruby」や「Rails」などのキーワードから探せますね。

みんなのレビューは？

僕が作っているプログラミング学習教材， #SkillHacks に関するつぶやきをまとめてみました！
おかげさまで大好評をいただいていております．受講検討中の方はみんなの感想を確認してみてください！

⚡️ 「プログラミング学習教材『Skill Hacks』みんなのつぶやきまとめ」https://t.co/dSnC1z9JIj

— さこ社長@Brain代表（ユーザ数36万人突破！） (@sako_brain) August 25, 2018

概ね好評です。

Progateというサイトを併用して学習している人が多い印象ですね。

僕も併用して学習しています。

Progateの知識をSkill Hacksで実践的なアウトプットに昇華していくこともできます。

初心者にオススメなのがこの学び方です。

というのも、僕はどうやってエンジニアやプログラマーが実践的なプログラミングしているのか気になったので。

質問してみた感想

Blog Hacksにもあった質問は無制限サポート、そして質問はLINEでの受付です。

迫さんは「質問すること＝時間を節約すること」ってスタンスなので、気軽に質問できましたね。

僕は３回質問しました。うち1回は、僕が英語できなかったのが原因です(笑)

早い、早すぎてこっちが申し訳ないと思うくらい早い。

なのに、的確。半日もかからないで問題解決です。

どうやら受講生はみんな、つまずくところは同じみたいで

同じような回答を返しているようです。

感想は非常に良かったです。

この質問以外にも、

「何言ってんだ、こいつ…」レベルのとんちんかんな質問も丁寧に答えてくれました(;´･ω･`)

終わりに

残念ながら、この講座は有料ですが、

僕はプログラミングスキルを早く身につけるには、

教えられる人に教わり、質問しながらアウトプットした方が圧倒的に早いということに気づいたわけです。

Skill Hacksの良さは迫さんがプログラマーやエンジニアは問題にぶち当たったとき、

こういう思考で解決するんだよって教えてくれるのがいいです。

僕はSkill Hacksを知ったきっかけは迫さんがYouTubeで迫さんのプログラミング挫折した話を聞き、共感したからです。

迫さんは本でJavaを勉強して、環境構築を導入するところから躓いたらしいです。

ちょうど、僕も同じ経験があったので共感したんです。

僕は質問するなら、初心者の気持ちが分かる人に教わりたいなと思っていたので。

では、また

ここまで見てくれてありがとうございました。

The post 【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】 first appeared on kinoblog.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

８DAYS~10DAYSは環境設定編

Progateでプログラミングを打っていましたが、

ここからはローカル（自分のパソコン）でプログラミングをしましょう！

エディター（プログラミングに適したメモ帳）を導入するところから始めます。

エディターはかの有名なVSCodeで、プログラマーやエンジニアには必須ですね！

大部分が導入するだけなので、書くことは少ないのですが、

よろしくお願いします。(*´･ω-)b

DAY8. 『エディタをインストールしよう』

DAY8. 『エディタをインストールしよう』
いよいよProgateを卒業のとき！
これから先は実務と同じく、ローカル環境でコーディングしていきます。
まず、コーディング作業を行うために必須の『エディタ』を用意しましょう。

👇解説https://t.co/AgdzgnzOAX#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/MMt47bZNpt

— ショーヘー@Webエンジニア (@showheyohtaki) January 13, 2019

Progateから自立です。ローカル環境でプログラミングしましょう！

エディターのいいところは、プラグイン（機能）が多くあるところです。

メモ帳でも開発できるのですが、ミスに気がつかない場合が多く、

エディターは他に候補が出てくるので、スムーズに開発できるというメリットがあります。

ショーへーさんのオススメしているプラグインの説明は、アルパカさんがもう説明してくれているので、こちらをご覧ください↓。

↑上記で載っていないショーへーさんのオススメしているプラグインはこれです。

これは最初、使った感想は「要る？これ」だったけど、要ります！

理由はインデントが分かりやすい。何より見た目が綺麗になる。

と、こんな感じに見やすくなっています。

DAY9. 『基本のショートカットを覚えよう＋ファイルパスを理解しよう』

DAY9. 『基本のショートカットを覚えよう＋ファイルパスを理解しよう』

DAY9は、エディタでの作業効率を上げるためのショートカットとファイルパスについて学習します。詳細はこちらのGoogleドキュメントから☺️
👉https://t.co/XXHrokhrTD#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/0bQWgHSkUx

— ショーヘー@Webエンジニア (@showheyohtaki) January 15, 2019

作業効率を上げるために、1日１つでいいから

ショートカットを覚えましょう。

DAY10.『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』

DAY10. 『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』

今日でローカル開発の準備は完了します。明日からはローカル環境でコーディングする課題を出すので、しっかり環境整えといてくださいね👍
課題👉https://t.co/6O03CD3Nsp#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/vSUr7CX880

— ショーヘー@Webエンジニア (@showheyohtaki) January 16, 2019

Google Chromeのデベロッパーツールとは、

右クリックで、でてきた選択肢の下部に「検証」と出てくるはずです。

使い道は、

デベロッパーツールは慣れです。

僕は2週間経ってようやく慣れてきたんです。

終わりに

そしてフロントエンドエンジニアになるために、これで環境構築完了です。

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

The post 【初心者】30DAYSトライアルをやってみた④ 環境設定編　8DAYS~10DAYS first appeared on kinoblog.

こんにちは、キノ(@zB75pWavnhDTIxr)です。

4月11日に、30DAYSトライアルを終わりました！

次は30DAYSトライアルの2ndを進めています。

今日はProgate編 DAY5～DAY7について書こうと思います。

下記の通りに進めてみてください！

↓詳細はこちらからどうぞ！↓

後から #30DAYSトライアル を始められた方のために、これまでの課題とTipsをまとめたモーメントを作りました。新しい課題やTipsは随時更新していきます👍https://t.co/m0yaoLnoin

— ショーヘー@Webエンジニア (@showheyohtaki) January 16, 2019

Progate編

（補足説明です）DAY4    HTML & CSS 中級編最後まで②（absoluteの話）

DAY3に続いてレイアウトを学びます。個人的には最低２～3回やらないと身につかないと思います。

つまずきやすいところはposition : absoluteですね。

基本的にどっちか１つしか使わないのはまれです。

これらを使って文字と画像を重ね合わせています。

なぜ、この２つを使うのか。それはスマートフォンやタブレットから見ると崩れちゃうのを防ぐためです。

absoluteは「絶対的」とあるように、例えば、top:0;と指定をとれば、上頂部へ固定されます。

パソコンやスマートフォンなどの画面幅が違うものがあったとしても同じような見た目に見えるんです。

marginやpaddingは一見してみるとパソコンだと見栄えが良いのに、スマートフォンで見ると崩れているのが多いんです。

これは、marginやpaddingは「パソコンの余白」に合わせただけで、

スマートフォンやタブレットの余白に合わせたってわけではないんですよ。

使い方は、

配置したい文字（画像）をクラスを割り当ててやって、そのクラス名にposition : absoluteを付与するんです。

このまま何もしないとbodyタグを基準に動きますから、そうならないようにposition : relativeを使います。

そして、position : relativeは通常、親要素に使います。

hiro pon-programmingさんの動画で詳しく解説しています。↓

DAY5　 HTML & CSS 上級編まで

DAY5.『Progate HTML & CSS 上級編』
プログラミング学習サイト『Progate』( https://t.co/2CJ1eEz9Hd )でレスポンシブなサイトを作るためのコーディングを学びます！

DAY5は上級編を終わらせましょう
メディアクエリはもちろん、box-sizingも超重要です‼️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/0OtXSOUIme

— ショーヘー@Webエンジニア (@showheyohtaki) January 11, 2019

重要な概念である「レスポンシブデザイン」、パソコン、スマートフォン、タブレットなどで画面が崩れないように設定をするんです。

メディアクエリは正直、これだけだと身につかないと思います。

これは、何度か模写コーディングをするしか身につかないと思いますね。

bootstrap編で模写コーディングをするので、自分のものにしてください。

Progateではresponsive.cssというファイルを作って、普通のcssとは別々に管理してました。

１つのcssファイルを使うのか別々に管理するのか。

これは、別にどっちでもいいです。

僕は１つにした方が見やすいと思ったので、あえてメディアクエリのファイルを作らなかったので…。

30DAYSトライアルの2nd、１DAYの課題をやり終えたとき、メディアクエリは泥臭い作業だと感じました。

「自分で見て確認をしながら画面上のバランスを整える」

メディアクエリに正解はないようです。

ただ、自分が見た感覚を信じていくのみです。(*´･ω･`)b

#30DAYSトライアル

1DAYやっと終わった( ง ×ω×`)ว💨

初回から難しいよ😢

ハンバーガーメニューとメディアクエリって実装したよ(*ゝ｀ω・)

手探りだから、雑に仕上がってるけど😣💦

2DAYは1DAYよりも簡単だったよ☺️
カード実装までスムーズにいったよ

明日には終わると思う( ง •`ω•´)ว pic.twitter.com/EmSAQ4sagz

— キノノート (@zB75pWavnhDTIxr) April 15, 2019

DAY6　HTML & CSS 初級・中級道場コースとDAY7　HTML & CSS 上級道場コース 

DAY6. 『Progate HTML & CSS 初級・中級道場コース』
Progateの HTML & CSS コース( https://t.co/2CJ1eEhyiD )で学んできたことの総復習です。

DAY6は、初級・中級の道場編を1周ずつやるのが目標‼️
詰まったところはスレッドに戻って復習してください👍#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/svbBN2n2W1

— ショーヘー@Webエンジニア (@showheyohtaki) January 11, 2019

DAY7. 『Progate HTML & CSS 上級道場コース ＋ 復習・休憩』
Progate（https://t.co/8q0BqOq0qA）で、レスポンシブデザインの復習をしてください。
早く終わると思うので、そのあとは今週学んだことの復習と息抜きに当てましょう👍#30DAYSトライアル#30DAYSトライアル課題#1週間お疲れさまでした pic.twitter.com/QeWRRm28Mf

— ショーヘー@Webエンジニア (@showheyohtaki) January 12, 2019

課題の復習です。正直いって一回では無理でした。

「今まで習ったことをアウトプットする」

これが一番難しい。

ヒントを見ても分からなければ、答えを見てもいいと思います。

ただし、自分がどこでつまずいたのか考えるまでは見てはだめです（２分でいい）。

個人的に難所だったのが、「<div>を囲うのにどこまで囲えばいいんだ？」って思ったりしていましたね。

余裕がある方はこちら↓（30DAYSトライアルの1stではJavaScriptは取り扱わないので注意！）

余裕がある人向け課題 『JavaScript (ES5) Ⅰ〜Ⅳ』
Progate（https://t.co/8q0BqOq0qA）でJavaScript (ES5)Ⅳまでやりましょう。
トライアルの目的「月5万稼ぐ」ためのスキルとしては、JavaScriptはなくてもOK。
でも変数・演算子・if・for・関数はどの言語でも基礎なので、知っておくとベターです👍 pic.twitter.com/hvQNgw2cIt

— ショーヘー@Webエンジニア (@showheyohtaki) January 12, 2019

ランディングページ（LP)って何？

さて、中級編ではランディングページ（LP)作りました。

LPは企業がユーザー（僕たち）に情報を伝えることために作られています。一言で言うとウェブ上で自社の商品やサービスのチラシです。

そして、クラウドソーシング上で企業がフリーランスエンジニアに向けて発注しています。

下記のサイトがよく知られるクラウドソーシングですね。

「コーディングのみ」や「html css」と検索すればランディングページ（LP)制作案件があります。

個人的にランサーズの方が見やすかったです。

終わりに

これでProgate編は終わりです。

一度で理解できないはずです。

ちょくちょく戻ってくると思いますので、また再チャレンジしてみてください。

「あなたがつまずいたところはみんながつまずいたところです」を忘れずに

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

The post 【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7 first appeared on kinoblog.