スキル0から転職するには

【後悔】エンジニア転職の前に勉強すればよかったこと5選

こんにちは。教員から独学3ヶ月で、Webエンジニアに転職を成功させたしらかわです。

今回は、Twitterのフォロワーさんである、michikaさんからのリクエスト内容を記事にしました。

その内容は、こちら。

Webエンジニアを目指して学習を進めていても、実際に何を勉強すれば転職してから役に立つのかわからないあなたもそう思っているのではないでしょうか。

実際に働いたことがないので、わからないのも仕方ありません。

そこで、実際にWebエンジニアに転職をして、働き始めている私が、


「こんな勉強をやっておけばよかった、、」

という後悔を元に、あなたにも同じ後悔をしてほしくないと思い、記事を書きました。
どうせ勉強するなら、実務で役に立つ内容を集中的に勉強しておきたいですよね。
実際に転職前に学習していて、役に立った!という内容も合わせてご紹介します。

前提条件として先に伝えておくと、
Web制作のフロントエンドエンジニアで、勤務開始3週間現在の話です。

業務が進んでいったり、Web開発やバックエンドになると、話は変わってくると思うのでその点はご了承くださいね。

ショートカットスキル

効率的な作業ができるように、ショートカットを身に付けておけばよかったです。だって他の人が10分かけてやることを、5分で終わらせたら2倍の差がつきますからね。

あなたも今のうちに、作業効率をあげるショートカットを覚えておくと、転職してからスムーズに業務に入れますよ。

実務を経験しながら覚えていったショートカットを、具体的に紹介していきますが、私はmacユーザーなので、macでしか使えない可能性があります。そこだけご了承くださいね。

①Spotlight検索

これは、マウスを動かさずに検索することができるショートカットテクニック。マウスを動かして、キーボードでタイピングしてってなると、手が頻繁に移動するのでその分タイムロスです。

なので、マウスを動かさず検索できるSpotlight検索はかなりオススメ。

どうやってやるかというと、【commandキー + スペースキー】を押して、出てきた検索窓に調べたい言葉を打ち込むだけ。


このように、ゴリラの倒し方だってすぐにわかっちゃいます。もうゴリラに遭遇しても怖くありませんね。

もっとオススメの使い方は、自分のパソコンにあるアプリケーションの検索。
YouTubeやメールを表示させるのも一瞬です。

「あのアプリってどこのフォルダにあるんだっけ、、、」という無駄な時間は無くなります。
試しにやってみてくださいね。

②使用履歴コマンド

次のショートカットは、名前が無かったのでテキトーにつけました。これは何かというと、一つ前に使用した機能に一瞬で切り替えれるというショートカットです。

コマンドは、【commandキー + tabキー】です。

例えば、メモアプリを使っていて、一旦Chromeで調べ物をしたとします。
その後再度、メモアプリを使いたいときに一瞬でもどって来れるんです。

まず、メモアプリを使っていて、、

Chromeで調べ物をしたとします。このときに、【command + tab】を押すと一つ前に使用した機能のメモアプリに一瞬で戻ってこれます。

この画面が表示されます。一つ前に使用した機能のメモに黒色がついているのがわかると思います。
この状態で、押したキーから手を離すと、メモアプリに瞬時に切り替わります。

こんな感じでマウスを動かさず、瞬時に操作を行うことができるので、かなり頻繁に使う機能です。

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

このようなショートカットはたくさんあって、覚えるのが大変です。最初は使いこなせず作業は遅くなるでしょう。

でも、一回慣れてしまえば、それからの作業は倍速になるので、作業効率は爆上がりします。
ここでは、紹介していませんが、エディターのショートカットキーを覚えるのは必須です。

それだけで、コードを書く速度があがるので、他の人の何倍も速く成長することができます。

素足ですぐに走り出すと最初の1週間はリードできるかもですが、1週間かけて免許をとって、バイクで移動し始めた人にすぐ抜かされ、どんどん差をつけられちゃうわけです。

ようするに、最初は大変でも、その後が楽になることに対してしっかり努力しましょうねということです。

作業効率を上げてくれるものをしっかり勉強しましょう。

HTML&CSSの基礎

実務で使うやり方を最初から学んでおけばよかったです。

私は独学だったので、自分なりのやり方でやってきました。

当時は、「動けばいい」という考えでクラス名をつけるのも、テキトーにやっていましたね。
けど、実務では「動くのは当たり前で、その上で一緒に開発する人がやりやすいようにコードを書く」ことが大事なんです。

さらに言うと、その後にWebページを更新するときに、問題が起こらないような書き方をしないといけないわけです。

ただ動けばいいというコードを書いていたのでは、実務ではなんの役にも立たないわけです。

「でも、実務を経験したことがないから、何をすれば実務に役立つかわからない、、」

そんなあなたに、実務で使われている内容について紹介しますね。

①FLOCSS記法

FLOCSS記法というのは、CSSを記述する上でのルールのことです。何のことかわからないかもしれませんが、下記のサイトを見ながら勉強をしてみてください。

この書き方について慣れておけば、実務にスムーズに入れます。

なぜこの記法を勉強するべきかというと、業界で幅広く使われているルールだからです。
このルールをしっかり理解しておけば、どの企業に行っても大丈夫でしょう。

私は、実務でこのFLOCSS記法でコーディングしているのですが、ぶっちゃけわけわかんなくて大変な思いをしています。

最初からこの書き方で勉強していればなあ、と後悔していますね。

GitHub – hiloki/flocss: CSS organization methodology.

このFLOCSS記法の他にも、BEM記法というのもあるので、勉強しておきましょう。

②HTMLリファレンス

HTMLに関しては、公式のリファレンスがあるのでこれを見ながら勉強してください。
Progateだけだと、詳しい意味までは理解できないので、正しい情報を見ながら勉強していくことが大切ですね。

タグの組み方が正しくないと、せっかく作ったのにGoogleに”ダメなWebサイト”認定されちゃいます。
その結果、検索しても上位に表示されずお客さんがサイトを見に来れないなんてことになるんです。

だからこそ、いいWebサイトだと認識されるHTMLの書き方を学びましょう。

HTML5リファレンス

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

私は、sectionタグとか知らなかったし、高度なアニメーションがJavaScriptじゃなくて、CSSでできるなんて知らなかったです。もっと基礎を正しく・深く学んでおけば、新しいこともどんどんできるようになったなあって思ってますね。

色々と難しいことに挑戦したくなる気持ちはわかります。
でも、基礎を徹底したほうが、後々の成長に役立つと思います。

転職目的で学習をしているのであれば、最初から実務で使われている規則で勉強を進め、基礎を徹底することをオススメします。

git

gitというのは、簡単にいうと、”ファイルの更新・変更を管理する便利なシステム”ですね。実務では、チームで共同開発をするのでこのgitを頻繁に使うんです。

もっと理解を深めておけばよかったなあと思っています。

でも、全然理解していないわけではありません。所属していた”転職クエスト”というオンラインサロンで、共同開発の経験をしたことがありました。

このときにgitを勉強したので、割と実務でもスムーズにいけましたね。

gitを全く理解していない状態であれば、転職活動の際に、企業からもマイナスイメージになることは間違いないでしょう。

だって業務に必須のスキルがなければ、その時点でお荷物ですからね。


でも、gitってどうやって勉強するかわかんない」というあなたには、この動画がおすすめです。

【こちらをクリック】もう怖くないGit!チーム開発で必要なGitを完全マスター

色んな本で勉強しましたが、やっぱ動画が一番理解しやすいです。言葉や図で解説してくれますし、実際にパソコンを操作しながら解説してくれるというのが、書籍が動画に勝てないところです。

約26,000人が受講していて、平均評価は驚異の4.4、、すごすぎですね。
動画を見れば高評価も納得ですが。

ぶっちゃけ見るだけでは、gitは全く理解できないので、動画を見ながら手を動かして勉強をしてください。
実際に自分でやってみないと知識定着率は悪いです。

なんでもやってみること

これは、後悔ではなくて、やってて良かった経験なんですが、色んなツールを使ってみたり、色んな勉強をやっていてよかったです。

AdobeXDを使ってデザイン作ったり、Photoshopでイラスト書いてみたり、WordPressを使ってブログを運営したりしました。これらの【興味があったから、とりあえずやってみた】経験がすべて役に立ってるんです。

業務でAdobeXDのデータを元にコーディングを行うのですが、使ったことがあるので操作に困ることはありませんでした。Web制作やフロントエンドエンジニアを目指しているのであれば、XDやPhotoshopに慣れておくといいでしょう。

また、Web制作エンジニアなら、WordPressでブログを運営していれば、内部の仕組みの理解が深まるので有利ですね。

ところでみなさん。

Connecting the dots”という言葉を知っていますか?

Apple創業者スティーブ・ジョブズ氏の名言で、「点と点を結ぶ」という意味です。
つまり、あなたが興味をもち、色んなことに挑戦すれば、それらがすべて”点”となり、将来のどこかの場面で点が繋がり、あなたの大きな力になります。

今回の私もまさにそうでした。今までの色んな挑戦が業務に役立つ形になりました。点と点が繋がったのです。

完璧に使えるようにする必要はないので、業務で活かせそうなことはとりあえずやってみることをおすすめします。色んな経験があなたの力になります。

タイピング速度

エンジニアを目指すならまずはタイピング速度をあげるのは必須です。

なんで必要かというと、エンジニアはパソコンで9割の仕事をこなすからです。
タイピングが遅いだけで、仕事スピードは遅くなります。

私は、プログラミング学習を始める前に、タイピング練習に集中的に取り組んでいました。
毎日1時間はブラインドタッチで速くタイピングする練習をしていましたね。

しかも、業務を経験してわかったのですが、コミュニケーションはすべてチャットなんですよ。
どんなやりとりをしたか記録に残しておかないといけないので、チャットでやりとりします。

そこでも、タイピングが遅いとそれだけでタイムロス。どんどん置いていかれます。

私の学習手順はこんな感じ。

①ブラインドタッチ練習のYouTubeを見て勉強
②寿司打という無料ゲームでひたすら練習
③あとは毎日1時間継続

これを1ヶ月継続するだけで、人差し指タイピングから、ブラインドタッチタイピングができるようになりました。あなたにも、まじで練習していてほしいです。

だって、IT企業なのでみんなタイピング速度がめっちゃ速いんですよ。これ練習してなかったらどんどん置いていかれてたなあって思います。やってて良かったです。

あなたもプログラミング学習の合間に、ゲーム間隔でタイピングゲームをしましょう。転職してから役に立ちますよ。

最後に

今回は、フォロワーの方のリクエストにお答えする形の記事になりました。

私は、教員からWebエンジニアに転職するにあたって、働きながら独学で学習を進めてきました。
そのときに、「何を勉強すれば実務に役に立つんだろう、、」って思って無駄な学習をしてしまったかもしれません。

でも、振り返ればその無駄だと思った学習も、繋がり今実務で役に立っています。今の学習でいいのか不安になるとは思いますが、必ず結果はついてきます。

今回の記事を参考に、これからも転職に向けて学習を頑張ってくださいね。
また、私でよければ何でも相談にのりますので、私のTwitterにリプでもDMでもいいので、気軽にメッセージを送ってください。

しらかわのTwitterはこちら。

あなたの挑戦を、応援しています。

ABOUT ME
shiro.
shiro.
白川大貴 Webエンジニア(26歳) 中学校教員4年間→Webエンジニアに転職成功 転職を成功させるノウハウ、買ってよかった商品、プログラミングに関する知識を発信します。 Webサイト制作のお仕事依頼は、Twitterやinstagramのメッセージからお願いします。