そのコード、なんとかなりませんか?

プログラミング初学者です。お手柔らかに

【モテたい】模写コーディングしてみました。

ブンブンハローYouTube!!

 

f:id:psychoshock0832:20220403005839j:plain

 

どうもHIKAKINです。(勢い)

 

どうもpsycoprogram0832です。

本日なんですけども、先日こんな記事を書いたわけです。

 

psychoshock0832.hatenablog.com

 

模写コーディングYOUTUBE教材でやると簡単やで。って記事ですね。

 

この記事を見て、やってみたいなって思った方も少なからずいたみたいで

 

f:id:psychoshock0832:20220403010433p:plain

 

まぁ知り合いなんですけど。

ありがたいことにブログ読んでいただいてるみたいです(うれC)

 

 

そんで、あの記事見て、問題点が二つ出てきたと思うんですけど、

・そんなもん全部動画のコード写したらできるやろ

って言うのと

・お前コーディングできんのか

 

ですね。はい。

 

前回の記事の動画で一通り模写できた人はですね。もう一回やる必要はないと思いますけど、

画面に書いてあるコードを書き移しただけでは、成長できてないと思うんですよ。

なので、

 

1回目カンニング多めだったなって人は、次は見ずにやってみよ!だったり違うやつやってみよ。ってマインドでやってみてください。

って前の記事に付け足しとけばよかったです。

 

「お前コーディングできんのか」に関してですけど。

できなかったらヤバいわけですよ。できない奴があんな「教えます」みたいな偉そうな記事書いたら

「ケツしばいたろか」

って僕なら思うので今日、実際にやってみました。

 

ーーーーーーーーーーーーーーーーーーーーーーーー

 

今回なんですけど、以下の動画で紹介しているやり方を参照しました。

 

www.youtube.com

前回紹介した、なつこさんの動画の実践編ですね。

 

この動画の12:37秒までの手順は参考にしましたが、

僕はCSSはファイルを個別に作りたい派なんで、そこからはなつこさんとお別れして一人で頑張りました。

 

今回模写したサイトは以下

https://free-hp.net/clinic/cl_001/

 

・やってみて難しかったこと(知らなかったこと)

 

1.  hrefってそんな書き方やった、、、?

動画では<div><a href="">ブログ</a></div>

みたいに記述してたんですけど、僕は勘違いして覚えていて

<div href = ""></div>と記述してました。思い込みが一番良くない。

 

2.   おい背景に画像どうやって入れるんや

HTMLに <img = "">で画像を入れてそれを親要素にして、子要素を上に配置しようと考えてました。(無理でした)

MDNの以下のページを参照して解決しました。

developer.mozilla.org

 

3.   margin入れたら背景画像が消える

これはなぜ発生したのか分からなかったんですが、margin-topで余白を作ったらその分の背景画像が透過されずに白くなる。と言うことが発生しました。

親要素にposition:relative

子要素にposition:absolute :top :oopx ;

と入れて、marginではなく相対的に位置を決めてあげることで解決しました。

 

4.  要素の角を丸める

border-radius : oopx;で丸める。

 

ーーーーーーーーーーーーーーー

付録.1

 

やりながら感じた、知ってたらめちゃくちゃお得な情報を紹介します。

 

1.pxで要素の長さを指定するときは8の倍数で考える

これ、昔ドットインストールのデザインのカリキュラムに乗ってたと思うんですけど、

「理由は細かく説明しません。そういうもんだと思ってください」

って感じの説明だったんですよね。

模写コーデイングしてる際にpege ruler reduxっていう拡張機能を使って、要素の長さを測ってたんですが、

余白を測る時とか、「どこからどこまでが余白か分からない。」

 

ってことが起こるんですよね。

そんな時に、ざっくりと測って、8の倍数に近いpxを指定してあげると解決しました

 

どういうことかというと、

reduxで余白っぽい部分をざっくり測ると42pxの幅が出ちゃったと、

それに近い8の倍数は40だから40pxと想定できるな

ってかんんじで幅のサイズを決める考え方になるわけです

 

掛け算苦手な人はこれ見ればOK

dopp2.com

 

-----------------------------------

 

とまぁ色々やってみてできたのがこれ

 

お手本

f:id:psychoshock0832:20220403014806p:plain

 

自分が描いたページ

f:id:psychoshock0832:20220403014851p:plain

 

うん。

微妙。

 

課題としては

1.なんか背景画像が伸びてる

2. フォント

3.全体的にサイズ感

 

だと感じました。根気よく細かく細かくサイズを測りまくって、ピッタリなサイズを見つける作業ができなかった、

もう少し知識つけたらまたやってみようと思いました!

ーーーーーーーーーーーーーーーーーーーーーーーー

 

いかがでしたか?

今回はちょっと長くなりましたが読んでいただいてありがとうございました。

 

次回は

「競馬初心者でも有馬記念だけはやるべき!理由3選」にについて書いて行きたいと思います。

 

f:id:psychoshock0832:20220401004917j:plain

 

 

twitterもやっていますのでFollowしていただけるとuresiiです!!

 

twitter.com

【HTML/CSS】模写コーディング独学。それYouTubeで。【初心者向け】

f:id:psychoshock0832:20220331234112j:plain

今日は釣りサムネにしてみました。(お茶目)

どうも。サイコショッカー太郎です。本当です。

 

本日なんですけど、プログラミング初心者の皆さん。(お前もやろがい)

次に自分がどんな事を学べばいいか分からず、プロゲートを何周も何周も周回していませんでしょうか?

 

それはプログラミング学習ではなくて忍者わんこをムキムキにするゲームをやっているだけなので今すぐやめましょう。。。。。

 

そんな方達に今回おすすめしたいのが

 

[ 模 写 コ ー デ ィ ン グ ]  です。

 

これはなんなのかというと、読んで字の如く、

「既存のwebページを写経する」というHTML/CSSの練習方法です。

 

でも、いきなりwebページ見てこれできる人多分ほとんどいないと思うんですよ。

画像データとかどこから取るねんとか、要素と要素の間の幅どうやって測るねん。

みたいになって詰みます。

 

でまあ、色々やってみてですね。

結局、細かいやり方とかですね動画で学んでしまうのが一番手っ取り早いんじゃないかなと、気づいたわけですね。

 

マナブログさんのお動画の方でもこんな言ってました。

 

f:id:psychoshock0832:20220401000014p:plain

f:id:psychoshock0832:20220401000020p:plain

 

動画だと少し戻してまた見直せますし、止めてコード見たりできますし。

 

いい時代になったもので、YouTubeだと無料で見れますから。こんなにコスパの良い学習はないんじゃないかなと思うわけです。

 

そんな模写コーディングを今まさに始めたくなった人向けに、

 

【めちゃくちゃ参考になる模写コーディング動画3選】

を持ってきましたので発表していきたいと思います。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

1.Webの神様/ 

【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】

www.youtube.com

 

こちらの動画は、なつこさんと言うナビゲーターさんが、丁寧に説明しながらコードを書いてくれると言う動画です。

 

この動画では、序盤に、事前準備の説明がかなり細かく入っていて、模写コーディングに使える拡張機能や、画像の抽出方法、webページ全体のスクリーンショットの撮り方なども解説してくれます。

なので、初めて模写コーディングする方には特におすすめです。

全体的に動画を見ながら同じようにコードを書いていけば大丈夫なんですが、

 

CSSの章に入った段階で、動画のペースがグッと上がって、ちょっと初心者だとついていけなくなる感じがありました。

これはCSSのコードを自分で考える練習になると思えるので、プラスととるかマイナスととるかはあなたの理解度次第ですね。

 

 

2.Kawai Shotaro / 河相勝太郎

【HTML編・現役Webデザイナーが教える】初めてでもわかるHTMLコーディング入門

www.youtube.com

上記の動画で「置いて行かれた」「HTMLからまだよく分からない」と感じた方は河相さんのこちらの動画を参考にしてみてはどうでしょうか。

 

この動画は2部構成になっており、HTMLとCSSにそれぞれ分かれて説明されております。

動画自体はサクサク進んでいくのですが、簡潔でわかりやすい説明を常時イケボで聞けます。

 

この動画はとにかく一度最後までやりきってみる。がコンセプトになっているため、初心者を置いて行かないように、重点をしっかり説明しながら進めてくれます。

 

動画を見終わると、おしゃれなカフェのサイトのようなものを作れます。

レイアウトにもセンスがあるので、作り終わった時に結構達成感があると思います。

 

 

 

3.HikoPro / ITライフクリエイター /  

【模写コーディング】やり方・メリット・おすすめのツールを紹介!【HTML/CSS】

www.youtube.com

3つ目はちょっとおまけ的なものですが。

上記2つの動画のように、コードを見ながら一緒に書いていくと言う動画ではなくて、

 

模写コーディングの概念の説明や、

イケメン大学生が、HTML/CSSで模写コーディングすることによってどんなメリットがあるか。

模写コーディングにおけるワンランク上のスキル(多分現場でも使える)を身につけるツールを教えてくれます。

 

彼のポートフォリオはかなりレベルが高くて「こんなの絶対作れない」っていうかっこいいサイトが動画に出てくるのですが、ツールを駆使してこんなふうに作れます。

 

っていう説明が見れます。

12分くらい。比較的短い動画になってるので見て損はないと思います。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

いかがでしたでしょうか、動画のペースとか、自分がどんなデザインを作りたいかによって、参考になる動画が変わってくると思うんですけど、

ズブズブの初心者目線で選んでみました。参考になっていただければと思います。

 

次回は「物申す系youtuberになりたい」と言うタイトルで書いていきたいと思います。

 

 

f:id:psychoshock0832:20220401004917j:plain

 

PS.

一個前のブログで、初めてコメントがつきました!!!(うれしょん)

 

PS2.

このブログ初めて10日ぐらいかと思うんですけど。PV数が100を超えたそうです!(うれしょん)

 

f:id:psychoshock0832:20220401004427p:plain

 

 

Twitterもやっておりますのでよければフォローお願いします。

twitter.com

 

 

Kawai Shotaro / 河相勝太郎

【ひろゆき】プログラミングってバカで無能でもできんすよw

DMでしょーもない挨拶してくる奴、だいたい情報屋。

f:id:psychoshock0832:20220330194649j:image

 

こんにちは〜♪

サイコショッカー太郎です!

 

本日なんですけども、僕の大好きな西村ひろゆきさんについて書いていこうかなと思います。

 

でも、ただのひろゆき知らん人がこのブログ読まされるのも苦痛かと思いますので、

 

【ひろゆきさんがプログラミングについてどのような考えを持っているか】

 

という視点から話して行きたいと思います。

ーーーーーーーーーーーーーーーーーーーー

1.ひろゆき?

西村 博之(にしむら ひろゆき、1976年(昭和51年)11月16日 - )は、日本の実業家、著作家(書籍・動画)。 日本最大級の匿名掲示板「2ちゃんねる」開設者、英語圏最大の匿名掲示板「4chan」管理人。 ドワンゴが資金提供している日本最大級の動画配信サービス「ニコニコ動画」元取締役管理人。(wikipedia)

 

f:id:psychoshock0832:20220330204127j:image

 

2.プログラミングは才能とかいらない。

こんな輝かしい経歴を持つひろゆきさん。IT業界に革命を起こした1人と言っても過言ではないんじゃないでしょうか。

 

そんなひろゆきさんですが、

「僕にはプログラミングの才能がない」

と公言しているんです。

 

これは有名な話かと思うんですが、どういう事かと言うと、

素人プログラマーの時(小学生の時)にコードを書いていた時に、簡単なゲームを作るとき、

 

「テンキー6を押すとキャラクターが1ドット進む」

「テンキー4を押すとキャラクターが1ドット戻る」

というif文を2行で自分は書いていたが、

優秀な人のコードを見ると

「テンキーの数字にマイナス5した分キャラクターの座標が動く」

という1行でコードをまとめていたそうです。

(要するに6を押すと(6-5)で+1、4を押すと-1分キャラクターを動かす。)

 

この人はコードを機械が理解しやすい形に変換するのがうまい。

自分はその考え方ができない。

つまり自分はプログラミングに向いてる人間じゃない。という結論だそうです。

 

f:id:psychoshock0832:20220330204206j:image

 

3.プログラミングの才能があるのとプログラミングを使って仕事をする事は直接関係ない

 

これは、「経理の仕事をしてる人って全員数学者じゃないよね。」って考え方で、

 

プログラミングのトップスキルを持ってなくてもエンジニアとして必要なスキルさえ身につければ仕事はできるから、才能を考えない。

才能よりも大事なのは、今何が自分に必要かを考えることだそうです。

 

f:id:psychoshock0832:20220330204245j:image

 

おまけ。

「やりたい事がない奴は全部覚えようとする」

 

例えば話せない言語圏の国のレストランに行った時。

「こんにちは」

「これください」

「トイレどこですか」

「勘定お願いします」

という4つぐらい覚えたらレストランでご飯を食べて帰ることはできると。

なので全部言語を覚える必要はない。という事だそうです。

 

これとプログラミングは一緒で、

「掲示板を作りたい」というゴールが有れば、

「入力フォームを作る」

「表示する」

って動作を調べてやれば、言語を全てマスターしなくても、一つずつやっていけばすぐできますよ。

 

やりたい事、作りたいものが無いと、言語を全やみくもに覚えようとするから学習に時間とお金がかかって何もできないよね。

という話でした。

ーーーーーーーーーーーーーーーーーーーーー

いかがでしたか〜

 

意外と優しいアドバイスというか、学習に不安を持っていたり、僕みたいなプログラミング初学者にとっては前向きなメッセージじゃないでしょうか。

 

やりたい事見つけてさっそく作ってみましょー!

 

【web開発】オリジナルアプリって結局何を作ったらええの?【アイデア】

こんちわす。

 

本日なんですけど、オリジナルアプリについて話していこうと思います。

 

僕は今オンラインのプログラミングスクールを受講しているプログラミング初学者なんですけども、

 

約1ヶ月間プログラミングを学んで、webアプリケーションの仕組みがなんとなくわかってきました。

 

そんな時なんですけども、

これから卒業する先輩方の卒業発表を見る機会があったので覗きに行ってきたので、少しその話をします。

 

 

【最終課題はオリジナルアプリ作成】

僕が受講しているスクールの最終課題は、オリジナルアプリを作り、概要を発表する事なんですね。

初めて先輩の卒業発表を見た感想は、

・レベル的にはピンキリ

・全体的にレベルは低め

 

といった印象でした。

僕は先輩方にこんな生意気な事書いて、明日には消されてるかもしれませんが、書いた理由もちゃんとあります。

 

 

【カリキュラム丸写しやん】

カリキュラム(教科書)の内容では、

・チャットアプリ(LINEみたいなやつ)と、

・ツイートアプリ(Twitterみたいなやつ)

を教科書に沿って作ります。

 

これらは作り方の9.9割がカリキュラムに載っていますが、

オリジナルアプリの提出を求められているはずの卒業生が、Twitterのモノトーン調、チャットアプリをカラフルにした物

といったモノを成果物として出している方も散見され、歴1ヶ月の僕でも作れそうという感想に至りました。

 

【オリジナルアプリに大事なモノ】

スクールのシステムや、先輩方をディスりたくてブログを書いたわけではありません。

 

上記を見て僕が感じたのは、自分の身にも同じ状況が降りかかるかもしれないという恐怖でした。

上記に書いた内容では、エンジニア転職をしたいという僕の夢はかなり現実離れしたものとあると、だれが見てもわかるような成果でした。

 

先輩達にどれほどの時間が与えられていたのかはわかりませんが、さっさとカリキュラムを終えて、少しでもオリジナルアプリを作る時間を作りたいと思いました。

 

【オリジナルアプリはアイデア勝負】

中には、優れた機能を持ったアプリを開発している人もいました。

小難しそうな機能を組み込んで、確かに生活を豊かにしそうなものでしたが。

 

感想としては「地味」でした。

 

ポートフォリオとして、企業から認めてもらう事を考えた時

・アプリが斬新か

・アプリが便利か

・アプリが面白いか

・デザイン

 

とまあ大きく分けてこんな感じかなと仮説しました。

では、アイデアを産む為には?

 

 

【誰に向けて作るか】

いわゆるペルソナですね。

性別、年齢、職業、趣味、思考などをできるだけ細かく設定し、

ペルソナは何に悩みを持ち、何を求めているか?

を考える事が、基本にして奥義だと思います。

 

【面白いモノ】

面白いアプリ、ゲームなどはペルソナに囚われず需要があると言えます。

近くにいる誰かを笑顔にしたいなと考えればよいのです。

 

【自分に何が作れるのか】

かと言ってポoモンGOを一から作れと言われたら卒業に間に合うわけないです。

1人では一生かけても無理でしょう。

 

今自分が作る事ができるアプリに+1機能。

時間に余裕があれば更に+1と、強化型で進めるのもありだと思います。

 

例えば、length(文字数、配列の数)をランダムにして、

宝くじアプリをつくる。(当たりが1つ)

クイズをつくる。(ヒントを元に絞っていき当てる)

占いアプリを作る。(選んだ変数によって結果が変わる)

など、一つのメソッドからも想像していける訳です。

 

ーーーーーーーーーーーーーーーーーーー

そんなこんなで、オリジナルアプリについての私サイコショッカー的思考を書かせていただきました!

 

明日もなんか書きます。

 

それでは!!ジーニアス!!!

【SES事業】エンジニア転職、そんなにハードル高くないんじゃない?という話。

おっす!

 

今日なんですけども、

 

先日ですね。とある企業の採用担当の方から僕のTwitterに連絡が来まして。

 

内容的には、「ウチで働きませんか?まずは面談からどうですか」と言った内容でした!

 

僕的にこのようなメッセージをいただいたのが初めてだったので、

 

まあ入社するかどうかは置いといて。

一度話してみたく、カジュアル面談という形でお話しさせていただきました。(zoomで)

 

結論から言うと

・すぐには内定というわけではない

・入社前にPHP中心のカリキュラム(約6ヶ月分、無料)を受け、卒業後内定。

・カリキュラム受講中は給料が出ないから、昼間に短期バイトとかでなんとか食い繋いでね

・初任給は21万円ぐらい(固定)、手取りは18ぐらいになる。

・内定後は面談しながら常駐する企業を決めていく(要はSES事業ですよ)

 

と言った内容でした。

 

採用の方と話した所感ですと、あんまり自分のTwitterとか、ブログなどは見られてないんだろうな。

という感じで、なんで自分に声かけてきたのかは不明でした。

(プログラミングに興味ありそうなアカウントに声かけまくってるのかな、とすら思いました。)

 

んで、6ヶ月程のカリキュラムという制度がかなり特殊だなと思いました。

 

確かに、SESで取引先にエンジニアを送り込む際に、PHPだけでも特化させて一定のカリキュラム卒業というラインを決める事で、クレームを減らしたり、一定のクォリティが担保出来ますね。

さぞ、営業部が楽になる事でしょう(ズブの未経験を企業をぶち込むよりは。)

そして、SESの闇とも言える、「プログラミング全く関係ない事業にぶち込まれる」という事例も回避できるのだというお話しでした。

 

 

企業にもいろいろな形態があるのね。

それにしても、6ヶ月程のカリキュラムをバイトしながらやるってのはハゲそうですよねー。

 

僕には無理かなと思いました。(現にプログラミングスクール受講しているので、時間的にも、物理的にも。)

 

ーーーーーーーーーーーーーーー

 

さて、本題なんですが、

このようなシステムの会社が存在するという状況を知れて。

「未経験からエンジニア転職、ハードル高くないんじゃね?」

という事を感じました。

 

まずSES事業とは、エンジニアの人材派遣であり、下請け企業です。

故に未経験や、経験の浅いエンジニアの職の受け皿となっている現状で、比較的入りやすい業務形態です。

(まあ、こんな変な奴に声かかるぐらいですし。)

 

SES事業って、調べてみると

 

闇

やめとけ

ブラック企業

 

とかいろいろ出て来ます。

おまけに最初は手取り18万とかザラで、アルバイトとあんまり変わらないですよね。

 

けど、人によってはSESも現場経験になるし、

ズブの未経験を雇ってくれる訳です。

 

SESで働いて給料が低く辛くても、1年ぐらいやれば次に転職する際は、未経験ではない

「キャリア転職」になるわけですよ。

 

更に、今日僕が面談した、

カリキュラム無料で受講させる企業

なんてのも流行り出したとしたら、

 

もはやエンジニアに必要な事前技術なんてものは無くなり、ポートフォリオもいらなくなり

 

「興味」だけでエンジニアになれてしまう時代がそこに来とるやないか。

 

という事を感じました。

こりゃ大変。

 

 

 

このような安価な「インスタントエンジニア」が爆増する未来がそこまで来ている中、私達は何をすべきか、

 

結論から言うと今まで以上に自分の市場価値を上げる以外ないのです。

知識を肥やし、ポートフォリオを作り、成果を上げる。

 

そうすればインスタントエンジニアと一線を画した扱いを受けれるでしょう。(額面も)

 

僕も頑張ります。

【メモの魔力】高速メモ術を会得して、最強インプット【アナログ人間向け】

 

こんちゃーす。サイコショッカー太郎でーす。

 

本日なんですけど、

みなさんプログラミング学習する際、メモとりますか??

 

僕はとりまくります。

しかし、僕みたいなアナログ人間に対して世界の天才達は厳しい意見を述べているという事実を知りました。

 

どういう事かと言いますと。

 

例えば堀江貴文さん


f:id:psychoshock0832:20220326122322p:image

これはメモをいっぱい取ってテックキャンプを受講した寺田有希さんに対しての発言。

 

マナブさん(マナブログ)

f:id:psychoshock0832:20220326122634p:image

 

プログラミング学習において、紙にメモを取り覚えようとする学習法は非効率とおっしゃられております。

 

いやいやいやいや。

誰しもが堀江さんとかマナブさんみたいに天才で、メモを取らなくても何回か言語触ったらすぐアプリケーション作れるみたいな人間じゃないわけですよ。

 

「調べながらやればいい」っていうのも

応用からの概念だと思うわけで、足し算わからない人が掛け算を説明されても理解できないわけですよ。

 

せめて足し算の意味ぐらいメモしたい。

 

特に短期集中型のプログラミングスクールのカリキュラムなんてやってる人は、

メモなんて取ってたら、どんどんカリキュラムに置いていかれる。って人もいるんじゃないですかね。

 

そんな、メモ取らなきゃ次に進めない僕みたいなアナログ人間に捧ぐ

 

「最強メモ書きメソッド」を紹介していきたいと思います。

 

1.誤字、脱字、汚い字。マジで気にするな。

 

とにかくメモ取りたきゃー早く書くことが大事になります。

メモ取らない派に置いてかれないようにするにはオラオラ書いていく。

書くという動作で、脳を動かして。

自分の字を見るという視覚からの情報をインプットする事が唯一メモ派のアドバンテージなんです。

この際、自分が読める字であれば汚い、誤字ってるなんか関係ない。

 

むしろ、「あ、誤字った」という感覚が後々、記憶のとっかかりとなり、

そういえばこの単語で誤字った事ある。という

記憶+1ポイントを加算する事になるのです。

 

誤字を正すな。汚い字を愛せよ。バカとブスはSES事業に行け!

f:id:psychoshock0832:20220326140652j:image

 

2.要点を箇条書き

 

ドットインストールなどを触ると、

タイトル、説明、補足、使い方、実践

 

みたいな流れで説明されていくわけですが、

全部メモ取ってる奴いる???

いねーよなぁ!!!

 

 

要点!

意味を箇条書き

 

この二つだけでいいわけです。

「ブロックレベルとインラインレベルについて」

みたいなタイトルをメモ取らない。

「僕はラーメン屋のメニューを見て、これはdisplay:flex だと思った」

みたいな補足は絶対メモ取らない。

 

ブロックレベル

〜意味〜

display:flex;

ラーメン屋のメニューみたいになる

 

こんな感じでいいわけです。(いやラーメン屋によってちゃうやろ)

 

 

 

3.色ペン、蛍光ペンとは友達になるな。

色んな色でキレイにノートをまとめると、女子力が上がります!

同時に学習能力が著しく低下していると思って下さい。

 

使っていいのはボールペン、青ペンだけです。

 

シャープペンはダメです。何故なら、折れた芯がキーボードの隙間に入るなどの弊害が考えられたり、

誤字も愛する僕達に取って、消しゴムは不用であり、シャープペンがボールペンに唯一アドを取れる

「消せる」という概念を持たなくていいからです。

 

青ペン?

 

青ペンは唯一使っていいです。

理由は「色を選ばない」「要点のストロング」です。

 

まず多色ペンの中から、色を選ぶというのは一見キレイにまとめることができて、脳が整理しやすいように感じますが、

 

色を選ぶということに、要らない脳のリソースを割いているわけです。

これらの色の中で青色は視覚的にリラックス効果が確認されており、視覚的に刺激が少ない青ペンを使う事が、ほかの色のペンと比べて学習効率が一番いいとされています。

 

要点、要点の説明をメモする上で、説明の中にも情報としての強弱が出て来ると思います。

重要な情報と感じる部分にササッと青ペンで印をつけるだけで、圧倒的に効率がよく学習ができます!!

 

 

 

今回はこんな感じです。

いかがでしたか???

みなさんも前田裕二さんみたいにメモ魔人になって、学習効率と理解力をアップさせましょう。

(あ、ブログの内容と「メモの魔力」はてんで関係ないです)

f:id:psychoshock0832:20220326140807j:image

 

【ggrks】プログラミングで重要なスキル。ダントツで「検索スキル」説。

 

こんばんはサイ・コショッカー前田です(本名)

 

本日なんですけども、

エンジニアにとって一番重要なスキルって何だと思いますか?

 

多彩な言語の習得?ツールの理解?論理的な思考?エラーに立ち向かう根性?

まあいろいろあると思いますが、、、

 

検   索   ス   キ   ル

 

これなんじゃないでしょうか。(いやタイトルに書いとる)

 

プログラミング学習を始めて、大量の用語、クラス、メソッド、gem、URIパターン、パス、マッチャ、、、etc

 

と、たくさんの知識が押し寄せてくるわけなんですよね。

 

もう、何回も心折れまして、心折れすぎましてですね。

たまたま友達に、現役システムエンジニアがいまして。

もう聞いてみたんですよね。

 

f:id:psychoshock0832:20220325020127j:image

 

 

プログラミングスクールで「基礎なので、叩き込みましょう!」と言われた知識。

現場の方々は「わざわざ覚えない。」との反応に全人造人間も泣いたわけですけども、

 

じゃあどうすんの?つって。

覚えてないやつプログラミングやれんの?つって。

調べればいいじゃん。

それすぐ調べて使える人間になってビターン!つって。(武井壮)

f:id:psychoshock0832:20220325030135j:plain

 

ただ慣れてない駆け出しの僕達には検索スキル(ググる力)があまりないわけですよ。

 

そこで、検索スキルを上げる方法を調べてきたので少し書いて行きます!

 

1.状況の言語化

Googleなどの検索エンジンには、言葉を入れなきゃいけないわけですから。

 

自分が何を知りたいのかを言語化する必要があるわけです。

例えば、「125を文字列で出力」

という方法を調べるには

"ruby"で "数値"を"文字列に変換"

 

上記" "を抜き取ってエンジンに入れたらいいわけです。

 

ruby 数値 文字列に変換

f:id:psychoshock0832:20220325022836p:plain

 

すると、「to_s」メソッドが出てきました。

完璧。

 

2. 「2つか3つぐらいでワードを絞る」

さっきの数値→文字列変換ですが、試しに

 

ruby  数値 文字列 変換

と、4語で検索かけてみましょう。

 

f:id:psychoshock0832:20220325022921p:plain

 

さっきのサイトも出てきたんですが、その下に「to_i」メソッドも出てきてしまってますね。

 

これは数値→文字列なのか

文字列→数値なのかどっちとも取れてしまう検索ワードだからです。

 

検索結果をスマートにするために、「文字列へ変換」など重要な部分はまとめて、2~3ワードで検索しましょう。

 

3.google以外でも調べる

googleは万能です。世界の検索エンジンのシェア74%はgoogleですから。

Googleを見れば世界の74%の情報が手に入るわけです。

 

ただ、膨大なデータがありすぎて検索結果にたくさんの情報が出てき過ぎてしまい、

「情報の取捨選択」をするフェーズが生まれてしまいがちです。

 

そんな時は別の情報源を探す。と言うのがいいのではないでしょうか。

 

僕のおすすめは「Twitter」です。

Googleだと、古い情報も関連性が高ければ上から表示されてしまいます。

プログラミング学習だとこれ結構致命的で、各言語におけるバージョンによって記述の仕方が変わったりするわけです。

例えばCSSのdisplay:flexなんですが、

古い記述で

display:flexbox

display:box

と記述することもできますが、現在の環境でこの記述したら複数人でデザインしてる時など、チームを混乱させ兼ねます(そもそもう動かない可能性)

 

Twitterだと、最新の情報がすぐに出てきます。

 

あと、その日の学びをアウトプットとしてTwitterに置くエンジニアがめちゃくちゃいて、検索ついでにフォローしたりすると、副産物として定期的に学びを得るツールになります。

僕もフォローしてね。

twitter.com

 

4.もうわからんかったら「エラー文全張り」

上記、スマートに〜とか

2〜3ワードで〜とか

武井壮〜

とか言うてました。

 

しかし。今自分の置かれている状況すら訳わからない時もかなり多くあるんじゃないでしょうか。

そんな時は最終兵器と言いますか、なんと言いますか。

「状況をスマートに言語化」なんてものに無駄な脳のリソースを割かずに

f:id:psychoshock0832:20220325025755p:plain

 

こんな感じでエラー文全張りして下さい。

もう「ガキは黙っとれ!」とかそんな感じでワイルドに。

 

意外と答えが出てくるぞっつって。

 

f:id:psychoshock0832:20220325030135j:plain