はじめに
フリーウェブクリエイター(デザイン少・コーディング多)
→インターン(トランスレータ、ディレクター、コーダー)
→現在Railsエンジニア
という変遷を辿っています。
ウェブの勉強を初めてから、ほぼほぼ独学でこの1年を過ごしておりました。365回ぐらい心折られながら、それでもウェブの楽しさを味わっているので、今後も心を折られつつ続けていくと思います。エラー解決した時の解放感は最高です。
先に結論を言うと、
①フリーだと、物事を俯瞰的に見る考えが身に付いた。
②インターン時代の実務経験は、スキルがグッと伸びた。
③やる気があれば、独学でも何でも何とかなる！
の3つが言いたいことです。
話すこと
①フリーで得た経験
②フリー中、学習した教材（主にウェブ制作）
③インターンで得た経験
④インターン中、学習した教材（ウェブ制作 * フロントエンド)
⑤インターン以降、学習した教材(フロントエンド)
※ ウェブ制作、フロントエンドについての記事なので、サーバーサイドエンジニアなどを目指している方には、見る必要はないと思います。扱った教材に関しては、簡単な感想だけ載せました。全部は載せられないので抜粋しています。
①フリーで得た経験
・手をいかに早く動かせるかで時給決まる。迷う時間＝ロス。
・とにかく分からないことは聞く。進捗を遅らせないためにも、プライドを捨てる。
・自分が持つネットワークをフル活用する。「俺、フリーランス、カッケェ」とか言うクソプライドは早く捨てて「フリーランス始めたんですが、仕事ないんです、ください！」と、ド正直に突っ込む大切さ。
・技術力もだけど、コミュ力がモノを言う。
・WordPressは、ウェブ初学者にとってありがたいツール。
本当に大変でした。フリーでいきなり活動を始めたので、1日12時間以上PCと向き合いながら仕事を進めていたことも少なくありませんでした。営業→制作→納品まで一貫して進めており、身近にいるフリーの方々に協力してもらいながら進めていました。
案件獲得のための営業は、周りの方から繋いでくれることもあれば、クラウドソーシングでの受注に至ったこともあります。当時は、量>質と言う考えだったので、100件ほどの営業文を1日25通ペースで送ったりしていました。お仕事を0→1にすると言う状況だったので、(7割出来るぞ)と言う感覚のあるお仕事に対して、積極的にアプローチをかけていました。
制作は、とにかく勉強しつつ取り組んでいました。納品のためのアウトプット&インプットだったので、パワーアップしていく感覚はありました。ただ、クライアントから来るデザイン変更・修正などでストレス抱えながら取り組んでいた覚えがあります。
（勿論、私のスキル不足もありクライアントもストレスを抱えていたかと。あの時はすみませんでした・・・)
クライアントが制作会社だと技術用語が多く、追いつくのに精一杯でした。それでも手だけは必ず動かしていて、コレがすごいよかったです。手動かせば次に進めますから。
ウェブに精通していない個人の方がクライアントの場合、技術的部分をいかに噛み砕いて説明していくかが問われるので、相手のレベルに合わせたコミュニケーションをすることの大切さは痛感しました。**経験少ないがフリーで稼ぎたい人は'どこまで相手ベースで物事を考えられるか'と'提案力'**にかなり依存するんだと思います。
納品できた瞬間は、声高に「よし！」となりますが、時間が経つにつれ、改善出来たであろうポイントがポツポツと浮かんだりしていました。
と言うのも、技術レベルが上がるごとに（あのクソコードが世に出回っているのか）と思うってしまうため、負の連鎖が起きていました・・・。医者はn人殺めて一人前と言う言葉がありますが、私にも通じるところがあったようです。(コレからもまだまだクソコードを書いてパワーアップしていくしだいです。)
そういった経験もあり、スキルアップのためにインターンを決意しました。その前にフリー中に学習した教材をザッと挙げてみます。
②フリー中、学習した教材(2019/03-2019/06)
半年弱。
フリー前に学習していた教材も若干含まれています。
いちばんよくわかるHTML5＆CSS3デザインきちんと入門
flexでページが作られていて、float使わないんだ！ってなったのが印象深い。
いちばんやさしいJavaScriptの教本
jQueryでAPI通信が終章にあります。jQuery色々出来るんだなぁ、とか呑気に思っていました。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト
上二つより、少し難しい印象があります。ただ、段階踏んで3つのサイトを組み上げていく流れは、スピード感があってよかったです。flexは使われていないので、そこだけ注意。
CSSグリッドレイアウト デザインブック
勉強しただけで実務では使わなかったです。ただ2021年、IE案件はほぼないと思って良いので、こちらは習得して問題ないと思います。
Web制作者のためのSassの教科書 改訂2版
Sassについて学びたいならコレに尽きるかと思います。
けっきょく、よはく。
デザイン本です。デザインは、コレを見てNGなデザインを組まないよう意識していました。
文系でも解る！ Wordpressの基礎の理解と、独自デザインをWordpress化にする
文系の私にとってバイブル的な教材でした。WordPressの学習だけで言えば、動いているモノを真似た方が個人的には分かりやすくてよかったです。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
コレも同様にバイブル。2周してwordpressがグッと理解できました。ただ、ver４で古いので現在のver5に対応しているこちらの本が良いかもです。
[WordPressレッスンブック 5.x対応版]
(https://www.amazon.co.jp/WordPress%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-5-x%E5%AF%BE%E5%BF%9C%E7%89%88-%E3%82%A8%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0-ebook/dp/B081RX7BTS/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=WordPress&qid=1611846366&s=digital-text&sr=1-4)
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
これが理解できるレベルになったら、ほぼ問題無いかと。カスタムフックなどについて書かれています。古いですが、今のWPにも通ずるところがあるかと思います。私は（余裕で使えるけど？）と言える前に、インターンへ飛んでいってしまいました。
ちなみに、私はWordPress v4.x.x までしか触ってなくてv5系は未知です。ご了承ください。
③インターンで得た経験
スキルアップのため、海外インターンに参戦しました。トランスレータ・ディレクション・コーディングと色々させて頂きました。チーム開発はとても楽しかったです。英語が少しできるので、それを活かして仕事ができたことに、やりがいも感じられました。最初の案件が改修とかではなく、新規受託だったのは良い思い出です。デザインの策定〜API実装方法、その他Gitフローとか、受託政策の一通りを学びました。
**Translator：**私の通訳ミスが全てのミスに繋がります。分からない部分・聞き取れなかった部分は、再三質問し直してミスの予防に努めました。それでも直せないところがありましたが、週１のフィードバックタイムなどで改善策をチームのみんなと共有することでミスの率は入った当初と比べて、最後の方はだいぶ減ったと思います。
**Direction：**日本人だと指示しづらかったと思います。言語が英語、外国人が９割の制作会社であったからこそ、割り切ってディレクションすることが出来ました。注意することがあるとするなら、**指示はフランクに。お願いは丁重に。**です。基本的に低姿勢で相手が忙しくなさそうな時に、お菓子を用意して声を掛けるべきかと。
**Coding：**JSフレームワーク/ライブラリ, WordPress, Laravelなど様々でした。詳細は言えませんが、各プロジェクトに対して、勿論使用するツールが違うので、都度どんな技術が必要か調べながら仕事を進められたのは楽しかったです。Git, Docker, Asana, BitBucketなどなど、エンジニアが使いそうなツールは一通り学びました。
インターンは、当時の私にとって一番必要だったものかと思われます。実務最強。
④インターン中、学習した教材(2019/06-2019/11)
海外に滞在していたため、持参していた書籍と、Udemyになります。段々とフロントエンドエンジニアを目指し始めていってるので、そういったものが増えていきます。
Node.js 入門 ー演習しながら学ぶ基本クラスの使い方ー
jQuery触っていたので、次はNode.jsだ！と思って、とりあえず勉強していました。
生のJSに触れることがほとんどなかったので、四苦八苦な思い出しかありません。Node.js始める際は、生のJSを理解してからが絶対に良いです。
Node.js + Express で作る Webアプリケーション 実践講座
Express, MongoDBを使っておりDB、バックエンド、フロントエンドを何とか一人で作りあげれるレベルはココで完成されました。
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
JSの概念などの解説本。JSは難しいです。コンストラクタ？prototype?何それ？と思っている時期もありましたし、今もまだまだ勉強中です。この本は、コードがシンプルでJSの言語仕様を0から学べました。
JavaScript コードレシピ集
テクニック集。（あの実装って、プロはどうしてんの？）は、この本に大体書いてあるのでタメになっています。今も隣に置いてあります。
数学ガール／乱択アルゴリズム
テクニックでも概念でもなく、地力を付けるために購入しました。
(エンジニアとしてアルゴリズムぐらい知っておかないと・・・ね)
数学ポンコツの私でも、時間を要すれば理解できるレベルで書いてあります。ロジック力を付けるために、役に立つと思います。
あとは、どうやってプログラムは動いていくのか、とかも分かります。
わかばちゃんと学ぶ Git使い方入門
ウェブ系はほぼ間違いなくGit必須です。Gitで一番最初に読むべき本です。僕はGit嫌いでしたが、この本のおかげで大分緩和されました。
Modern React with Redux [2020 Update]
後半ぐらいから、Reactを始めます。
英語udemyですが、圧倒的な質が担保されています。(Hooksも対応)
英語嫌いな皆さん、言語の違いだけで機会のチャンスを逃すのは勿体無いです！
一つ勇気を持って挑戦してみては如何でしょうか。
Webを支える技術 ―― HTTP，URI，HTML，そしてREST
名著です。絶対に読みましょう。
リーダブルコード
名著です。絶対に読みましょう。
Team Geek ―Googleのギークたちはいかにしてチームを作るのか
チームで開発していく中で、指針となるべきものは何か。
Humility, Respect, Trustとは何か。
何故Less is Moreが良いのか。
気になっている方は、購入することをお勧めします。
⑤就活までに学習した教材(2019/12-2020/05)
以下にババっ！と載せておきます。
順序適当です。
Udemy
MERN Stack Front To Back: Full Stack React, Redux & Node.js
いわゆるMERNアプリ。MERNについては過去記事で紹介。英語Udemy
Understanding TypeScript - 2020 Edition
TypeScriptの偉大さが分かる良講座。英語Udemy
フロントエンドでTypeScriptは今後間違いなく使うので、抑えたほうが良いですね。英語Udemy
NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)
Node.js中級ぐらい。英語Udemy
Modern React Fundamentals - Movie App - Hooks [2020]
Hooksガッツリ使ったReact講座。英語Udemy
6時間ぐらいですが、結構まとめられていて良かったです。
インフラ（AWS)
Amazon Web Services 基礎からのネットワーク＆サーバー構築 改訂3版
ゼロからわかる Amazon Web Services超入門 はじめてのクラウド かんたんIT基礎講座
負荷分散までの範囲を網羅できるので、初学者の方はここまでやっておけばOK（なはず）
他にも...
Railsチュートリアル
（今後使うことがほぼ確定していたため）
6版は有料ですが迷うことなく購入しました。圧倒的クオリティ。
Practical Object-Oriented Design in Ruby: An Agile Primer (Addison-Wesley Professional Ruby Series) (English Edition)
OODが曖昧だったので、ネットで調べたらコレが良いと書いてあった。英語。
Learn or Die 死ぬ気で学べ プリファードネットワークスの挑戦
PFNのCEOが執筆。圧倒的成果を出すには、最大の努力が必要なんだと分かった。頭良い or 悪いとかの話ではなく、やる or やらない。数学苦手と思っている自分には、数学を勉強し直す良いきっかけとなった。
キタミ式イラストIT塾 基本情報技術者 令和02年
エンジニアになるための基礎作り。
マスタリングTCP/IP 入門編（第6版）
エンジニアになるための基礎作り。
[りあクト！ TypeScriptで始めるつらくないReact開発 第3版]
(https://oukayuka.booth.pm/)
Hooks, Reduxなどの説明と基礎の基礎から、一次情報バリバリ参照して説明されているので、React*TSを満遍なく、歴史からしっかり触れてみたい方にオススメ。
そろそろ第3版が出そうですね！
第３版出ました。
第３.1版出ました。
今現在(2020/06-)
何故か、Railsエンジニアとして働いています。正直自分もそうなるとは思っていなかったのでビックリです。必死こいて勉強しています。
ただ、バックエンドもノウハウとして溜まるという点においては、キャリアにおいて非常に強力であると思っているため、最低1年はじっくりと進めていきたいです。
一応、6月に勉強した書籍も載せておきます。
・Railsチュートリアル
・静的サイトジェネレータ活用入門(React/Graphql/Contentful/Netlify)
・プロを目指す人のためのRuby入門
・実践ハイパフォーマンスSQL 途中（７００ページて長過ぎません？）
・Ruby on Rails アプリケーションプログラミング
・Effective Ruby
・Read Everyday Rails - RSpecによるRailsテスト入門 (Leanpub)
・Qiita, Udemyなどなど...