とまとの成長日記

ぴよぴよエンジニアの日々学んだとこを投稿。時々、ゆるーくすきなもの・趣味について語ってます。

Javascript 超超超基礎 中編

昨日はさぼりましたああああああ
さーせん。どうしても気分が乗らなかったのでお休みしました。
気を取り直して、タイトル通りJavascript 中編でございます!
本当に基礎ですが、重要だと思うのでめげずにやる!!
誤りがありましたら、ご指摘、ご指導お願いいたします!!

理論演算子

より複雑な条件を表す時に必要なもの


&& なおかつ(AND)
例えば、「テストの点数が50点以上なおかつ名前がとまと」を表現したい場合は下のようになります。
ANDは両方条件を満たしていないと true にならないです!

score >= 50 && name === 'とまと'

|| もしくは(OR)
例えば、「テストの点数が50以上もしくは20歳以上」を表現したい場合は下のようになります。
ORはどちらか条件を満たしていれば true になります!

score >=50 || age >= 20

! 〜ではない(NOT)
例えば、「20歳以上ではない」を表現したい場合は下のようになります。

!(age >= 20)

個人的にめっちゃ混乱したので詳しく書いておくと

const age = 10
const tomato;

tomato = !(age >=20);

これは、まず先に()の中を評価するので10は20よりも小さいので()の中がfalseになる!
その後、!がついているので否定になりtrueとなる!

switchで条件分岐

まずはルールをみましょう!

switch( 式 ){
  case  値 : 
         処理
  break;

      case  値 : 
         処理
  break;
}

では例に当てはめます。
くじ引きで赤が出たら、やったね!、青がでたら、残念でした!というのを表示する場合

const kuji = red

switch( kuji ){
  case  ' red ':
          console.log('やったね!)
          break;

  case ' blue ':
           console.log('残念でした!')
           break;
}

この場合、const kuji = redなのでやったね!がでます。
イメージついたでしょうか??


ループ処理

1.for
例題:tomatoと10回繰り返すのと数字を1ずつ足していきます。

for (let i = 1; i <= 10; i++) {
  console.log(i + 'tomato');
}

何やってるか具体的にみていくと
let i = 1; → let i に1を入れて
i <= 10; i++ → i に1ずつ足していく。
コンソールで出力。
ざっくりとですがこんな感じです!



2.while
例題:tomatoが100個あるとして、10個ずつ減っていくとします。

let tomato = 100;
while( tomato > 0 ){
  console.log(tomato + 'tomato')
  tomato -=10;
}

具体的にみていくと
tomato > 0 → tomatoが0より小さくなるまで行うという条件になります。
tomato -=10; → tomatoが10ずつ減る。
console.log(tomato + 'tomato') → tomatoが減っていくのと、tomatoをコンソールで出力

for と while の違いは、繰り返しの回数が決まっているかどうかの差になる!

for → 回数決まっている
while → 回数決まってない

continue と break

continne
ループする時に特定の処理だけスキップしたい。
for、while 両方使える

例題:tomatoと10回繰り返すのと数字を1ずつ足していく途中3だけ飛ばしたいとき

for (let i = 1; i <= 10; i++) {
 if ( i % 3 === 0 ){
      continue;
    }
  console.log(i + 'tomato');
}

if ( i % 3 === 0) → 10を3で割ったときのあまりが0になるの書いています!これはよく使うテクニックらしいです。
continue; → ifの中に示した条件をスキップする
こんな感じです!


break
ループする時に途中で処理を終わらせたい
for、while 両方使える

例題:tomatoと10回繰り返すのと数字を1ずつ足していく途中4で終わらせたい

for (let i = 1; i <= 10; i++) {
 if ( i  === 4 ){
      break;
    }
  console.log(i + 'tomato');
}

if ( i === 4) → i が4のとき
break; → 終了

どっちも意外と簡単そうです!
今回はここまで!
うーん、わかったような、わかってないような・・・
実際に使ってコードを書かないと身につかない気がするので、実際に使って覚えていきたいです!

感想

Javascriptを体系的に学んだことがなかったのでまとめるのにすっごい苦戦中😇😇😇
明日も引き続き勉強だー✏️
3連休もたのしむぞー🤩🤩
ブログの更新もがんばります💪

驚き!WEB系 or エンジニアの文化!!

WEB系の会社で働き始めてはや2ヶ月。今まで全く関係のない職種だったのでいろんなことに驚かされました🙄🙄🙄
また、エンジニアならではの文化についてもたくさん学びがあったのでこれからWEB系に入りたいよって方の参考になれば嬉しいです😆✨
また、個人の独断と偏見と私の会社の社風とかも入ってくるので一概にいえないのでその点ご了承ください!

豊富なツール🛠

ツールと言われてもよくわからないと思うので具体的に書いていくと

Slack → コミュニケーションツール
G Suite → 資料・スケジュール共有ツール(https://gsuite.google.co.jp/intl/ja/features/)
esa.io → 社内ルールなどの情報共有ツール(https://esa.io/)


などなど…

入社していろいろ設定しながらへーこうやって使うんだー!って感動した記憶があります😂
最初は驚きましたが、便利なもんだと思います!
前の会社は、何をするにもメールで、意味がわからなくなっていたので😇

機能拡張大好き🤩

例えば、Slackに勤怠の機能(おはようとお疲れ様ですで出退勤管理ができます!)をつけたり、Gitを連動させたり、Googleのカレンダーを連動させたり…
ほかにも各会社で色が出るかと思いますが、いろいろできます!
あとは、Google Chrome拡張機能がみんなたくさんついている!
拡張機能について詳しくはここをみていただけるとどういうのをみんな使っているかわかると思います!
【2019年版】これは便利!おすすめのChrome拡張機能32選

カタカナの言葉で溢れてる👀

当たり前かもしれませんが、なんでもかんでもカタカナで略称が多いので戸惑うことばかりでした!
テレカン(テレビ会議)すら知らなかったので毎日必死でググってました😂
いまだにわからない単語出てくるので日々勉強です!!グーグル先生には感謝感謝🙏

服装・髪型が自由💄👖👠

基本的に社内で作業をしているのでみんな服装が本当に自由です!
私もデニムにTシャツのラフな感じで出社しています!最近はサンダルです😂😂
髪色も金髪の人もいれば、私はアッシュグレーです💗
おもいっきり好きな髪色できて幸せ〜😊
ネイルもなんでもおっけーです💅
ファッションを自由に楽しみたい人はエンジニアはありな選択だと思います!!

意外と飲み会好き🍻

個人的にエンジニアの人は仕事が終わったらさっと帰宅するイメージだったのですが、結構仕事後飲み会に行きますww
これはうちの会社の文化なのかもしれませんが、飲みニケーションを意外とします!意外と!笑
私は飲みの場が好きなのでうれしいです😋
ただ、飲み過ぎ注意ですね⚡️⚡️
日本酒は本当にコワイ…

完全に理解した。

これTwitterとかでよく見ると思います。なんのことか意味がわからなかったですが、これを読めばすぐ意味がわかります!
私はまだ積極的に使っていけてないです…笑
エンジニアの言う「完全に理解した」「なにもわからない」「チョットデキル」って本当はこういう意味?「わかる」の声多数 - Togetter


イベントがたくさんある✏️

エンジニアは常に新しい技術が出てくるのをどんどん吸収しないといけないです。そのため、社内勉強会、技術勉強会のイベントや、技術のカンファレンス(会議)などが各地で行われています!海外のその技術で有名な方とかが登壇されてたりして、感動します!来年私もRubykaigi参加したい!!!
ちなみに今年のRubykaigiは福岡で行われました!YouTubeなどに様子が上がっているのでぜひみていただければ様子がわかると思います!
とにかくみんな技術の勉強を惜しまないです!
できる人ほど就業時間以外でやっています。
うちの会社だと会社全体の報告会でだれがテーマに沿ったコードでイケてるか選手権とかやってます😂
私はまだ参加したことないですが、次あるならポンコツ具合を発揮するために参加してみようと思いますwww

みんなやさしい!!!!!

これはたまたま私の周りの人がそういう人ばかりなのかもしれませんが、みんな親切丁寧に教えていただけます!!!
こんなぽんこつなブログにでもアドバイスいただけたり、修正箇所を教えていただけたり、たくさんの便利なツールを教えていただけたり、本当に教えてもらってばかりで申し訳なくなるくらいやさしいです!!!!
優秀な人ほど優しい気もします。気のせいかもしれませんが!笑
私が返せるのはひたすら勉強して少しでもコードを書けるようになることだと思っているので日々精進いたします。

SNSなどをフル活用!

WEB系エンジニアの人は大体Twitterをやっています!!
これはまじでほぼみんなやっていると思います!!
いろんなことをつぶやいてたり、エンジニアの意外な一面が見れておもしろいです👀
他にも、Qiita、はてなブログ、note、Podcast、Slackのグループ、などなど色んな所でエンジニアは情報発信しています!
みなさんも馴染みがあると思いますが、これらを活用するのはすごく大事だと思います✨

働き方の自由度

すべての会社がそうではないですが、リモートワークやフレックス制、時短勤務などなど他の会社に比べると自由度はかなり高いと思います!!でも私は会社に行くのが好きなので会社に行ってます😂😂



長くなりましたが、こんな感じ終わります✨
私はほんと人に恵まれたのですっごく楽しく働いてます!
まー、前いた業界がブラックすぎたのもあるのでそのへんもゆくゆく話していければと思います!
今日は感想は省きます!

Javascript 超超超基礎 前編

昨日も話していたとおり今日は Javascript についてめちゃくちゃ基礎のところをいつも通りざっくりと説明していきます!
間違っている点がありましたらご指摘お願いいたします!!!
ほんと指摘されると勉強になるので感謝です!!!!
※ご指摘いただき追記しています(7月10日)

Javascriptってなに?

webサイトに動きをつけてくれるもの。
いろんなフレームワークがやライブラリがあるのが特徴です。
最近話題のVue.js、React.js、jQueryなどなどいろいろあります!
実はなんでも作れちゃうすぐれものなんです!

追記
Javascriptはおまけですよ!みたいな書き方をしてしまったのですが、現在、UI・UXの観点からJavascriptなしではwebサービスは作れなくなってきております。もっと詳しく言うと、今あるwebサービスはユーザーにとってよりよいアプリを作るためにSPA(シングルページアプリケーション)という設計構造を目指して作られています。詳しくはリンクをみていただければと思います!

SPA(Single Page Application)ってなに?


基本文法についてざざっと書いていきます!

まず最初に…

'use strict';を書くと厳密なエラーチェックをしてくれる

文字列の扱い

1.基本的に ' '(シングルコーテーション) , " " (ダブルコーテーション)で表現できるのですが
どちらかで統一してたほうがきれいです!
ただし、It's とかというのを表現するときは " It's "という感じでダブルコーテーションで囲ってあげたり
' It\'s ' 特殊文字だよの印の \ バックスラッシュを使うこともあるそうです!

バックスラッシュは他にも使い方があり
\n 改行 \t タブ

などの意味があります 

定数と変数

定数 const OO = □□
定数 OOに入れたものは宣言以降のところで□□になります。
気をつけないといけないのは定数は値の再代入ができないです!
そこが変数との差になります

変数 let OO = △△
値を再代入ができる!
※letの代わりにvarも使えるそうなんですが、あまりいい書き方じゃないそうです!
なんか古い?とかなんとか…
定数と変数の使い分けは基本的には定数を使い、どうしても変更する必要のある値が出てきた場合に変数をつかうそうです!

追記
IE11(Internet Explorer)ではletとconstに対応していないかもということでしたが対応しているそうです!ただ、ほかのES6で追加された書き方には対応していなのでトランスコンパイラ(変換してブラウザで読み込めるようにすること)する必要があるそうです!

データ型について

f:id:toomeeto:20190709194412p:plain

他にもオブジェクトというのがあるのですが意味わかってないので、理解できたら追記します!

If構文

パターン1
if (条件式) {
 trueの処理
} else {
 falseの処理 }

パターン2
if (条件式A) {
 Aがtrueのときの処理
} else if {
 Bがtrueだったときの処理
} else {
 それ以外の処理 }

例えば・・・・

if (score >= 80) {
  console.log('Great!');
} else if (score >= 60) {
  console.log('Good');
} else {
  console.log('OK');
}

この場合、
80点以上 → Greate!
60点以上 → Good
それ以外 → OK

※省略して書く方法もある!!
条件式 ? trueの処理 : falseの処理
→条件演算子という


今日はここまで!
めっっっっっっっちゃ初歩的な内容です。
次はもう少しレベルアップした内容を触れられたらと思います!!

感想

なんとなくググりながらでしか書いてなかったJavascriptを体系的に学ぼうとするとすごく難しいいいいいいい
いや、今は何やっても難しいの忘れてた😂😂
プログラミングって同時にいろんな分野を勉強しないと行けないのですっごい大変。
でも、その分できたときの喜びと、達成感は素晴らしいものがある😆✨
折れない心を武器に戦うぞー!!!

マイグレーションについて

今日は、Rails でよくでてくるマイグレーションについて説明していきます!
毎度のことですが、間違っているところご指摘いただけると嬉しいです。

ご指摘頂いたので修正・追記してます!(2019/07/09)

マイグレーションとは。。。

Active Recordの機能の1つであり、データベーススキーマを長期にわたって安定して発展・増築し続けることができるようにするための仕組みです。(Rilsガイドより)

はい、このポンコツ人間、何が何なのかわけわからないのでもっと身近なところで考えていきたいと思います。

まず、マイグレーションするときというのは、大体モデル設計に関わるところでよく使います。
モデルを作ったり、カラムを追加したりするときに使います。

つまり、モデル設計を変更する時に使うものと思っています!

ざっくり!😂

マイグレーションの使い方

1.データベースの構造を変更するコードをRubyでかいた、マイグレーションファイルを作成する
2.作成したマイグレーションファイルを rails db:migtate コマンドを使ってデータベースに反映する

これだけです!!意外と簡単!!

気をつけないといけないのは、マイグレーションファイルを作っただけでは、データベースに反映されていません!
rails db:migrate をするとデータベースに反映されます!

また、マイグレーションを取り消すときも、マイグレーション取り消しコマンド rails db:rollback をしたあとに、削除したいマイグレーションファイルを消しましょう!
必ずロールバックが必要な理由は、そのマイグレーションファイルを基準に取り消し処理を行うので、そのマイグレーションファイルがないとrailsが混乱してしまうので気をつけましょう!

なんでこのマイグレーションが大事なのかというと
バージョン管理ファイル管理ができるからです!

バージョン管理ファイル管理の便利な点は、何らかの理由でバージョンを戻さなきゃいけない時に簡単に戻すことができます。
また、開発に携わっている人が複数いた際に、もし、同時にマイグレーションファイルを作成してしまっても、必要な部分だけデータベースに反映させることができます!
その他にも、いくつかのマイグレーションファイルを作って、設計の問題で3つのマイグレーションファイルのうち、1つだけデータベースに反映させることができます。

バージョン管理ファイル管理は、やってて損はないですね!

追記:マイグレーションの取り消しはむやみやたらやるものではありません!困った時に使う程度にしておきましょう!


はい、こんな感じでざっくりですが、終わります!

参考
railsguides.jp

感想

あああああああああ。大反省。1日サボりましたあああああああああああ。
javascriptについて書きたかったのですが、難しくてうまくまとめきれませんでした。
明日には出せるようまとめたいです!!

database.ymlってなーにー?

最近前に、rails new してできるファイルについて説明しました。
これからそれぞれのファイルについて取り上げて行きたいと思います!!
今回は第一回 database.yml について取り上げていきます。

database.ymlとは…

config のディレクトリにあるファイル。
データベースと接続するための設定ファイル。
YAMLという形式で書かれている。

database.yml の中では、development , test , production という3種類の環境用に、それぞのデータベースの接続に必要な設定が記述されています。

中に書かれている内容を項目に分けて見ていきます!

adapter
使用するデータベースの種類。
アダプタには各データベースに対応するsqlite3, postgresql, mysql2, oracle_enhanced などがあります。

encoding
文字コード

pool
コネクション数の上限。

database
データベース名

username
データベースに接続するユーザー名

password
データベースに接続するユーザーのパスワード

host
データベースが動作しているホスト名またはIPアドレス


1点注意があって、このファイルはそれぞれの開発環境のパスワードとユーザー名が書かれている場合、
このファイルを git でバージョン管理をしてしまうとパスワードとユーザー名が全部わかってしまうので、セキュリティ上よくないです!
なので、直接はバージョン管理をせず、database.yml.example等の名称でバージョン管理をしましょう!



今日は、さっぱりしていますがこんな感じで。笑
なんとなーくわかったようなわかってないような。。。笑
現場Railsめっちゃ参考にしたんですが、なんか実践でそこまでまだ触ってないので、あまりイメージが湧いてないです。。。
また、なにかわかったらどんどん追記していきます!

参考書籍
現場で使える Ruby on Rails 5速習実践ガイド
https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227


感想

はい、今日も完全手抜きになってしまったあああああ😱
それよりも昨日の記事の内容のミスが多すぎて修正と理解に結構時間かかりました…
ほんとちょっとずつしか成長しなさすぎて焦ります…
でも、2ヶ月前の自分よりは成長してる!って思えるときもあるから、焦っても仕方ないし、こつこつ、チリツモ作戦!!
今日は勉強もして✏️、友達と飲んで🍺、家帰って👣、ブログ書いて💻、
友達お泊りだから語って、寝る😪💤
明日も一緒に勉強だ😆💗