キノ(@zB75pWavnhDTIxr)です。

今回はAstroというJSフレームワークについて紹介したいと思います。

Astroは、最近になってできたフレームワークでReactやVueに感覚的に近いと思います。

お、久々にプログラミングの記事？

気になっちゃってね……。

Astroのメリット

僕がAstroを気になっている１番の理由は、

『Astroは、スピード重視したウェブサイトを作ることに特化したJSフレームワーク』だからです。

スピード重視？

まあ、いろいろ特色があるんですけど、ここではスピード重視で行かせてください。

スピード重視が何で良いか？

それはSEOに良い影響があるからです。

皆さんも経験があるはずです。

スマホ（あるいはパソコン）で見たいと思ったページが重たいと見たくなくなる……。

以前、僕が見た記事にはユーザーが『遅い』と感じたページの滞在時間は1~2秒ほどだそうです。

ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる

短いですね。

滞在時間はSEOに反映される重要な項目なので、

僕らエンジニアはウェブサイトのパフォーマンスを上げたい時、なんとかして軽くしたいんです。

内部修正して、要らないコードを削除したり（リファクタリングといいます）、もしもページに画像が使われているのなら、その画像を軽くするとか。

AstroはNext.jsよりも速いということで（スゴイ）、なんでそんなに速いのかカラクリを説明しているページがありました。

『コンポーネントのフロントマターの内部にJavaScriptコードを含められますが、それらはすべて、ユーザーのブラウザに送られる最終的なページからは取り除かれます。その結果、デフォルトではJavaScriptが含められることはなく、より高速なサイトが実現します。』

Astro公式　コンポーネント

Astroテーマを使用してポートフォリオサイトを作ってみた

要するに、astroは公開時に自動的に元々あったJavaScriptを排除します。

その代わりに、その場で必要なHTMLとCSSを生成して、それを公開します。

そんなのことして、機能は大丈夫なの？

大丈夫です！百聞は一見にしかず！

どうです！この動くルフィを！！

Astroのポートフォリオサイト

Astroでポートフォリオサイトを作ってみました。

ルフィにJavascriptをかけてやったところ、開発時と公開時どちらも同じ挙動をしています。

まあ、正直ルフィにJavascriptかけただけでは、ReactやVue、Next.jsと同じですけどね。

Astroテーマをダウンロードしてみよう

Astro公式にいって『Resources』の『Themes』をクリック

適当なfreeテーマを選んでください。（僕はAstroshipを選びました）

vsコードかまたはWindowsならコマンドプロンプト、imacならターミナルを開いて、

管理しやすいように、cd desktopに移動して

慣れない黒い画面に惑わされずに、
git clone (githubで取ってきたURL)を打てばひな形が完成です！

終わりに

まとめ

今日はAstroの魅力について語っていきました。

まだ後発だから、ReactやVueよりリファレンスとか資料が少ないですね

Astroはまだまだ魅力がありますので、Astro公式

勉強頑張っていきたいです！

お疲れ様でした！

では、また

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

こちらもおすすめ↓

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

2019年3月12日

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

2019年5月5日

The post Astroテーマで高速パフォーマンスとモダンな開発体験しよう！ first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

キノ(@zB75pWavnhDTIxr)です。

今回はFigmaというデザインツールを紹介したいと思います。

Figma（フィグマ）は、近年webデザイン業界で急速に広まっているツールであり、その使い方によってデザインプロセスを向上させることができます。

Figma　公式

どうしたの、急に？

僕の勤めている会社がFigmaを導入することになってね。

今、Figmaを勉強しているところだよ。

会社では主にAdobe XDを使っていました。

Figmaを使うようになった経緯は世界シェアと使いやすさ、あとAdobe XDと操作感が似てる点ですね！

じゃあ、もうAdobe XDは使わないの？

いや、会社ではプロジェクト毎に使い分ける方針ですね！

Adobe XDにはAdobe XDの良さがありますからね。

Adobe XDは当然ながら、Adobe製品と互換性があります。

でも、その優位性が崩れるかもしれません。

Adobe社はFigmaを買収しました。

下の記事によるとAdobe XDは開発中止になっているようです。

FigmaとAdobe XDの比較 – Figmaはどこが違うのか?

Adobe XDとFigmaがアップデートが連動するか、はたまた住み分けるのか。

Figmaを買収のには何かしらの理由があるはずですから注目したいところです！

Figmaのメリット３つ

共同編集と共有機能がしやすい

Figmaはクラウドベースのデザインツールであり、チームでの協力が容易になります。

つまり、共同編集と共有機能がしやすいという長所があります。

リアルタイムで編集できるから、Adobe XDと比べて優秀ですね。

多人数で生産性を求めるならFigmaに軍配が上がりそうです。

Figmaはプラットフォームの制約のなさ

Figmaはインターネットさえあればどのデバイス、Mac、Windows、Linux、iOS、Androidなどの主要なOSでもアクセス可能！

一歩、Adobe XDはデスクトップアプリケーションなので、使いたいデバイスにインストールする必要があります。

インストールしないでいいって便利ですね！

オートレイアウト機能は便利！

オートレイアウトを使用することで、要素の配置やサイズの変更が自動で調整され、デザインの柔軟性が向上します。

レイアウトを作るには、親ボックスと子ボックスという概念があります。

大きなレイアウトも小さなレイアウトもボックスというパーツで考えるんです。

Mayuko Sogaさんの動画が分かりやすいです。

Mayuko Sogaさんのオートレイアウト機能のyoutube動画

親ボックスを収縮や拡大すると子ボックスもそれに比例して伸縮していく。

つまり、レスポンシブデザインの作成を簡単にできちゃうんです。

勉強方法はやっぱり動画でしょう！

動画でインプットして、自分でマネしてみる。

基本的な操作のおすすめの動画はこちら↓

HIROさんのFigmaのyoutube動画

網羅性抜群です！

この２つのHIROさん動画とMayuko Sogaさんのオートレイアウトだけでも、

十分にwebエンジニアとして業務していけるんじゃないでしょうか。

終わりに

まとめ

今日はFigmaの魅力について語っていきました。

Adobe XDがアップデート中止になっているからといって、Adobe XDに未来はないというわけではないので、

FigmaとAdobe XD、両方に目をかけていきましょうね。

AI技術もあるしね。

そうそう。

元々、FigmaとAdobe XDはそんなに操作感が違うわけじゃないし。

それが買収されて１つの会社になっているので、今よりも近いものになっていくのではないかなと。

では、また

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

こちらもおすすめ↓

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

2019年3月12日

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

2019年5月5日

The post Figmaのメリットと使い方【webエンジニア】 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)です。

みなさんはQiitaってサイト知ってますか？

プログラミングが何のことか、まだよく分かっていない初心者から

プログラミングのことなら何でも知っている上級者まで

無料で使えて、プログラミングに慣れるのに便利なサイトです。

Qiitaは様々なレベルのエンジニアが投稿してる

これは言い換えるなら、様々(初心者からプロまで)なレベルのエンジニアの視点から

様々なレベルの記事が見られるんです。

自分が理解したことでも、別の視点から新しい発見が見られるかもしれません。

あー、そういう見方があったなと思わず感心してしまうほどです！

クダけた口調で説明くれるエンジニアもいて面白い記事もあって、プログラミングって難しいと考えがちな初心者にぴったりのサイトです！

初心者におすすめしたいのはココです。

初心者には、ぜひとも試してもらいたいです。

勉強というか、気持ちとしては読み物として楽しめばいいじゃんじゃないかって思います！

きっとプログラミングがもっと身近に感じられると思います。

無料ですしね！

僕はこうやって利用しています【実践！　Qiitaの使い方】

#100DaysOfCode #駆け出しエンジニアと繋がりたい

毎日キータを読んでるんだけど、
これいいなって利用法があったから共有したい(*´ω｀*)

・自分が検索したワードの記事を5つチェックして、気になる記事があればストックする

・ストックした記事が3つ貯まる毎に、振り返って復習する

これだけ👍

— キノノート (@zB75pWavnhDTIxr) September 23, 2019

解説していきます。

毎日読むこと、ただしサボりはOK

サラッと言いましたけど、これが一番の難関です。特に初心者はキツい気がする。

「毎日読むこと」っていってますけど、途中でだらけて１日休んでもいいんです。

あくまで「毎日読むこと」は手段であって、

目的じゃないということは念を押して言っておきます。

目的はプログラミングの知識を得ることなはずです。

手段が難しいことや時間がかかることは習慣化するのは難しいです。

脳科学では、習慣化させたいなら、

テクニックとして、時おりサボることをおすすめします！

なぜなら、人の脳は自分からめんどくさいことをやるのはとことん嫌います。

最初から無理はせずに、

習慣化したいこととサボることを両方並行してやると、

脳の負担が少なくなるし、何より自分のペースを見つけやすくなります。

僕も最初はキツかったです。

でも、サボりながらやっていいと思ったら、毎日できるようになりました！

まずは、２日連続を目指していきましょう！

自分が検索したワードの記事を5つチェックして、気になる記事があればストックする

５つと言いましたが、いきなり５つ読むのがキツいのなら、１つでもいいんですよ。

上にも書きましたが、

まずは、継続させることを念頭に置く。

ストックした記事が3つ貯まる毎に、振り返って復習する

僕はこうやって使っています

取っておいた良質な記事をリラックスしてスマホやタブレットで見てます。

例えば、入門レベルの記事を３つ復習すると

該当箇所が見つかり、複数のエンジニアの目線で同じことを言っているので、理解が深まるんです。

慣れてくれば、「これ、あの記事と同じこと言ってるぞ！」という感想がでてくるはずです。

これが出たら、こっちのもんです！あとは、記憶と記事を照らし合わせるだけです！

(応用編)コピペでもいいから再現する

(応用編)パソコンがあるときに

経験上、

コピペすることによって再現する経験が身につきます

「知ってる」ってことにもレベルがあるんですよ。

「見たから知ってる」と「コピペしたから、感覚的に知ってる」

２つの違い分かりますか？

学校、資格の勉強と同じですね。

数学の授業を思い浮かべてください。

公式や例題を何度も書いた記憶があるはずです。

黙って書いていると、「どうしてこの処理を書くの？」ってところがでてくるはずです。

そして、やったことがある方は分かると思うんですが、

後になって分かるようになるという経験がありませんか？

あの感覚が数学よりもプログラミングの方が目に見えるから、感覚的に分かりやすいんです。　

Qiitaの次は、Udemyをおすすめします！感覚的に分かるのは動画が１番いいと思います。

セール時に買うと１０００円～１５００円になるんですよ。

【初心者】プログラミング入門書よりまず動画を観て勉強するべし！

2019年8月22日

終わりに

ここで言っておきたいことは、僕のQiitaの使い方＝正解じゃないことです。

僕の使い方をあなたなりにカスタマイズしていき、あなたの利用法へと変えるんです。

「このペースで毎日続けられそうだな～」って感じで見つけてください！

お疲れ様でした。

では、また

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

こちらもおすすめ↓

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

2019年5月5日

The post 【初心者向け】Qiitaになれよう！【使い方】 first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

今日は、プログラミングの勉強法について書こうと思います。

実体験ですので、信頼性はあると思います。

タイトルにあるとおり、初心者であるほど本で勉強するより動画で勉強する方がいいです。

以前、僕は入門書に手を出して痛い目にあったことがあり、

その経験から入門書より動画の方が吸収力が段違いだと知ったんです。

入門書の前に動画を見た方がいい

何て言ったって動画を観る方が理解が早いからです。

皆さんも覚えがあるのではないでしょうか？

例えば、サッカーのリフティングを知らない人に説明しようとして、

リフティングしてる人の写真や動画があれば、スムーズに説明できるでしょう。

さらに、人は視覚情報に80%頼っています。

視覚を使うと、口頭で説明するよりも6倍以上記憶に残るんです。

引用元　画像優位性効果　UX　TIMES

文字よりも絵や動画の方が記憶に残りやすい。

心理学ではこれを「画像優位性効果」と呼びます。

「百聞は一見にしかず」って言いますよね。

視覚情報は文字とは違い、直感的、瞬間的に処理ができるんです。

初心者はプログラミングというものに、全然イメージできないので、

簡単な入門書か、もしくは動画を観てイメージをつければいいと思います。

動画はこちらがおすすめです。

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

コスパ最高！Udemyでプログラミングを勉強しよう！

さらに、Udemyは今、夏休みセールをやってます！

２０１９年８月20日から８月３０日までのセール対象の商品が1,200円からです。

大型連休期間にスキルアップしよう！

プログラミングスクールって１つの講座で約250,000円もかかるから、お財布に優しい！

入門書を読む意味

あります！

なぜなら、本は結晶化した知識だからです。

動画や誰かに教えてもらった知識は、頭の中では、まだ形になっていません。

文字は人間独自の高度な情報処理が求められるので、文字を見るだけで考えて思考するんです。

文字にするだけで理解が深まるんです。

頭の中の知識を整理するために必要だと考えます！

とはいえ、多くはいらないと思います。

初心者は簡単な入門書と動画でいいと思います。

プログラミング入門書にもいろんな難易度がある

#SkillHacks
以前、初心者の初心者だったとき、挫折した入門書読んでるんだけど

するする理解できるよ(*´ω｀*)
成長したなぁ😳

さすが、迫さん🤗

でも、これって入門書じゃなくない？🤔

だって400ページもあるし(´・ω・)σ pic.twitter.com/Tt7jEXklng

— キノノート (@zB75pWavnhDTIxr) August 2, 2019

Skill Hacksを学習して以前挫折した入門書を読んでみたら、するする頭に入ってきたんです。

このことがきっかけになり、僕は本より動画派になりました。

上の入門書は４００ページあったんですね。

ページ数というよりは、余白が全然なくて

学べるものはあったんですけど、初心者には難しいかな？って感想でした。

入門書にも比較的に簡単な入門書と、難しい入門書があり、

簡単な入門書とは、僕は「余白があって、プログラミングの流れが分かる入門書」だと思います。

逆に、難しい入門書とは、どういったものが挙がるでしょうか

僕は「余白がなくて活字ばかりで、初心者に優しくない入門書」だと思います。

基準は２週間の内に（飛ばしアリで）3周くらい回すことができる入門書がいいと思います。

入門書は「3ステップでしっかり学ぶ」シリーズはおすすめです。

僕はこの入門書を２週間の内、５周しました。

さすがに、５周も回していると全体の流れが分かり、

動画で得た知識を整理することができました。

3ステップでしっかり学ぶRuby入門

posted with カエレバ

ぐるぐる王国 ヤフー店

Yahooショッピング

Amazon

楽天市場

終わりに

初心者にはプログラミングは本当にイメージしづらいと思います。

僕も最初は「黒い画面を見てカタカタと何かを打ってる」

そんなイメージでした。

一番いい方法は、エンジニアがどうやって実装に持っていけるのか、

見て学習することです。

本では、それを実感できないので、動画を観るのをおすすめします。

では、また

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

こちらもおすすめ↓

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

The post 【初心者】プログラミング入門書よりまず動画を観て勉強するべし！ first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

今日はUdemyについて書こうと思います。

Udemyって「youtubeでCMで流れたなぁ」って感じで

知ってるけど、知らない人が多いように感じます。

におすすめします！

１つの講座に300,000円もかかるプログラミングスクールよりも

コストパフォーマンスが断然いいからです。

Udemyって何？

いつでも観られて、期限は無制限の有料の買い切り動画講座です。

ジャンルはプログラミングに限らず、デザイン、マーケティング、etc。

スキルアップのことならなんでもあると見ていいでしょう。

イメージ的には、youtubeの有料スキルアップ動画って思っていただければ大丈夫かなって思います。

価格帯は？セールを狙え！！

平時、プログラミング講座を見てみると

最低4,200円、高いもので24,000円です。

バラバラですね。

プログラミングスクールよりは安いかも…。いい講座教えてよ！

待った！！

今買うのは確認してからです。

実は、毎月不定期で、セールをやっているんですよ。

大体セール価格で1,300円～1,600円（９４％～９９％引き）でした。

僕はその時に、プログラミング講座を２つ買いました。

↑8月15日のセールの画像

普通、プログラミングの本は最低でも2500円以上しますよね。

講座によるのですが、１つの講座で18時間以上の講座もあるんですよ！

破格の値段ですね。

お財布に優しい…

ですので、セールが始めるまでに物色をするといいでしょう。

今現在５月13日は買い時ですね。

平時（セールをやっていない時）は何を買うかの物色する時ですね！

セールを見逃しても、何も問題ありません。

また、来月。

もしくは今月中にまたやるかもしれません。

頻繁にやっているんですよ。

ときどき見てセール時に買いましょう！

だからこそ、ブックマークをおすすめします。

サポートと品質は？

30日間返金保証

30日間返金保証だから安心！！気に入らなければ、即返品可能！

動画は情報なので、返品不可能って思っていました。

返品可能というのはありがたいですよね！

講師の腕は？

Udemyの講師はサービスを提供し、視聴者はお金を払う。

当たり前ですが、これは競争を生み、サービスがどんどん向上されていくんです。

このため、講師陣のほぼ全員が実名や経歴を載せているので、本と同様に信頼性があります。

僕は２つ講座を買いましたが、非常に良かったです。

講師に質問できる！

僕も質問しました。

講師方々の都合なので一概に言えないのですが、

返信は早くて8時間、遅くて1日くらいでした。

終わりに

僕は動画は本よりも挫折しないと思っています。

本も重要ですけど、

動画の質が上がったので、比率が低くくなったと思います。

【初心者】プログラミング入門書よりまず動画を観て勉強するべし！

2019年8月22日

では、また

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

こちらもおすすめ↓

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

2019年3月12日

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

2019年5月5日

The post コスパ最高！Udemyでプログラミングを勉強しよう！ 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

— 迫 佑樹@人生攻略ロードマップ著者 (@yuki_99_s) 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　初心者エンジニアブロガーの成長記録！.