みくじょーブログ

エンジニア転職を目指す24歳の日常

JavaScriptで簡単な非同期通信を行う

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は、現在エンジニア転職を目指して活動しております!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

目次はこちらです

 

 

 

JavaScriptで簡単な非同期通信を行う

本日はこちらについて解説します!

 

 

まず、どう言ったもの作るのかと言うと、

現在、下記の画像のような表示になっている箇所を

 

f:id:mikujo:20201017210204p:plain

 

非同期通信にて、「編集」と「ログアウト」ボタンを作りたいと思います!

完成後はこのような形になります。

 

f:id:mikujo:20201017210730p:plain



今回やりたいことは2点です

  1. ユーザー名にマウスを乗せた時、ユーザー名の色を変える
  2. ユーザー名クリック時に、「編集」「ログアウト」のリストを表示する

 

それでは実際にやって行きます!

 

 

 

ビューの記述を変える

まずはビューです。

今回は _header.html.erb に記述して行きます。

 

元々、下記のように記述していた箇所を

 

<ul class="list">
<li class="list-content"><%= current_user.nickname %>
</li>
<li class="list-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul> 

 

下記のように編集し、クリック時に表示するリストを作成します。

 

<div class="nickname">
<%= current_user.nickname %>
</div>
<ul class="js-lists">
<li class="js-content">
<%= link_to '編集', edit_user_registration_path(current_user) %>
</li>
<li class="js-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul>

 

ここまでで、リストの形を作ることができました。

 

 

 

CSSを適用

先ほど作成したリストのCSSを修正します。(細かい設定は省きます)

 

  • positionの設定
  • デフォルトの状態で画面にリストを表示しない

 

という記述をして行きます。

  

まず、下記でポジションの細かい設定をし、

(親要素には position: relative; を設定)

 

position: absolute;
top: 45px;
right: 30px;

 

 

続いてデフォルトでは画面に表示されないように設定します。

 

display: none;

 

2つ合わせてこのような形です。 

 

.js-lists{
position: absolute;
top: 45px;
right: 30px;
display: none;
}

ここまででCSSの設定が完了しました。

 

 

JavaScriptを記述

そしてJavaScriptを記述します。

 

記述の準備

まず、JavaScriptを読み込むために

app / javascript / packs / application.js に下記を記述します。

 

require("../pulldown")

 

そして、

app /javascriptリポジトリにpulldown.jsを作成します。

 

IDを読み取り変数に代入する

ファイルの作成が完了したので、コードを書いて行きます。

 

まず、ページを読み込んだ際にイベントが発火すると言う記述です。

 

function pullDown(){
}
 
window.addEventListener('load', pullDown)

 

 

続いて、JavaScriptで動かす箇所を指定し、変数に代入します。

 

該当するhtmlの箇所にidを付与します。

<div class="nickname" id="name">
<%= current_user.nickname %>
</div>
<ul class="js-lists" id="pull-down>
<li class="js-content">
<%= link_to '編集', edit_user_registration_path(current_user) %>
</li>
<li class="js-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul>

 

今回は1行目と4行目にidを付与しました。

 

そしてpulldown.jsで変数を定義し、先ほど記述したidを読み取り、代入します。

function pullDown(){
const pullDownButton = document.getElementById("name")
const pullDownContent = document.getElementById("pull-down")
}

 

ここまででidを読み取り、変数に代入することができました。

 

 

関数を定義

ここからは実際のにクリック時やマウスを乗せた時にビューが変化するための記述をします。

 

まずは

「ユーザー名にマウスを乗せた時、ユーザー名の色を変える」

ための記述です。

 

pullDownButton.addEventListener('mouseover', function(){
this.setAttribute("style", "color:#FFBEDA;")
})

 

上記のコードは、先ほど定義した変数のpullDownButtonにマウスが乗ると、

 colorを#FFBEDAに変更する

 

というイベントが発火する記述です。

 

そして、マウスが離れた時に元に戻す記述も追記します。

 

pullDownButton.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:#FFBEDA;")
})

 

こちらで「ユーザー名にマウスを乗せた時、ユーザー名の色を変える」

ことが実装できました!

 

 

続いて、

「ユーザー名をクリック時に、「編集」「ログアウト」のリストを表示する」

ための記述をします。

 

pullDownButton.addEventListener('click', function(){
if (pullDownContent.getAttribute("style") == "display:block;") {
pullDownContent.removeAttribute("style", "display:block;")
} else {
pullDownContent.setAttribute("style", "display:block;")
}
})

 

こちらはクリック時に発火されるイベントです。

if文で  display: block;  の有無による条件分岐を行いました。

 

CSSの設定で  display: none;  を設定したため、デフォルトでは

こちらの条件式はFalseとなり、 display: block;  が付与され、

リストがビューに表示ます。

 

逆に、リストが表示されている際には条件式がTrueとなるため、

display: block;  が取り除かれ、リストがビューから消えるということです。

 

 

以上で,

  1. ユーザー名にマウスを乗せた時、ユーザー名の色を変える
  2. ユーザー名をクリック時に、「編集」「ログアウト」のリストを表示する

の2つが実装されました!

 

 

最後に

今回実装したJavaScriptの全体はこちらになります。

 

function pullDown(){

const pullDownButton = document.getElementById("lists")
const pullDownContent = document.getElementById("pull-down")

pullDownButton.addEventListener('mouseover', function(){
this.setAttribute("style", "color:#FFBEDA;")
})
pullDownButton.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:#FFBEDA;")
})

pullDownButton.addEventListener('click', function(){
if (pullDownContent.getAttribute("style") == "display:block;") {
pullDownContent.removeAttribute("style", "display:block;")
} else {
pullDownContent.setAttribute("style", "display:block;")
}
})

}

window.addEventListener('load', pullDown)

 

JavaScriptは個人的には内容が複雑で、結構とっつきにくいイメージがあるのですが、このような簡単な実装から、少しずつできることを増やして行きたいです!

 

 

今日の記事は以上です!!

 

TECHCAMP10週間の学習を終えて

 

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、エンジニア転職を目指して活動しております!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

↓目次はこちらです↓

 

 

 

私は8/3~10/9までTECHCAMPに通い学習を続けてきました。

その10週間の感想を書かせていただきます!

 

 

 

カリキュラム

まずカリキュラムに関してですが、こちらは非常によかったです。

理由は

 

「大体のことは読めばわかる」

 

ということです。

 

こちらは当然のように思えて意外とそんなことはありません。

 

特に私たち未経験から始める勢としては、

エンジニアにとって当たり前のことが全くわからなかったりします。

 

そう言ったところへの配慮があり、常に改善されているカリキュラムは

さすがだな。と感じておりました。

 

また、実際に学習期間中にも、復習しようと過去の箇所を見ると

カリキュラムの内容が追記されてたりしました。

 

常に現場の声を反映させて改善し続けていることが見て取れることは、

そのカリキュラムで学習していて気持ち良かったです。

 

 

 

転職サポート

続いて転職サポートについてです。

 

転職サポートはネット上では

 

「意味がなかった」

 

という趣旨のコメントをよく目にします。

 

 

実際に現在、転職サポートを受けている最中の私としてはまだわからないことも多いとは思いますが、今のところは満足しています。

 

その理由としては、

 

学習期間中から嫌でも転職活動を意識させられる

 

からです。

 

 

具体的には学習期間中に各種セミナーがあったり

履歴書・職務経歴書の提出を求められたりします。

 

 

正直、学習期間中は、

 

「この期間は学習に集中させてくれ。」

 

と思ってましたが、いざ転職活動が始まるとあらかじめある程度の準備ができていることが非常に心強いです。

 

 

それに、TECHCAMPに通っている目標はただ単にプログラミングを覚えることではなく、エンジニアとして転職を成功させることです。

 

ですので、本来の目的達成のためには、こうして同時進行で転職活動の準備を進める必要があると思います。

 

そういうところは独学では難しく、

スクールならではの利点なのではないでしょうか?

 

 

 

学習環境

続いて学習環境についてです。

 

以前、マコなり社長が

 

「TECHCAMPはコロナの影響で基本オンラインになったけど、

それでもやり切らせる仕組みがあり、

やり切らせる自信があるので教室に通うスタイルと金額は変えない」

 

というような話を何かしらの動画でされていました。

(詳しくどう言った趣旨で言っていたかはわかりませんが私はこう捉えました)

 

 

しかしながら、実際に通っていた感想としては

 

「やらざるを得ない環境」は自身で作る必要がある

 

と感じました。

 

 

もちろんTECHCAMPの仕組みとして「やらざるを得ない環境」作りに注力していることはわかりました。

 

それは、1日に複数回のアウトプットタイムがあり、その時間にアウトプットするためにどうにか学習を進めないといけないというような仕組みが構築されているためです。

 

しかしこの仕組みは、

 

アウトプットはあるものの、参加に強制力がないため

班員のモチベーションに左右されてしまう。

 

 という実体でした。

 

実際に私の班では、終盤には常に1~2人しか集まらなく、それも毎回決まったメンバーのみの参加でした。

 

定期的なアウトプットのシステムは非常に良いものの、

それを運営する仕組みが十分ではなく、参加者のモチベーションに左右されることは非常に残念でした。

 

 

 

まとめ

まとめるとTECHCAMPは、

 

仕組み作りはしっかりできているけれど、

運用は同じ班のメンバーのモチベーションに左右される

 

というような印象でした。

 

「やらざるを得ない環境作りを外注する。」

 

という目的で入校した私にとって、正直70万円に見合った環境ではなかったと思います。(もちろん私に周りを巻き込む力がなかったのも原因ではありますが。)

 

 

カリキュラム内容や全体的なサポートは充実しており満足しておりますが、

私にとって最も求めていた要素が欠けてしまいました。

 

 

 

 

最後に

本日はこのような記事を書きましたが、

私はTECHCAMPに入校したことに一切後悔はありません。

 

理由は、モチベーション高く学習を継続できるかどうかなんて結局は自分次第だからです。

 

 つまり、スクールは手段の一つではありますが、

信頼を置きすぎるのではなく、結局信じるのは自分自身だということですね。

 

 

もしもこの記事を読んでいただいた方でスクールへの入校を検討されている方がいましたら、そのスクールにどういった要素を求めて入校するのか明確にしましょう。

 

その上で、本当にスクールが必要か検討できれば

後悔のない選択をできると思います。

 

 

今日の記事は以上になります。

Pythonを学び始めた感想

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

目次はこちらです↓ 

 

 

 

Python学習始めました

最近、私はTECHCAMPの学習と並行してPythonの学習を始めました。

(といってもカリキュラムは終了済み。オリジナルアプリ作成中)

 

今日はPythonを学び始めてから

気付いたことについて簡単に話していこうと思います!

 

 

ちなみにQiitaに基本的な構文について書いてみました。

興味のある方はご覧ください!

qiita.com

 

 

 

Pythonの特徴

まず簡単にpythonを知らない方向けにどんな言語か解説します。

 

pythonは、

  • 記述がシンプル
  • ライブラリが豊富
  • 機械学習(AI開発)で注目を集めている
  • データ分析に向いている

といった特徴があり、

 

などの有名なサービスを開発している言語です。

 

ちなみに私は、

 

将来は、データ分析や機械学習を専門に行うエンジニアとも協業して

働くことのできるwebエンジニアになりたい

 

と思い、Pythonにも触れています!

 

 

 

気づいたこと

①記述が簡単すぎる

python学習を始めてから常に思っています。

正直、初めてpythonを触る時は、新しい言語ということで不安もありましたが、

これによって不安は消え、pythonが好きになったと言っても過言じゃありません。笑 

 

 

例えば、if文に関してRubyと比較してみます

 

Ruby

if number >= 10

    puts “10以上”

end

 

に対して、

 

Python

if number >= 10:

    print("10以上") 

 

 

これだけでOKです!

 

pythonでは最後の「end」が不要で、インデントでブロックを表しています。

つまり、複数行のブロックを記述する際でもインデントの高ささえ合わせていれば、

1つのブロック内の要素だと判断してくれます!

 

Rubyでよく、最後のendを忘れてsyntaxエラーを起こしている私からすると

pythonは記述が簡単すぎます!笑

 

 

②ファイルを読み込んで置換が便利

2つ目はこちらです。

pythonはまだまだ基礎しか学んでませんが、それでも便利さを痛感してます。

 

ちなみにこちらがどういうことかと言うと、

 

  1. 別のファイルに記述してある内容を読み込む
  2. 1行ごと等、範囲を指定しリストの要素として取り込む
  3. 特定の文字列を指定して置換

という処理が簡単にできるということです。

 

 

こちらの処理をいくつか組み合わせることで

スケジュールの変更やメール文の修正が容易にできるようになります。

 

控えめに言っても、全ビジネスマンが学ぶべき言語だと思います!

(言い過ぎかもしれませんが、確実に仕事で使えます)

 

 

 

最後に

以上、簡単にですがpythonを学び始めて感じたことを書かせていただきました。

 

pythonの学習は始めたばかりなので、まだまだ未知な言語ですが、

(ruby等の言語も未知です。)

今のところ非常に楽しく学習ができております!

 

是非、これからプログラミングを始める方や、

他の言語は学んでいて、新しい言語にも触れたいという方は

Pythonを学んでみてはいかがでしょうか?

退職を決めてから今日までの積み上げ

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

 

目次はこちらです↓ 

 

 

 

 

 

退職から100日が経ちました

先日この様なツイートをしました。

 

 

過去のツイートを見てわかる様に退職以降、毎日積み上げを継続し、

なんと100日を迎えることができました。

 

この100日間は人生で最も成長した期間だと思うので、

その間にやってきたことと考えていた戦略について話します!

 

最後まで見ていただくことで私の考え方が見えてくると思います。

 

 

 

 

やってきたこと

大まかに時系列順でまとめていきます。

 

・2月:HTML&CSS

YouTubeでテックアカデミーの出している講座を一人でやる

なんとなく構造を理解

プログラミングへ興味を持つ

 

・4月:Mac Book購入

エンジニアになる決意を決める

まず最初に20万円の自己投資 → 自分に対するコストをかける

 

・4月~6月:タイピング練習

前職でもパソコンを使っていたものの、ブラインドタッチができない

(キーボードを見ながらある程度打てていたので、業務には困らなかった)

→ ブラインドタッチを徹底的に練習

寿司打: 2000円代 → 最大15,060円獲得

E-タイピング(英語タイピング): レベルE → レベルS

 

・6/23:退職

毎日の積み上げツイートの開始

 

・7/1~:国語学習開始

「你好」しかわからない状態から1ヶ月でHSK3級獲得を目標に開始

 

基本情報技術者は、学習内容と時間配分を考え途中で中止しました。

 

 

8/2:HSK3級模擬試験

合格(6割合格のところおよそ7割獲得)

 

8/23:HSK3級本試験

262/300点 合格

 

9/19:HSK4級本試験

結果待ち(出来栄えは7割程度)

 

 

8/3~:TECHCAMP受講開始

9/23:最終課題終了

 

9/24~:python独学開始

9/25~:オリジナルアプリ作成開始

 

 

 

ここまでの戦略

①ゴールを決める

TECHCAMPを卒業すること(エンジニアになること)はゴールではない

 

自身のゴールは、エンジニアとして一定以上の成果を残すところにある。

漠然とした目標ではあるが、10年後に

 

「日本の生産性向上をリードする存在になること」

 

と、ゴールを定義

 

 

 

差別化戦略を考える

ただスクールでレールに沿って学習するだけではゴールへは辿り着けない

 

自身の明確な強みを持つ価値の高いエンジニアになるために、

→ エンジニアになって5年後2025年を考える

アメリカがIT社会をリードすることは変わらないが、中国も負けずにITをリードする国として存在する。

 →最新の技術をインプットするためにはどちらかの言語を習得する必要あり。

→ 差別化のためには英語に比べ学習者の少ない中国語を話せるようになる。

 

「中国語が話せて、中国の情報に強いエンジニアになる」

 

という差別化戦略を立てる。 

※中国語学習に関する詳しいことは今後別記事を書きます。

 

 

 

③足りない要素を補う

①②達成のために足りないことを洗い出し、

それを補うための行動を毎日の積み上げと並行して行う。

 

プログラミング力

TECHCAMPはあくまで大枠を学ぶ場

自身でやりたいものは見つける

そもそもタイピング苦手 → 受講前に克服する必要あり

機械学習・データサイエンス等にも興味 → カリキュラム終了後にpythonを開始

 

IT知識:ひたすらインプット → YouTubeを活用

ツイッター/note/ブログ の気になった情報は必ず確認する

 

言語化能力: → ブログを書く

 

社会の現状: → ニュースを見る (見るだけでなく毎日考えをアウトプット)

 

 

 

 まとめ 

ここまでのやってきたことと戦略はこのような感じです。

 

この様な考えに基づき、やるべきことを整理して取り組んだため

100日間で自身の納得のいく成長をすることができました。

 

そしてこれからは転職活動をしていくわけですが

そこでもやるべきことを明確にし、足りない要素を補いつつ準備しております。

 

 

 

最後に

エンジニアを目指す未経験者はフリーランスを目指すことが非常に多いと聞きます。

 

もし私がそういった考えなら、勤め先は経験を積める環境なら比較的どこでも良いと考えるかもしれません。

 

ですが、現在、私にはやりたいことがあります。

 

そしてそれを叶えるためにはできる限り1社で勤め、その分野での専門性を身に付けることが最短の道だと思っています。

 

そのためには未経験からの一発で、自身の納得いく企業に確実に入社しなければなりません。

 

現在そのために試行錯誤を繰り返しておりますので、

転職活動終了後にでも今の考えをまた発信できればな。と考えてます!

 

今日の内容が気に入ったという方は是非また見にきてください! 

Ruby on Rails 綺麗なヘッダーを作るためのCSS【背景画像の設定】

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

 

目次はこちらです↓ 

 

 

 

はじめに

本日は「綺麗なヘッダーを作るためのCSS」というテーマで書かせていただきます!

ヘッダーの背景に画像を挿入する簡単な方法 - Qiita

※Qiitaにも別記事を投稿しました!

 

 

現在、私はTECHCAMPのカリキュラムを終え、

オリジナルアプリ作成をしております!

 

オリジナルアプリでは、シェアサイクリングの比較サイトを作っておりますが、

そこでのトップページ作りの際に、

 

非常にいい感じのヘッダーが作れました!!

 

今日はそれについて書いていきます!

 

 

 

作成したヘッダー

このような見た目に作れました!

 

f:id:mikujo:20200930213852p:plain

 

どうですかね?

我ながら非常に綺麗な見た目のヘッダーにできたと思っております。

 

それでは実際のコードの記述に関してです。

 

 

HTML

①ロゴの作成

まずは左上のロゴを作ります。

 

ロゴは全体をリンクにしたいので、

 

<%= link_to do %>

<% end %>

 

で囲んで記述します!

<%= link_to root_path, class:"header-title" do %>
<div>sharecling</div>
<div class="header-sub-title">〜移動に選択肢を〜</div>
<% end %>
 

 

 

②ログイン/新規登録 ボタン

続いてボタンの作成です。

こちらはif文の条件分岐を使用し、

ログインの有無によって表示を変えるよう記述しました。

 

 

f:id:mikujo:20200930214712p:plain

 

 

③中心にくる文章

こちらはそのまま記述するだけです。

<div class="header-center">
<div class="header-center-top">シェアサイクリング比較レビューサイトなら</div>
<div class="header-center-bottom">sharecling</div>
</div>
 
 
HTML全体ではこのようになりました。
 

f:id:mikujo:20200930215009p:plain

 
 
 

CSS

ここから肝心のCSSに移って行きます。
 

①ロゴとログイン/新規登録ボタンの位置指定

まずロゴの位置を指定します。

 

.top-page-header {
width: 100vw;
padding: 10px 0 20px 0;
position: fixed
top: 0;

 

続いてヘッダーの要素を横並びに変えて、ボタンをロゴの左隣に配置します。

.header-top-content{
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0 30px 0;
}

 

ul内も横並びに。

.lists-right {
display: flex;
list-style: none;
margin: 0 30px 0 auto;
}

 

 

②ロゴとログイン/新規登録ボタンのレイアウト

font-size, color, font-familyなどを指定して行きます。

.header-title {
font-size: 40px;
text-decoration: none;
color:#4b4b4b;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
margin-left: 4%;
}
 
.header-sub-title{
font-size: 17px;
padding-left: 15px;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
}

 

.login {
text-decoration: none;
margin-right: 3vw;
color: whitesmoke;
}

.sign-up {
text-decoration: none;
color: whitesmoke;
}

 

 

③センターの文字列

同様に記述し、配置とレイアウトを整えます。

.header-center{
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: whitesmoke;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
}

.header-center-top{
font-size: 18px;
color: whitesmoke;
}

.header-center-bottom{
font-size: 40px;
color: whitesmoke;
}

 

  

 

ここまででこのような表示になってます。

(白で見にくいですが、各要素の作成ができました)

 

f:id:mikujo:20200930220200p:plain

 

画像を背景に設定

最後に画像を背景に設定します。

 

画像の設定には

background: ○○;

の記述を利用します。

 

.top-page-header{}内に以下のコードを追記します

height: 65vh;
background-image: url('sharecling.jpg');
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
opacity: 0.8;

 

background-image から background-sizeまでの記述は以下のようにも記述できます

background: url('sharecling.jpg') right bottom / cover no-repeat;

 

 

※この時気をつけるべき箇所がbackground-position

これは、画像のどこの部分を切り取るか大体の位置を指定するもの!

 

今回は元の画像の右下部分に寄りたかったため、

background-position: right bottom;

という指定ですが

 

左上に寄りたければ

background-position: left top;

 

真ん中なら

background-position: center center;

という記述になります!

 

 

これにてヘッダー完成です!!

 

 

完成のコード

最後にコードを貼っておきます

CSSが画面の関係で分割になってしまいます。

 

HTML

f:id:mikujo:20200930215009p:plain

 

CSS

f:id:mikujo:20200930222010p:plain

f:id:mikujo:20200930222024p:plain

f:id:mikujo:20200930222038p:plain

 

 

今日の実装は以上です!

自走力について考えてみた【駆け出しエンジニア向け】

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

 

 

自走力について考えてみた

 

エンジニアを目指し始めてから、以前に比べて耳馴染みの少ない言葉を耳にすることが増えました。

 

そのうちの一つが自走力

 

もちろん、エンジニア以外の職種でも使う言葉ですが

一体どういった意味で使われ、なぜよく耳にするのでしょうか?

今日はそれについて考えてみました。

 

 

↓今日の目次です↓

 

 

 

 

 

自走力とは?

 

エンジニア転職を目指し始めてから転職支援サイトなどで時々見かけるようになりました。

はじめは漠然と

 

「自分で考えて、検索して、コードを記述しろってことだよな。」

 

 

と思ってました。

しかし、それだけなら、わざわざ自走力と言う必要なくないですか?

 

 

そこで私なりに自走力を要素に分解して考えてみました。

 

 

私の考える自走力

  1. 論理的思考力
  2. 検索力
  3. 実行力
  4. 継続力

 

簡単に解説します

 

 

 

①論理的思考力

自走力を考える上で最重要だと思いました。

 

自走するためには、自ら考えることが必要。そしてただ考えるだけでなく、

「論理的に組み立てて考える」

論理的思考力が最重要だと思いました。

 

仮説→検証するためにも

まず仮説を立てることもこの能力があってこそだし、

仮説の精度もこの能力で決まると思います。

 

 

②検索力

検索力は、

「論理的に考えても自分の知識だけでは解決できないことを補う」

ことを指しています。

エンジニアの学習に限らず検索力を高めることは、

自身の知見を広げ、知識以上の成果を発揮するために必要なことです。

そのため2番目に入れました。

 

 

 

③実行力

これは2番目に入れるか悩みました。

どんなに論理的に考え、検索して足りない部分を補足しても、

結局実行しなければ何を残らないからです。

 

しかし、論理的思考力も検索力もなく、ただ実行しているだけでは決して自走できているとは言えません。

 

「単体では効果は小さいが、他の能力を引き出すために重要な能力」

と考え、3番目にしました。

 

 

④継続力

自走していくためには、単発で何かをしていくのではなく、

「常に成長を続ける継続力」

が必要だと思いました。

 

学習意欲とかもここに入ってくるとは思いますが、

たとえ怠け者であっても仕組みを作ってそれを補えるのなら継続力が高い

と考えて良いのでは無いかと個人的には思います。

 

 

 

 

自走力について調べてみた

 

https://diveintocode.jp/blogs/DIVEINTOCODE/SelfPropelledPower

 

参考にしたものがこちらの記事です。

 

プログラミングスクールDIVE INTO CODEというところがプログラミング初心者向けに書いているので、今回のテーマに向いていると思い参考にしました。

 

 

 

ここで言われている自走力とは以下3点です

言語化能力

②論理的思考力

③思考持久力

 

そして補足として2つ

④完遂力

⑤問題発見力

 

※こちらの2つは

「自走力を構成する上で必須の能力ではないが、人間として大事な能力」

と位置付けされていました。

今回は省略しますが、興味のある方は記事を読んでみてください。

 

 

 

 

それでは解説していきます。

 

 

言語化能力

これは、課題設定のために必要な能力ということが言われております。

「日本語ができる人がプログラムを書くことができる」

という話があるようにこの能力がないとそもそも仮説が立てられないとのことです。

 

 

②論理的思考力

これは、私の分析と同様でした。

エンジニア的に言うなら問題を切り分ける能力ということで、

「どのセグメントに問題があるか?」

ということを考えられる能力とのことです。

 

③思考持久力

これは、思考の深さ・広さと言い換えられると言っていて、

「一つのことにどれだけ深く考えられるか」

ということを言っているとのことです。

 

 

 

 

 

エンジニアに必要な自走力とは

 

私の考えた内容と調べた内容では近い要素もいくつかありました。

今回は私の考えをベースに調べた内容を組み合わせて考えてみました。

それがこちらの4つです。

 

 

言語化能力

自走力を考える上で前提となる能力。

言語化ができないと、仮説立てすらできない。考えをまとめられない。

 

 

②論理的思考力

物事を順序立てて考え、適切に切り分ける能力。

仮説を立ての精度や様々な切り口を考える。

 

 

③実行力

言語化し考えた要素を実際に検証していく能力。

適切な実行をしていかないと机上の空論で終わってしまい、自走にたどり着かない。

 

 

④継続力

思考や行動を続ける能力。

自走力は①〜③を単発でやっても意味がない。継続することだけでのみ伸ばすことができる。

 

 

 

非常に簡潔ですがまとめました。

私の個人の主観でしかないですので、

あくまで一個人の解釈として読んでいただけるとありがたいです。

 

 

 

 

最後に

ということで今回は、自走力について考えてみました。

 

未経験のIT業界に、職種も営業からエンジニアへ大幅に転換して挑む就職活動では、

知っている様で知らない言葉や、

自分の理解と異なる意味で使われている言葉は非常に多くあると思います。

(固有名詞だとポートフォリオとかもその内の1つです!)

 

 

そういった言葉を深く考えずに使っていくことは命取りになるのではないか?

 

そう思い、今回はこの様な記事を書かせていただきました。

 

 

もし今日の話に、

「もっとこうじゃないか。」

という意見がある方は教えていただけると嬉しいです!

 

今までの人生の損に気付きました。

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

 

 

今までの人生の損に気付きました。

 

本日のテーマはこちらです。

先日、日常の思いがけないところから今後のヒントを見つけました。

 

 

日常の思いがけないところにヒントはある

 

ということに気付いていない今までの自分は損をしていたな。

と思い、自身への戒めとしてこの記事を書きます。

 

 

↓今日の目次です↓

 

 

 

美容室での話

先日、美容室に行きました。

 

普段は決まったところで大体切っていたのですが、

再就職までは金銭面が非常に苦しいこともあり、友人に教えてもらったカットモデルというものを人生初やってみました。

 

正直、行くまでは、「練習中の人が切るということで技術的に大丈夫かな。」

と思っていましたが、想像以上に切り方も上手く、何よりも丁寧に切っていただき大満足でした!

 

 

カットモデルは普段と違う目線で美容室を見れるので、なんだか新鮮な気持ちで面白かったですね!

 

 

 

勉強熱心な駆け出しスタイリストさん

私を担当して下さったのは若い駆け出しスタイリストさんでしたが、非常に丁寧で好感の持てる方でした!

 

 

そのスタイリストさんから、髪質について1つ教えてもらいました。

詳しい話は省略しますが、簡潔に言うと、

 

  • 直毛の人と癖っ毛の人では毛の形が違う。
  • それは毛の形の違いであって、それに応じたカットやスタイリングがある。

 

 

と言った様なことでした。

 

知らなかったことを知れた嬉しさもありましたが、

そのスタイリストさんの勉強熱心な印象に好感が持て、

(もちろんそれ以外にも魅力的な方でした!)

 

「これからはこの人に切ってもらおう!」

 

と思えました!

 

 

 

 

最近読んでいる本の話

 

話は変わりますが、私は毎日寝る前に読書をしています。

そこで最近読んでいる本が

 

 

前田裕二さんの「メモの魔力です」

 

 

 

この本では、メモを通じて具体的な事象を抽象化。

→自身のアクションプランに転用する。

 

と言う行動を常日頃行うことで圧倒的な成長をすることができると言ったことが書かれています。

 

 

そこで私は、

 

どうしてあのスタイリストさんに好感を持てたのか

 

ということを抽象化して考えてみました。

 

 

 

 

実際にメモに書いて考えてみた

 

今回考えてみたことは以下のことです。

(実際のメモには色々書きましたがここには省略して簡単に書いてます。)

 

 

①抽象化

 

どうして好感が持てたのか?

 

↓↓↓

 

今まで聞いたことのなかった髪質の話をしてもらったことで好感を持った。

 

↓↓↓

 

本来お客さんに話す必要のないカットの技術的な話を聞いたことで、熱心さや探究心が伝わり好印象につながった。

 

↓↓↓

 

本来伝える必要のないことを伝えることで、熱心さや探究心を相手に伝えることができる。

 

 

②自身への転用

 

今後転職活動をする際、

前職での経験や自身の学んでいることについて、

本来不要だと思われていることまで踏み込んで話すことで

熱心さや探究心を伝えることができるのではないか?

 

↓↓↓

 

情報を自身で選別しすぎず、試しに踏み込んで話してみる。

 

 

 

このように転用し、仮説を立てることができました!

 

 

 

人生のヒントを見つけました。

 

今回の出来事から

 

 

日常の思いがけないことでも抽象化→転用することで人生のヒントになる

 

 

という可能性に気付きました。

 

ただお金を節約したくて行ってみたカットモデルで、まさかこんな有益な情報を得られるなんて、思いもしなかったです。

 

日常の思いがけないところにあるヒント

 

に気付けたのはメモの魔力を最近読んでいたからこそなので

 

 「先人の知恵ってすごいな」

 

と思いました。

それと同時に、

 

「この本を手にとった自分を褒めてあげたいな」

 

と少しだけ思いました。笑

 

 

 

 

そして、

 

「今まで自分がどれだけ学びの種を無視してきてしまったのか」

 

ということにも気付いてしまい、

 

 

「メモ持ち歩けば良かったな」

 

とちょっとだけ後悔しています。笑

 

そのため、自分への戒めとしてこの記事を書くことに決めました!

 

 

 

最後に

ということで今回の話は以上になります。

 

先日私が見た、マコなり社長のYouTubeでも

具体と抽象を行き来することの素晴らしさについて説かれていました。

 

もしかしたら、成功者は皆、このような考え持ち、圧倒的なアクションプランを立て実行に移して来たのかも知れません。

 

 

これを読んでいただいた皆さんも、

是非、日常の思いがけないところに目を向けて

「抽象化→転用」をしてみてください。

 

 

もしかしたら人生を好転させる材料になるかもしれません。

 

私も今後は抽象化→転用を意識して生活してみます!