2019-12-28

【未経験】文系出身のあなたへ【エンジニア転職】

私文系出身なんで…

エンジニアへ転職したいが自信がない。その理由としてたまに挙げられるのが、

「私は文系出身なんで、エンジニアには向いてないのでは。。。」

という話。
私もそう言ったことを言う人にたまに会うが、この話を聞くたびにいつもモヤモヤする。

今日はそのモヤモヤを吐き出します。

そもそも文系・理系とは何か

私の考えは「文系」・「理系」とは考え方の１つであってそれぞれ以下のようなものだと思っている。

文系・・・結果から原因を考える考え方
理系・・・原因から結果を考える考え方

実際の科目から考えてみよう。

歴史、古典なんかは、過去の事件、作品（結果）からその背景（原因）を考察するし、

物理学、数学なんかはいくつかの法則、定理（原因）から議論を発展させて、結果を考察する。

もちろん細かく見れば例外は含まれるが、多くのことは、これで説明がつくと思う。

エンジニアの仕事は理系か？

そうした場合、

「だったらエンジニアの仕事は理系なんだから理系出身の方が有利じゃないか！」

という声が聞こえてきそう。

だが本当にそうだろうか？

私の思うところでは
システムエンジニアという職業は

「理系的でも文系的でもある。」

と思っている。もっというと

「理系的な考え方も、文系的な考え方もどちらも必要である。」

と言いたい。

理系の仕事？文系の仕事？

というか、これはシステムエンジニアに限らず、世の中の仕事のほとんどに言えることだ。

例えば、営業の場合
理屈は一旦置いといて、沢山行動を起こしその結果から原因を考える文系的なアプローチも、

１つの原則から、論理的に考えを広げていって、次の行動を決めていく、理系的なアプローチも、どちらも大切だし、どちらかだけできてもいい仕事はできないはずだ。

エンジニアの場合、とにかく沢山コードを書いて、そこから理解を深めることで可読性の高く無駄のない「良いプログラミング」ができるようになることも、

「こんな書き方をすると可読性があがる」という原理を押さえてから、コードを書くことで「良いプログラミング」ができるようになることもある。

ここで言いたいのは、エンジニアに限らずどんな仕事にも、理系的なアプローチも文系的なアプローチもどちらも必要で、理系にしか務まらない仕事は実際は少ないってこと。

その気持ちは分かるが、聞いてる側からすると…

私は上記のような考えをしているので、
「私文系なんで...」
と言う枕詞を聞いた段階でモヤモヤしてしまう。

本人に自覚はないかもしれないが、
「文系出身」という事実を言い訳にしているようにしか聞こえなくなってしまう。

大事なことは自覚すること

「文系出身なんで…」って言ってる時点でおそらくあなたは文系的な考え方をする人だ。

「自分は文系出身である」という結果から考えを広げている。

文系出身だけど理系的な考えの人は、「文系出身だから~~」ということは言わないような気がする。（多分）

ただ、そのあなたの文系的な考えは仕事をする上で必要なモノだから、それを無理に変える必要はないし、文系的な考えだからうまくいくこともあるはず。

大事なのは自分が理系・文系どっちの考え方が得意なのかを自覚して行動し、足りない部分を他の人に補ってもらうこと。

あなたが文系的な考えならば、文系的な考え方のまま、エンジニアへなればいい。実際そうしている人はたくさんいる。

私なんかは出身は理系の工学部だが、きっと文系的なモノの考え方をするタイプだ。数学の授業でも細かい論理の話になるとよく眠くなって居眠りをしていたし。

まあだからと言ってエンジニアが務まらないかというとそうでもないし、それでもやってこうと思ってる。

最後に

エンジニアになるかどうかで迷ってるならとりあえず簡単なコードでもいいから書いてみればいいと思う。
面接するかどうかで迷ってるなら行ってみればいいと思う。

多分深く考えても答えらしい答えは出てこないから。

やってみてその後考えてみればいいんじゃないだろうか。

私はそう思います。

2019-12-20

【Vue + Vuetify】選択した画像ファイルをブラウザにプレビュー表示させる

やりたいこと

入力フォームで画像を選択し、それをブラウザに表示させたい。
使用するフレームワークはVue + Vuetify。

やること

やることは以下の３つ

inputタグとimgタグを配置する
inputタグにファイルを読み込む関数を紐付ける
ファイルを読み込む処理を実装する

実装

inputタグとimgタグを配置する

vuetifyで提供されている入力フォーム <v-file-input />タグと、取り込んだ画像を表示させるためのimgタグを配置します。

<template>
  <div>
    <div>
      <!-- 読み込んだ画像をここに表示させる。'iconImage'に画像のURLを代入して表示させる。 -->
      <img :src='iconImage' />
    </div>
    <!-- inputタグの配置 -->
    <v-file-input></v-file-input>
  </div>
</template>

<script>
// デフォルトで表示させる画像をimportする。フォルダのパスは任意で変更する。
import iconImage from '~/components/images/user-alt-solid.svg'

export default {
  data () {
    return {
      // 画像のURLを保持するための変数を定義
      iconImage
    }
  }
}
</script>

inputタグにファイルを読み込む関数を紐付ける

次に、changeイベントとファイルを取り込む関数を紐付けます。

ファイルを選択し、それを表示させるまでの流れはこのような形。

v-on:changeでgetFileContent()を呼び出す。
↓
getFileContent()がreadFileAsync() を呼び出す。
↓
readFileAsync()で画像を読み込み表示する。

画像ファイルの読み込みは、非同期で行う為asyncを使用して関数を定義しています。

<template>
  <div>
    <div>
      <img :src='iconImage' />
    </div>
    <!-- v-onで画像を取り込む処理を呼び出す。 -->
    <v-file-input v-on:change="getFileContent"></v-file-input>
  </div>
</template>

<script>
import iconImage from '~/components/images/user-alt-solid.svg'

export default {
  data () {
    return {
      iconImage
    }
  },
  methods: {
    // ファイルを取り込む関数をasyncを用いて定義
    async getFileContent (file) {  

      // ファイルを読み込む関数は同期的に扱うのでawaitを使用して呼び出す。
      await this.readFileAsync(file)
    },

    // ファイルを読み込む関数を定義しておく
    readFileAsync (file) {
    }
  }
}
</script>

ファイルを読み込む処理を実装する

最後に、選択された画像ファイルの情報を読み取り、imgタグのurl属性に値を代入します。

これによって、選択した画像が表示されます。

画像の読み取り関数は、成功時、失敗時で後続に実行する処理を分けたいので、Promiseオブジェクトを使用します。（今回は読み取りが失敗した場合の処理のみを定義します。）

<template>
  <div>
    <div>
      <img :src='iconImage' />
    </div>
    <v-file-input v-on:change="getFileContent" label="Image"></v-file-input>
  </div>
</template>

<script>
import iconImage from '~/components/images/user-alt-solid.svg'

export default {
  data () {
    return {
      iconImage
    }
  },
  methods: {
    async getFileContent (file) {  

      // ".catch( ~~~ )"を付与することで"readFileAsync()"が失敗したときの振る舞いを定義する。
      // 今回は、エラーが発生したらログをコンソールに吐き出す仕様にする。
      await this.readFileAsync(file).catch(error => console.log(error))
    },

    readFileAsync (file) {

      // Promiseオブジェクトに画像を読み込む関数を定義する。
      return new Promise((resolve, reject) => {

        // FileReaderオブジェクトに画像ファイルのurlを取り出し、変数へ格納する処理を定義する。
        const reader = new FileReader()
        reader.onload = (file) => {
          this.iconImage = file.target.result
        }

        // 画像ファイルの読み込みを行う。読み込みが完了した後に、上記でreader.onloadに格納した処理が実行される。
        reader.readAsDataURL(file)
      })
    }
  }
}
</script>

以上で選択した画像ファイルがプレビュー表示出来るようになるかと思います。

まとめ

読み込んだ画像を表示させるステップを３つに分けて説明しました。

解説中に使用したPromise, async/awaitについてはこちらの記事がとても参考になりましたので、まだ非同期関数の使い所がいまいち理解できていないという方は一読することをお勧めします！

sbfl.net

以上となります、最後までご覧いただきありがとうございました！

2019-12-15

【Nuxt.js初心者】Nuxt.jsの主要なフォルダをざっくり解説

解決したいこと

最近Nuxt.js触り始めたけど、フォルダがいっぱいあってどこに何のファイルを格納したらいいか分からない。。。

という状態でありましたが、よく使うフォルダについて役割が分かってきたのでまとめたいと思います。

抑えるべき3つのフォルダ

最初に抑えるべきは、以下の３つです。

layoutsフォルダ
pagesフォルダ
componentsフォルダ

それぞれの役割をNuxt.js + Vuetify.js のデフォルトのアプリケーションを用いて説明します。

フォルダ構成 f:id:nozomi_k:20191215194657p:plain

画面

それぞれの役割

layoutsフォルダ

Webサイトの基本的な画面の構成を決定するdefault.vueを格納するフォルダ。

f:id:nozomi_k:20191215195241p:plain

ヘッダー、フッター、サイドバー等のレイアウトはこのフォルダのdefault.vueを編集することでカスタマイズします。

f:id:nozomi_k:20191215195055p:plain

pagesフォルダ

Webサイトの各ページの内容を記載した.vueファイルを格納するフォルダ。

デフォルトの構成では
トップページとinsprureページの２つが存在し、それぞれindex.vueとinspire.vueを
表示しています。

f:id:nozomi_k:20191215200146p:plain

トップページ f:id:nozomi_k:20191215200543p:plain

inspireページ f:id:nozomi_k:20191215201033p:plain

componentsフォルダ

ボタンやロゴなど、webサイト全体で繰り返し使用されるようなパーツを記載した.vueファイルを格納するフォルダ。

デフォルトの構成では
ロゴを表示させるためのLogo.vueとVuetifyLogo.vueが格納されており、この２つはpagesフォルダ配下のindex.vueに使用されています。繰り返し使うようなボタンなどもこのフォルダに格納すべきかと。

f:id:nozomi_k:20191215201456p:plain

まとめ

どんなモノを作成・編集する時にフォルダを参照すべきか、まとめると以下のようになります。

layoutsフォルダ
→　サイトのヘッダー・フッター・サイドバー
pagesフォルダ
→　各URLのページ
componentsフォルダ
→　サイト全体を通して使用するパーツ

Nuxt.jsの触り始めの段階で今回のことを理解しておけば効率的に作業を進められるかと思います。

最後までご覧いただきありがとうございました。

2019-12-15

Firebaseに静的サイトをデプロイする時やったこと

やること

Nuxt.jsで作成したフロントページをGitHub上にアップし、 CircleCIでソースをFirebaseに自動デプロイする仕組みを構築します。

やることは以下の４つです

Nuxt.jsでアプリケーションを作成
Firebaseにプロジェクトを作成
firebase-toolsのインストール
CircleCIにJobを作成

やったこと

Nuxt.jsでアプリケーションを作成

Nuxt.jsを使用し、アプリケーションを作成します。

www.storyblok.com

上記のリンクの
environment-setup
というセクションを参考に、Nuxt.jsのアプリケーションを作成する。

Firebaseにプロジェクトを作成

Firebase上に、デプロイ先となるプロジェクトを作成します。

firebase-toolsのインストール

こちらの記事を参考にローカルPC上のアプリケーションフォルダにfirebase-toolsをインストールし、デプロイを行います。 qiita.com

上記の記事では、terminal上でFirebaseアプリケーションを新規作成していますが、事前に作成したアプリケーションも選択が可能となっています。

CircleCIにJobを作成

同じく、上記の記事のセクション
CircleCIでプロジェクトをFirebase Hostingへビルド&デプロイする
に従い、CircleCI上にJobを作成します。

ここまでの手順に従えば、任意のブランチにpushすると、自動でFirebaseにデプロイする仕組みを構築が構築できるかと思います。