hamatakeBlog

MENU

プログラミングの必須処理: テキストやボタンの表示非表示の活用法( visibility , display )

プログラミング

おはようございます、hamatakeBlogです！

 

JavaScript入門！この記事は、JavaScriptの学習をすでに始めているかた向けの記事となっています。

超初心者編は、こちら⇓からどうぞ！

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

 

今回は

ボタンやテキストの表示非表示切り替え処理を実行する方法

をご紹介します。

・特定の条件の時に表示したい！

・ボタンが押されたら表示、もう一回ボタン押したら非表示にしたい！

などの処理を実装したい人向けの記事となります！

 

ということで、今回はボタンクリックした時、テキスト表示非表示切り替えをする処理を作っていきます！

完成イメージはこんな感じ⇓

---ここにテキスト表示---

テキストが表示されました！

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

それではやっていきましょう！

Style visibilityで表示非表示

対象の要素にstyle.visibilityを設定することで、文章のレイアウトを変更することなく表示表示を切り替えることができるます。

style.visibilityの要素をJavascriptで付け替える方法を教えます。

まずは、HTMLを準備します。

<body>

  <button type="button" id="btn1">テキストを表示切替！</button>

// style visibility : visible でテキストを表示させる

<p id="toggleText1" style="visibility : visible">テキストが表示できました！

</p>

  <script type="text/javascript" src="sample.js"></script>

</body>

※今回ボタンタグにフィーチャーするためheadタグなどは省略して記載しています。

詳しくは、こちら⇓の記事を参考にしてHTMLを作成してください。

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

続いてJavascript

sample.js

// document.getElementById()でHTMLの中でid属性がbtnの要素を取得し、変数buttonに代入する

let button1 = document.getElementById('btn1');

// addEventListenerでボタンのクリックイベント時に処理を実行
button1.addEventListener("click",function() {

  // id属性がtoggleTextの要素を取得
  let text1 = document.getElementById('toggleText1');

  // text の style visibility の状態で分岐条件を設定
  if(text1.style.visibility === 'visibility'){
    text1.style.visibility = 'hidden';
  } else {
    text1.style.visibility = 'visible';
  }
});

 

完成形はこんな感じ！↓

テキストが表示されました！

Styleメモ

  • style.visibility
    文章のレイアウトを変更することなく表示表示を切り替えることができる
  • visible
    style.visibilityに設定することで対象を表示状態にする
  • hidden
    style.visibilityに設定することで対象を非表示状態にする

Style displayで表示非表示

対象の要素にstyle.dipslayを設定することで、表示表示を切り替えることができるます。(※visibilityと違いレイアウトまで非表示となるので注意！)

style.displayの要素をJavascriptで付け替える方法を教えます。

まずは、HTMLを準備します。

<body>

  <button type="button" id="btn2">テキストを表示切替！</button>

// style display: block でテキストを表示させる

<p id="toggleText2" style="display: block">テキストが表示できました！

</p>

  <script type="text/javascript" src="sample.js"></script>

</body>

sample.js

let button2 = document.getElementById('btn2');

button2.addEventListener("click",function() {

  let text2 = document.getElementById('toggleText2');

  // text の style display の状態で分岐条件を設定
  if(text2.style.display === 'block'){
    text2.style.display = 'none';
  } else {
    text2.style.display = 'block';
  }
});

 

完成形はこんな感じ！↓

テキストが表示されました！

Styleメモ

  • style.display
    文章表示表示を切り替えることができる
  • block
    style.displayに設定することで対象を表示状態にする
  • none
    style.displayに設定することで対象を非表示状態にする

 

まとめ

以上、テキスト表示非表示の処理でした。

表示非表示切替はあらゆる箇所で利用できるのでしっかりとマスターして快適なエンジニアライフを送りましょう

 

1冊ですべて身につくJavaScript入門講座 [ Mana ]

1冊ですべて身につくJavaScript入門講座 [ Mana ]

 

こちらの記事を見終わった方は次の記事をチェック！

hamatakeblog.hatenablog.com

hamatakeblog.hatenablog.com

hamatakeblog.hatenablog.com

 

ランキング参加中
知識

ランキング参加中
プログラミング

ランキング参加中
ブログ仲間増やしたい方全員集合！✨　初心者も上級者も誰でも参加OK！

プログラミングの必須処理: ループの活用法

プログラミング

おはようございます、hamatakBlogです！

 

今回は、ループ処理を解説したいと思います!

画像説明（ブログ内には見えないがSEO的意味がある）

ループってことは、繰り返すって意味かな～？！

そうです！ループ処理は繰り返し処理を行うができるようになります！

プログラムを組むにあたって、必須な処理なので、ぜひ覚えましょう！

 

ループ処理には、複数の実装方法があります。用途によって使い分けましょう！

 

それでは、学習スタート！！

for文

まずは、ループ処理の基本の一つであるfor文について解説します！

JavaScript

// ( 変数の初期化; ループ条件; 加算式 )
for (let i = 0; i <= 5; i++) {
  console.log("for文:" + i);
}

for文は、上記のように記述します。

大きく3つに分かれています。

  • for文であることを定義するfor

  • ループ処理の条件やループ回数を記述する( )
  • ループする処理を記述する{ }

さらに( )の中は、(変数の初期化; ループ条件; 加算式 )に分かれており、セミコロンで区切って定義することができます。

つまり、上記の式は、変数 i = 0 をループするごとに、i++ で加算し、i が 5 以下の場合ループ処理を行うとなります。

 

そして、ループ内の処理は、console.logで i が加算されていることを確認するようログ出力を行っています。

 

また、for文の ( ) 内は省略が可能で下記のように記述ができます。

JavaScript

// for文の（;;）内は省略可能
// 条件なしとなるため無限ループに気を付ける必要がある
let forCount = 0;
for (; ;) {
  if (forCount > 5) {
    // 下記でも説明しますが、breakでループ処理を抜けます
    break;
  }
  console.log("for文省略:" + forCount++);
}

ただし、すべてを省略した場合は無限ループとなるためループを抜けるための処理をいれるようにしましょう。break文に関しては、後程解説します。

while文

2つ目は、こちらもfor文と同様にループ処理の基本の一つであるwhile文について解説します！

JavaScript

// for文と違い、ループの条件のみです
let whileCount = 0;
while (whileCount <= 5) {
  console.log("while文:" + whileCount++);
}

while文も、for文と同様の構成となってます。

  • while文であることを定義するwhile

  • ループ処理の条件やループ回数を記述する( )
  • ループする処理を記述する{ }

ただし、for文と違い、( ) の中は、ループの条件式のみ記述が可能です。

またwhile文は ( ) の中を省略はできません。

do while文

while文の派生であるwhile文について解説します！

JavaScript

// 条件：カウントが5以上の場合、ループ処理を行う
// do while文では条件に限らず1回は処理を行い2回目のループを行う時に、
// 条件処理を適応するため、下記では初期値カウント0で「カウントが5以上」の条件を
// 満たさないが、1度だけログ出力処理を行っている
let doWhileCount = 0;
do {
  console.log("do while文:" + doWhileCount++);
} while (doWhileCount > 5);

while文と構成が少し違って見えますが、基本的には、同じです。

  • while文であることを定義するwhile

  • ループ処理の条件やループ回数を記述する( )
  • ループする処理を記述する{ }
  • do while文であることを定義するdo

ただし、ループ処理の仕方が違います。

do while文では条件に限らず1回は処理を行い2回目のループを行う時に、 条件処理を適応します。

そのため上記処理では、初期値カウントが0で、本来「カウントが5以上」の条件を満たさないが、1度だけログ出力処理を行っています。

continue文

続いて、ループ処理内で使うcontinue文について解説します！

JavaScript

// continueは、ループ処理内で使用します
// continueが実行されるとループ内のcontinue以下のループ内処理をスキップし
// ループ処理を再開します
let continueCount = 0;
while (continueCount <= 10) {
  if (continueCount === 5) {
    continueCount++;
    continue;
  }
  console.log("continue文:" + continueCount++);
}

continue文は、ループ処理そのものではなく、実行した時、continue以下のループ内処理をスキップし、またループ処理に戻ります。

上記の例では、continue文が実行されるのはcontinueCountが5の時で、continueが実行された後、continue以下の処理である、console.logは実行がスキップされループ処理に戻ります。

 

break文

continueと同様にループ処理内で使うbreak文について解説します！

JavaScript

// continueと同様に、ループ処理内で使用します
// breakが実行されると、break以下処理を実行せずに、ループ処理を抜けます
let breakCount = 0;
while (breakCount <= 10) {
  if (breakCount > 5) {
    break;
  }
  console.log("break文:" + breakCount++);
}

break文は、ループ処理そのものではなく、実行した時ループ処理を抜けます。

上記の例では、本来10回ループされるよう条件定義されたwhile文ですが、break文が実行されてループ処理を終了します。

label文

for文、while文などに使うlabel文について解説します！

JavaScript

// 特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします
// 下記では、本来breakしたときに、内側のfor文を抜けるbreakにlabelをつけることによって、
// labelされたwhile文を抜けるよう処理を行っています
// ループ処理がネストされた場合などで使用します
let labelCount = 0;
markLoop:
while (labelCount <= 10) {
  for (let i = 0; i <= 3; i++) {
    if (i === 2) {
      break markLoop;
    }
    console.log("labelCount:" + labelCount + " i:" + i);
  }
  labelCount++;
}

label文は、特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします。

使い方は、for文やwhile文の前に、ラベルを記述。この時ラベルの値は、JavaScriptの予約語でなければどんな文でも問題ありません。そして同じラベルをbreakやcontinueのあとに記述します。

上記の例では、通常直近のループを抜けるbreak文（今回はfor文）ですが、ラベル（markLoop）を記述しているため、while文のループを抜けます。

for in文

forの派生であるfor in文について解説します！

JavaScript

// for文の派生系
// ( 変数 in オブジェト )でオブジェクトのプロパティ（name,age）を
// valueに代入し、valueの数だけループを行う
let object = { name: "Taro", age: 20 };
for (let value in object) {
  console.log("for in文object:" + value + "_" + object[value]);

}
// 配列をいれた場合は、配列のインデックス番号をvalueに代入する
let array = ["a", "b", "c", "d"];
for (let value in array) {
  console.log("for in文array:" + value);
}

for in 文は、オブジェクトのプロパティの数ループ処理を行います。

( 変数 in オブジェクト)の形で定期を行います。上記の例では、nameとageのプロパティを持つ変数objectをfor in文で、ループを行っています。プロパティname、ageはvalueに代入されます。

配列をfor in文に記述した場合は、valueにインデックス番号を代入します。

for of文

forの派生であるfor of文について解説します！

JavaScript

// for文の派生系
// ( 変数 of 配列 )で配列の値を変数に代入し、配列の数だけループを行う
let array = ["a", "b", "c", "d"];
for (let value of array) {
  console.log("for of文:" + value);
}

for in 文は、配列のプロパティの数ループ処理を行います。

( 変数 of オブジェクト)の形で定期を行います。上記の例では、配列のプロパティの値（a, b, c, d）をループごとにvalueに代入して処理を行います。

 

 

ということで今回は、ループ処理について解説しました！

種類は少し多かったですが、非常に重要な処理のため、しっかりと使えるようになりましょう！


以上ご視聴ありがとうございました！

1冊ですべて身につくJavaScript入門講座 [ Mana ]

1冊ですべて身につくJavaScript入門講座 [ Mana ]


 

【JS CSS】簡単にWebページでタブの切替を表示する方法！JavaScript版、CSSのみ版その２

プログラミング

おはようございます、hamatakBlogです！

 

今回は、タブ表示切替その２です。

画像説明（ブログ内には見えないがSEO的意味がある）

前回のタブ切替その１を見てない方はそっちから見てね！

hamatakeblog.hatenablog.com

ということでさっそく前回の続きから解説していきたいと思います。

前回はJavascriptを使って、タブの切替を行いましたが、今回ご紹介するのは、CSSのみでタブ切替を行う方法です！

Javascriptを読み込まない分、前述したロジックよりも軽量で早く処理を行うことができます！（今回は短い処理なので、差異はわかりにくいですが。。。）

 

それでは、学習スタート！！

CSSのみでタブ切替をしてみる

それでは、CSSとHTMLを用いてタブの切替をやってみましょう！

HTML

<div>
<!--タブを表示-->
<div class="tab-group">
  <input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
  <label class="tab" for="japanese">国語</label>
  <input id="mathematics" type="radio" name="tab-name">
  <label class="tab" for="mathematics">数学</label>
  <input id="history" type="radio" name="tab-name">  
  <label class="tab" for="history">日本史</label>
  <!--タブ切替表示内容-->
  <div class="content-group">
    <div id="japanese-content">国語の授業内容</div>
    <div id="mathematics-content">数学の授業内容</div>
    <div id="history-content">日本史の授業内容</div>
  </div>
</div>
</div>

CSS

  .tab{
    flex-grow: 1;
    padding:1vh;
    list-style:none;
    border:double 4px rgb(58, 57, 57);
    text-align:center;
    cursor:pointer;
    float: left;
    width: 30%;
  }
  .content-group{
    height:100px;
    border:solid 1px #CCC;
    background:rgb(180, 180, 180);
  }
 
  /* 選択されたタブのスタイル変更 */
  #japanese:checked ~ .tab[for=japanese],
  #mathematics:checked ~ .tab[for=mathematics],
  #history:checked ~ .tab[for=history]
  {
    background:#0017FF;
    color:#FFF;
  }
  /*ラジオボタンを全て消す*/
  input[name="tab-name"] {
    display: none;
  }
 /*タブ切り替えの中身のスタイル*/
  .content-group div {
    display: none;
  }
  .content-group{
    clear: both;
  }
  /* 選択されているタブのコンテンツのみを表示 */
  #japanese:checked ~ .content-group #japanese-content,
  #mathematics:checked ~ .content-group #mathematics-content,
  #history:checked ~ .content-group #history-content
  {
     display: block;
  }

イメージはこちら⇓

タブ切替

上記イメージを見てもらうとわかりますが、Javascriptで作成したものと
見た目は変わりません。

inputタグのradioボタンでタブ切替を行います。

radioボタンとは、選択肢の中から一つだけ選べるタイプのボタンのことです。

この特性を活かしタブ切替に利用します。

chekedを記載することで、初期表示時のタブを選択します。

<input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
<label class="tab" for="japanese">国語</label>
 

 

続いて、CSSで特質すべき点は、下記のロジックです。

  /* 選択されているタブのコンテンツのみを表示 */
  #japanese:checked ~ .content-group #japanese-content,
  #mathematics:checked ~ .content-group #mathematics-content,
  #history:checked ~ .content-group #history-content
  {
     display: block;
  }

まず、#japanese:checkedですが、これは「id」が「japanese」の要素がチェックされた状態の時を表しています。つまりタブが選択された状態の時を指します。

続いて、この波線はチルダ（~）といい、選択した要素以降を指定させるためのセレクタです。

つまり、上記のロジックは、タブが選択されたとき、コンテンツ（授業内容）を表示するということです。

 

まとめ

いかがだったでしょうか、今回はタブ切替について、解説しました。
Javascriptを用いる方法とCSSのみの方法の2パターンで解説しましたが、

JavaScriptを用いる場合は、JavaScriptを読み込むため、どうしてもCSSよりも処理が遅くなりますが、タブが追加などの修正の対応は、CSSのみよりもやりやすいなど、それぞれ一長一短の側面があります。

臨機応変にソースを使いわけてより良いプログラミングライフを送れるようこれからもブログ更新をしますので、ぜひ別の記事もまた見てください！！


以上ご視聴ありがとうございました！

 


 

【JS CSS】簡単にWebページでタブの切替を表示する方法！JavaScript版、CSSのみ版

プログラミング

おはようございます、hamatakBlogです！

 

今回は、タブ表示切替についてご紹介します。

画像説明（ブログ内には見えないがSEO的意味がある）

タブってどんなものなの？？

タブとは、下記の画像のようなものです！

画像説明（ブログ内には見えないがSEO的意味がある）

あー、よく見たことある！

 

本ブログでも、ヘッダー部分にタブを作ることで、ジャンル分けをしています！

タブがなくても、Webページは作れますが、組み込むことでページの可読性を高めることができるんです！！

 

タブの切り替え処理は、JavaScriptを組み込んでタブ選択時のイベントを拾って切り替えを行うパターンや、HTMLとCSSのみで実装するパターンがあります。

 

今回の記事では、どちらのパターンも解説するので、状況によって使い分けてみましょう！

 

それでは、学習スタート！！

JavaScriptを用いたタブ切替をしてみる

それでは、JavaScriptを用いてタブの切替をやってみましょう！

HTML

<div>
      <!--タブを表示-->
      <ul class="tab-group">
          <li class="tab japanese active-tab">国語</li>
          <li class="tab mathematics">数学</li>
          <li class="tab history">日本史</li>  
      </ul>
     
      <!--タブ切替表示内容-->
      <div class="content-group">
          <div class="content japanese show">国語の授業内容</div>
          <div class="content mathematics">数学の授業内容</div>
          <div class="content history">日本史の授業内容</div>
      </div>
    </div>

CSS

.tab-group{
    /* display: flexでタブを横並びにする */
    display: flex;
    justify-content: center;
  }
  .tab{
    flex-grow: 1;
    padding:1vh;
    list-style:none;
    border:double 4px rgb(58, 57, 57);
    text-align:center;
    cursor:pointer;
  }
  .content-group{
    height:100px;
    border:solid 1px #CCC;
    background:rgb(180, 180, 180);
  }
  /* 授業内容は、デフォルト非表示 */
  .content{
    display:none;
  }
  .tab.active-tab{
    background:#0017FF;
    color:#FFF;
  }
  /* is-showクラスが追加された場合表示 */
  .content.show{
    display:block;
  }

Javascript

// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', changeTab, false);
}

// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){
    // タブのclassを変更
    // active-tabクラスによって選択されているかを判別しているため、
// タブクリック時に一度すべての選択を解除するためクラス削除
    document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
    // thisでクリックされた要素のみを指定することができる
    // addでクリックされたタブにactive-tabを追加
    this.classList.add('active-tab');
    // コンテンツのclassを変更
    document.getElementsByClassName('show')[0].classList.remove('show');
    // クリックされたタブのクラスを取得
    const tabClasses = Array.prototype.slice.call(this.classList);
    // filter関数でクラス配列から、
// tab,active-tab以外のクラスを取得（japanese,mathematics,historyを取得）
    var result = tabClasses.filter(function( item ) {
        return item !== 'tab' && item !== 'active-tab';
      });
    // タブに応じた授業内容を表示
    document.getElementsByClassName('content' + ' ' + result)[0].classList.add('show');
};

イメージはこちら⇓

タブ切替

まずは、HTML、CSSについて解説します。
HTMLに「ulタグ、liタグ」を用いてタブになる部分を表示します。その下に、タブごとで表示した内容（divタグ内）を表示します。

また、初期表示として表示したいタブと、タブに関連したdivタグにクラスを付与します。(それぞれactive-tab、show)
このクラスをJavaScripで付け替えることによって画面のタブ表示を変更していきます。

<li class="tab japanese active-tab">国語</li>
<div class="content japanese show">国語の授業内容</div>

 

CSSでは、上記で説明したクラス（active-tab、show）によって表示非表示を設定します。

  /* 授業内容は、デフォルト非表示 */
  .content{
    display:none;
  }
  /* is-showクラスが追加された場合表示 */
  .content.show{
    display:block;
  }


またタブを横に並べるほうがそれっぽいので、CSSでdisplay=flexを記載して、タブを横に並べます。

そのほか細かいデザイン設定は行っていますが、今回は説明を割愛します。

 

続いて、JavaScript

全部のタブ（class=tabを持つ）に、addEventListenerメソッドでClickイベントを付与します。

またgetElementsByClassNameで引数("tab")を持つ要素群が複数取得することができるので、この要素群をfor文を用いて要素の数だけループ処理を行います。

// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', changeTab, false);
}

forで取り出した要素に対して、addEventListenerでClickイベントを付与し、第二引数にタブがクリックされた時に呼び出されるchangeTab関数を入れます。
addEventListenerについてより深く知りたい方は、

こちらのサイトをご覧ください。⇓

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

続いて、addEventListenerの第二引数に入れたchangeTab関数について、このchangeTab関数はタブのクリックイベント発火時に呼び出される関数として作成していきます。

// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){

この関数で、行いたいことはクラスの追加と削除です。

classListに対してadd()、remove()関数を呼び出すことでクラスの追加、削除を行うことができます。

thisは、クリックされた要素（タブ）のみを指してます。

    // タブのclassを変更
    // active-tabクラスによって選択されているかを判別しているため、
　　// タブクリック時に一度すべての選択を解除するためクラス削除
    document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
    // thisでクリックされた要素のみを指定することができる
    // addでクリックされたタブにactive-tabを追加
    this.classList.add('active-tab');

 

CSSのみでタブ切替をしてみる

続いて、CSSのみでタブ切替を行いますが、少し記事が長くなってきたため、次回の記事にCSSのみでの切替を紹介したいと思います。

 

後程リンクも記載しますので、ぜひご覧ください！

 

以上ご視聴ありがとうございました！

 


 

【仕事を辞めたい】新卒３年未満で転職するメリット・デメリットを紹介

転職

f:id:hamatakeBlog:20211109214142p:plain


「入社したばかりだけど会社を辞めたい・・・」

そう思いながらも「転職先が見つからなかったらどうしよう・・・」「親や友達はどう思うだろう・・・」といった悩みを抱えている方も多いと思います。

私も数年前までそう考えていた人のひとりでした。

しかし、入社３年目未満の転職は悪いことばかりでもありません。

３年も待っているとせっかくのチャンスを逃すこともあります！

この記事では、新卒２年目で転職し残業時間を１０分の１に減らすことに成功した私の経験と周りからの情報を元に早期転職のメリット・デメリットを紹介します。

転職に前向きな事ばかり伝えるインフルエンサーもいれば、後ろ向きな事ばかり伝える家族や同僚もいます。

メリット・デメリットをしっかりと理解し、自分で判断しましょう！

 

 

新卒３年未満で転職するメリット

まず、メリットについてみていきましょう。

  • 第二新卒として転職活動が出来る
  • ストレスから解放され、時間を無駄にしない
  • 背負っているモノが少ない

３点が主なメリットとして挙げられます。

①第二新卒として転職活動が出来る

人, 仕事, ミーティング, ビジネスミーティング, 同僚, 合意, 男性

これが新卒３年未満の転職において一番のメリットになります。

第二新卒とは、明確な定義はありませんが、１度社会に出た、新卒３年未満の求職者を指すことが一般的です。

採用する側の企業としては

・短期間でも社会に出た経験がある

・年齢的に将来性を見込める

等の理由から積極的に採用を行っております。

また、第二新卒者は、失敗を経て就職活動を行うことで慎重になり、企業側としても入社後のミスマッチを防ぐことが出来ます。

本当に第二新卒は需要があるの？と不安になっている方も多いと思いますが、実際に求人情報を見ると「第二新卒歓迎」といった文言はよく見ます。

大手転職サイトも求人の83%に記載があるとの調査結果を出しています。

更に、新卒３年未満の退職者のみの市場なので大学卒業時の就職活動と比べて競争率が低くなります。

３年しかない第二新卒のチャンスを存分に活用しましょう！

②ストレスから解放され、時間を無駄にしない

自由, 空, 手, 手錠, 雲, 男, 泥棒, Hiv, エイズ, 解放, 望み

「嫌だな」「辞めたいな」と感じながら毎日無理して働くことは心身ともに大きな負担をかける事になります。最悪の場合、病気になり働きたくても働けない事にもなり得ます。そうなる前に脱出することは１０年後、振り返った時に大きなプラスになっていることでしょう。

また、そういった心理状態で低いモチベーションのまま働いても、自分自身の成長や実績を作ることができず、時間の無駄になってしまうかもしれません。

何も考えずに勢いで辞めてしまうのはよくありませんが、辞める事で次のステップへ元気な身体で早く進めるメリットもあります。

③背負っているモノが少ない

トラベル, スーツケース, 空港, 荷物, 旅, 旅行, 旅行者, パスポート

一般的に年齢を重ねるほど背負うモノは増えていきます。

家族、親の介護、家や車のローン、世間体など　たくさんのモノを背負います。

しかし、新卒３年未満の退職を考えているほとんどの人は背負っているモノが少ないのではないでしょうか。

今はむしろ困ったら支えてもらえる立場にいると思います。

そんな今が転職に踏み出しやすいタイミングです！

 

 

新卒３年未満で転職するデメリット

続いて、デメリットになります。転職したい気持ちが先行するとメリットに目がいきがちですが、デメリットもしっかりと理解しましょう。

  • 一時的に多忙になる
  • 新卒のような充実した研修が受けられない
  • 同期がいない

３点になります。

①一時的に多忙になる

電話, 仕事, 人, ライフスタイル, 男性, 男, モバイル, テクノロジー

基本的に仕事を辞めてからの転職活動は推奨しておりません。

転職活動期間中は、通常の業務に加え、業務時間外に転職活動を行うことになります。

業務後や休みの日を使って企業の選定や選考の準備等を行うことになるので一時的に多忙になります。

安心してください。私は残業100時間を超えながら転職活動を行いましたので、そのくらいまでは可能です。。。

長期戦でゆっくり少しずつスタートするのもOKです。

転職を決意した方は、数か月後の明るい未来の為に頑張りましょう！

②新卒のような充実した研修が受けられない

先生, 教員, 工教育, 教育, ホワイトボード, 教室, スマートボード

第二新卒とはいえ、中途入社になりますので、新卒時代に受けた、ビジネスマナーの基礎や業界についてのような丁寧な研修は準備されていないことがほとんどです。

１年未満で退職された方はビジネスマナーから異業種に転職された方は業界についての概要だけでも学んでおくと良いでしょう。

今は大体の業界がYouTube等でも学ぶことが出来るので見ておきましょう。

また、面接の逆質問で入社までの準備を聞き、実践するのも良いでしょう。

③同期がいない

日没, 男性, シルエット, 助ける, 救いの手, 冒険, 身長, クライミング, 山, ピーク, サミット

中途採用になるので同期という存在がなくなります。

同じ年齢の人が先輩になるなど社内で自分と全く同じ立ち位置の人がいません。

同期は愚痴を言いあったり、支えあったり何かと仕事を充実させる為には大切な存在です。

そんな同期がいなくなることの覚悟は必要です。

 

 

まとめ

山, カナダ, 女の子, Outlook, 雪, 自然, 山の風景, ハイキング, ハッピー, 幅, 風景

３年目未満転職におけるメリットとデメリットいかがだったでしょうか。

「今すぐ転職した方がいい」「３年は我慢する」「そのまま勤め上げる」様々な価値観があるでしょう。

大切なのはメリット・デメリットを理解し自らの意見で行動する事です。

 

まだ、会社を辞めるべきか悩んでいる方がいたら、ぜひ下記の記事も読んで見て下さい！

きっと答えが見つかると思います！

 

転職には確かにリスクがあります。

しかし、しっかりと戦略を立てて行うことで数か月後には明るい未来が待っています。

ぜひ、一緒に頑張りましょう！

【早期離職】新卒３年目以下退職は甘え⁉退職を迷っている人へ10のチェック項目

転職

f:id:hamatakeBlog:20211106171559p:plain


「すぐ辞める若手は根性なし」「石の上にも３年」「若者には根性が足りない」

こんな言葉、糞食らえ！と思いながらも確かになぁ。。。と感じているそこのあなた。

そんなあなたへ、今あなたが感じている「仕事を辞めたい」「退職したい」が甘えなのか、仕方のないことなのかの判断材料として10個のチェック項目を記載しています。

新卒２年目で残業時間を１０分の１に減らす転職に成功した私の経験や周りの情報を元に項目を作成しております。ぜひ参考にしてください！

チェックリスト, リスト, 小切手, マーク, 仕事, アンケート, 調査

 

転職甘えチェック項目（10選）

チェック①　早く寝なきゃ！と思いながらもついつい夜更かししてしまう

瞬, 睡眠, スヌーズ, 眠り, ワーカー, 仕事, シエスタ, 昼寝, 疲れた

睡眠不足は集中力の低下やイライラしやすくなるなど心にも負担をかけてしまうことはご存じの方も多いと思います。

それに加え、ついつい夜更かしをしてしまう現象は安らげる自由な時間がないことで精神的に満足していないことが原因とも言われています。

寝ないといけないと思いながらもついつい夜更かしをしてしまうのはこんな生活は嫌だ！と心が悲鳴を上げている可能性があります。

 

チェック②　今までの趣味や新しいことに興味がわかなくなった

本, 退屈, カレッジ, 教育, 女性, 女の子, 学び, 人, 学校, 学生

社会人になり忙しくて趣味の時間が取れなくなった方は多いでしょう。

しかし、たまの休日など時間ができた時に「今まで楽しめていたはずのものが楽しめない」「趣味だと思っていた事へ、取り組むのに面倒臭さや苦痛を感じる」それはもしかしたら心が疲れているサインかもしれません。

本来、気分転換やストレス発散になっていたことが億劫になったら注意が必要です。

 

チェック③　将来、上司のようになりたいと思えない

仕事, オフィス, チーム, インターネット, ビジネス, 技術, デザイン

上司の働き方は、今の会社に勤め続けた時のあなたの将来的な働き方です。

バリバリ働いて高給取りな上司、緩めに働いて薄給の上司、またはバリバリ働いて薄給の上司もいるでしょう。会社によって様々な働き方があると思います。

あなたの価値観と相違はないか今一度確認しましょう。

 

チェック④　ここ６か月で社会人として成長したと感じる事が一つもない

チームワーク, 協力, ブレーンストーミング, 仕事, ファイナンス, オフィス

新卒３年目以下の段階で成長を感じられていないのは重症です。

業務面の成長だけでなく、行動・口調・思考など全てが劇的に成長するのが社会人３年以内です。周りの同世代たちはたくさん挑戦し、どんどん成長をしています。

まだ遅くはありません。少しでも挑戦できる環境へ身を置くことをおススメします。

 

チェック⑤　最近プライベートでの友達と会っていない

飲み会, 肉, 三枚肉, 焼酎, 会, 飲み会, 飲み会, 飲み会, 飲み会

チェック②の趣味と同様に腰が重くなっている人は心の疲れを警戒しましょう。

また、仕事と全く関係ない人と会うことで仕事と距離を置くことができ、心のガス抜きが出来ます。上手くガスを抜ける人は精神が安定します。

 

チェック⑥　前より笑うことが減ったと感じる

女, 若者, モデル, ポーズ, 見る, 待つ, 悲しみ, 分離, ミス

心の疲れの特徴的なサインとして「無表情になりやすい」「表情が暗くなる」といった事が挙げられます。笑うことが減った、世界がつまらなく感じるなどの場合はサインが顕著に出始めているため警戒が必要です。

 

チェック⑦　仕事に給料が見合っていないと感じる

お金, コイン, 投資, 仕事, ファイナンス, 銀行, 通貨, ローン, 現金, モーゲージ, 富, 価値

この項目は主観でなく、同業や同世代の人の話を聞いて客観的に判断してください。

客観的に判断しても少ない場合は転職で改善される可能性が高いです。

 

チェック⑧　シャワーを浴びずに仕事に行くことがある

男, 滝, 入浴, 落ちる, 強い, 水, 黒人, 下の雨, 雨

心の病気が症状に表れている可能性があります。元々シャワーを毎日浴びない人は問題ありません。社会人になってシャワーを浴びるのが面倒になり浴びない日が増えた人はこの項目だけで退職を考えた方が良いかもしれません。

 

チェック⑨　同期の４割以上が退職している

Youtuber, ブロガー, 脚本, やけくその, 想像を絶する

新卒３年目以下の退職率は平均約３割になります。この平均を超える４割以上が退職している場合、あなたではなく会社や労働環境に問題があることが考えられます。

 

チェック⑩　社内に仲良くなりたい人と思える人が一人もいない

女性, 仕事, オフィス, ホワイトボード, ミーティング, 女の子, 従業員, 計画, 笑顔, ハッピー

現状、仲のいい関係を築けているのであれば問題ありません。また、上司に該当する人がいるかも考えて見て下さい。

仲良くなりたい＝自分に似ている人である場合が多いことから、上司にあなたの考え方と似ている人が多いと意見も通りやすく出世もしやすいでしょう。

しかし、全くいない場合は意見の通り辛い場所で価値観の違う人たちと生活を送ることになる可能性が高くなります。

 

最後に

チェックリスト, チェック, 考える, 調べる, 診断, 疑問, 悩む, 確認

あなたはいくつ当てはまりましたか？

３つ以上当てはまる人は手遅れになる前に転職活動を行う事ををおススメします。

仮に５つ以上当てはまっている人は業務洗脳が始まっているかもしれません。

在職したまま転職活動を行うだけであれば何のデメリットもありません。他世界の情報にも触れて業務洗脳から身を守りましょう。

あなたが理想とする、給料・人間関係・働き方と出会えるかもしれません。

 

「新卒３年目以下退職は甘え」とよく言われますが会社や上司の都合でそう言われている側面もあります。

私は辛い・意味のない環境で「転職に踏み出さない事こそ甘え」だと思っています。

転職は確かにリスクがあることですがこのブログで学びしっかりと戦略を立てて行うことで現在を大きく変える事が出来ます。

ぜひ共に取り組みましょう！

JavaScriptの基本：条件分岐を学ぶ

プログラミング

f:id:hamatakeBlog:20211104003243p:plain

おはようございます、hamatakeBlogです！

 

突然ですが！！あなたは、20歳以上ですか？って確認されるときってありますよね？

20歳以上であれば、酒類を販売できます。それ以外の場合（20歳未満）、酒類を販売できません。

みたいな○○は△△の場合っといった処理を条件分岐といいます。

ってことで！！

今回はプログラミングにおいて必須の分岐について紹介していきます！！！

 

分岐？

画像説明（ブログ内には見えないがSEO的意味がある）

分岐ってどういうこと？

ハム吉よ、分岐ってのはな

もしハム吉（変数）がハムスター（条件を満たす）である場合、ヒマワリの種をあげる（Aの処理を行う）。それ以外の場合、ヒマワリの種をあげない（Bの処理を行う）。

ってことなんだよ。

画像説明（ブログ内には見えないがSEO的意味がある）

なるほどな！ようするに真偽を問う処理ってことだな！

そう！早い話そういうことや！！

ハム公賢いな！

ってことで、今回は条件分岐について紹介します！！！

if文の基本

let num = 1;

if( num === 1){

  console.log("ナンバーは1です！")

}else{

  console.log("ナンバーは1以外です！")

}

 

もし○○が△△かどうかを比較するには、if()を使います。

さらに詳しく説明すると（）のなかみが重要で、この中の条件がtrue（正しい）であれば{}の中身の処理を実行、それ以外であればelse{}の中身を実行します。

 

上記の処理では、変数numの値が1と等しい場合、コンソールログに”ナンバーは1です！"を出力し、それ以外の場合"ナンバーは1以外です！"を出力します。