ひよっこエンジニアの雑多な日記

なんとかWeb系のエンジニアをやっています。

Rails5.2が出たし、このタイミングでActionCableを使う

こんにちは!Rails5.2がリリースされましたね! ということで今回はActionCableを試してみましょう。

…ActiveStorageの間違いじゃないかって?

振り返ってみると個人的にActionCable使った実装ってやったことなかったり、そもそも必要性なくて触ってなかったという方も多いのではないか(直感)ということで、このタイミングであえてActionCableに触れます!

作るもの

今回作るのは簡単なチャットアプリです!
イメージ的にはこんな感じ

f:id:kimuraysp:20180415200842g:plain

複数のブラウザを立ち上げて、一つのブラウザで投稿したらリアルタイムで別のブラウザにも反映されるようなものを作りたいと思います!

ともあれ導入

とりあえずrails newですね!

$ rails new action_cable_sample --skip-turbolinks -d postgresql

turbolinksは邪魔な子になりそうだったので退場してもらいます。
rails newが終わったらrails db:createもやって準備万端にしておきましょう。

チャットに必要になりそうなコントローラーとmodelも作っておきます。

$ rails g controller chat_rooms show
$ rails g model chat_message content:text
$ rails db:migrate

一通りコマンドを実行して役者を揃えておきます。

作ったcontrollerとviewを整えておきます。

# app/controllers/chat_rooms_controller.rb
class ChatRoomsController < ApplicationController
  def show
    @chat_messages = ChatMessage.all
  end
end
<!-- app/views/chat_rooms/show.html.erb -->
<div id="chat">
  <% @chat_messages.each do |chat_message| %>
    <p><%= chat_message.content %></p>
  <% end %>
</div>

今回は試しなのでチャットルームへはルートにアクセスしたら飛べるようにします。

Rails.application.routes.draw do
  root 'chat_rooms#show'
end

channelを作成する

ここからwebsocket通信を行うために必要になるActionCableのファイルを作成していきます。
といってもやることは簡単でコマンドを実行するだけです!

$ rails g channel chat_room speak

すると以下2つのファイルが作成されます。

# app/channels/chat_room_channel.rb
class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak
  end
end
// app/assets/javascripts/channels/chat_room_channel.js
App.chat_room = App.cable.subscriptions.create("ChatRoomChannel", {
  connected: function() {
    // Called when the subscription is ready for use on the server
  },

  disconnected: function() {
    // Called when the subscription has been terminated by the server
  },

  received: function(data) {
    // Called when there's incoming data on the websocket for this channel
  },

  speak: function() {
    return this.perform('speak');
  }
});

次にActionCable用のルーティングを準備します。

# config/routes.rb
mount ActionCable.server => '/cable'

ここまできたらActionCableを使う準備は完了です!

ひとまず動作確認

ActionCableと繋がっているかを確認します。
rails sを立ち上げてhttp://localhost:3000にアクセスします。
アクセスしたらchromeの検証ツールを開いてApp.chat_room.speak()を実行してみます。

f:id:kimuraysp:20180415203327p:plain

app/assets/javascripts/channels/chat_room_channel.jsApp.chat_roomにActionCableのオブジェクトを代入しているのでApp.chat_room.speak()が呼べるようになります!

とはいえまだコード的なものは全然書いていませんが、ActionCableへのつなぎこみはこれで完了です!

まずはリアルタイムでalertをあげてみる

手始めにApp.chat_room.speak('Hello')とコンソールで実行したら起動しているブラウザにalertをあげるようにしていきます。

まずはapp/channels/chat_room_channel.rbを以下のように修正します。
subscribedでどのchannel(今回はchat_room_channelとします)を購読するかを指定します。
speakでは購読しているチャンネルにメッセージを配信するというような記載をします。

# app/channels/chat_room_channel.rb
class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'chat_room_channel'
  end

  # 変更ないので省略

  def speak(data)
    ActionCable.server.broadcast 'chat_room_channel', message: data['message']
  end
end

変更したら次にapp/assets/javascripts/channels/chat_room.jsを以下のように修正します。

// app/assets/javascripts/channels/chat_room.js
App.chat_room = App.cable.subscriptions.create("ChatRoomChannel", {
  // 変更ないので省略

  // 購読側が受け取る内容
  received: function(data) {
    alert(data['message']);
  },

  // App.chat_room.speak(message)で配信する
  speak: function(message) {
    return this.perform('speak', { message: message });
  }
});

speakに引数を追加します。
performに追加した引数を渡すように記載します(オブジェクト形式で書く)。

receivedは購読しているチャンネルから配信があった場合にどうするかを記載します。
今回はalertをあげたいのでalert(data['message'])と記載します。
配信されてきた情報はdataオブジェクトに乗って入ってきます!
messageはActionCable.server.broadcast 'chat_room_channel', message: data['message']message: data['message']で指定されています。

ここまでやるとコンソールでApp.chat_room.speak('Hello')を実行するとalertでHelloが表示されるのが確認できます。

チャットっぽくしてみる

ここからチャット風に変えていきます!
まずはapp/views/chat_rooms/show.html.erbに投稿するための以下を末尾に追記します。

<form>
  投稿: <input type="text" />
  <input type="submit" value="投稿" onClick="postChatMessage()" />
</form>

投稿ボタンがクリックされたらpostChatMessage()という関数を発火させるようにしておきます。

postChatMessage()はこんな感じに実装しておきます。
一旦、app/assets/javascripts/application.jsの末尾にでも記載してください。

function postChatMessage() {
  event.preventDefault();
  var element = document.querySelector('input[type="text"]');
  App.chat_room.speak(element.value);
  element.value = '';
}

投稿ボタンが押されたら今までコンソールでチクチク実行していたApp.chat_room.speakを実行するようにしています。

channelのspeakにDBに登録する処理を追記する。
単純にcreate処理を追記するだけです!

# app/channels/chat_room_channel.rb
def speak(data)
  chat_message = ChatMessage.create!(content: data['message']) # 追記
  ActionCable.server.broadcast 'chat_room_channel', message: chat_message.content
end

それができたら、チャットが投稿されたら画面に反映されるようreceivedにDOMを操作する処理を書いておきます。
alertを消して以下の記述に変更します。

// app/assets/javascripts/channels/chat_room.js
received: function(data) {
  var chat = document.getElementById('chat');
  var newMessage = document.createElement('p');
  newMessage.innerText = data['message'];
  chat.appendChild(newMessage);
},

配信を受け取ったらid="chat"のDOM内に投稿内容を記載したpタグを追加するようにしています!

こうすることで冒頭に見せたチャットっぽいものが動くようになります!

さいごに

ActionCableなんだかんだ触ったことがなかったので新鮮でした!
ActionCableはRailsだけでなくJSも絡んでくるので割と混乱しやすい機能なのかなあとも感じたりします…

次はActiveStorageにでも触れよう

【Vue】Vue.Draggableを使ってサクッとTrelloっぽいものを作る

お久しぶりです。超久しぶりです。
ブログ書くのめっちゃさぼっていました…

久々にちょっと時間があったのと、お勉強で触ったVue.Draggableがとってもお手軽便利だったので紹介します!

Vue.Draggableとは

Vue.Draggableはドラッグ&ドロップでリストを並び替えすることをお手軽に実装できるライブラリです!
Sortable.jsをVueコンポーネントで扱えるようにしたライブラリのようです。

github.com

これを使うことでサクッと並び替えのできるリストが実装できます!

導入

まずはVueプロジェクトを作ります。
vue-cliを使ってサクッと作ります。
プロジェクトの名前は任意で問題ありません。(今回はvuedraggable-sandboxとします)

$ vue create vuedraggable-sandbox

プロジェクトができたらVue.Draggableを導入します。
(今回はyarnを使用します)

$ yarn add vuedraggable

とりあえずサクッと試したいのでsrc/App.vueにVue.Draggableをimportしてリストを作ってしまいます。
使用しないのでHelloworld系のものは消してます。

// src/App.vue
<template>
  <div id="app">
    <draggable element="ul">
      <li v-for="task in tasks">{{ task }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'app',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        'task1',
        'task2',
        'task3',
        'task4',
      ]
    }
  }
}
</script>

importしたvuedraggableはcomponentsに配置します。
また、リストのデータとしてdataにtasksという配列を設定しておきます。

templateの部分で記載している

<draggable element="ul">
  <li v-for="task in tasks">{{ task }}</li>
</draggable>

の部分がVue.Draggableを使用している箇所です。
draggableタグで指定しているelementはdraggableの部分をなんのタグにするかを指定しています.(デフォルトはdiv)
draggableで囲って並び替えのしたい要素をv-forで出力するだけで並び替えの仕組みは実装されます。

f:id:kimuraysp:20180408142405g:plain

わかりやすくするために少しCSSを調整しています。
たったこれだけでドラッグ&ドロップで並び替えできるリストが作れます。

Trelloに近づける

これだけだとまだTrelloっぽさからは少し遠いですね。
なので列を増やして、縦の移動だけではなく横の移動もできるようにします。

列を表現するためにtasksを二次元配列にします。

data() {
  return {
    tasks: [
      ['task1-1', 'task1-2', 'task1-3', 'task1-4'],
      ['task2-1', 'task2-2', 'task2-3', 'task2-4'],
      ['task3-1', 'task3-2', 'task3-3', 'task3-4']
    ]
  }
}

またdraggableの部分を以下のように修正します。

<draggable :options="{ group: 'tasks' }" element="ul" v-for="list in tasks">
    <li v-for="item in list">{{ item }}</li>
 </draggable>

optionsでgroupにtasksを設定することで、tasksの中にある配列間での要素移動ができるようになります。
またdraggableのところでtasksをv-forで回すようにします。

これだけで列間での移動もできるようになります。

f:id:kimuraysp:20180408142424g:plain

実際にTrelloっぽいものを作るとなるとAPI連携があったり、タスクの追加ができたりという機能も必要ですが並び替えについてはたったこれだけでできるようになってしまいます!
世の中末恐ろしいです…

今回のブログを書くのに使用したサンプルは以下になります!

github.com

さいごに

世の中便利なものがいっぱいです
どう道具を使うかを考えることがとりあえずものを作る上では重要なのかもしれません

【副業】会社勤めだけどはじめての確定申告に行ってきた

お久しぶりのブログになります。。。笑
ほんとだったら技術ブログをかけって話なんですが、今日は生まれて初めて確定申告に行ってきたので書いていきます

気持ち

このエントリーを書こうと思ったのは、初めて確定申告に行ってきたというのもありますが、会社員とかで確定申告に行ったことがない人って割とこのイベントにハードルを感じているのではないかなあと思っているので割と簡単にできちゃうよってのを知って欲しさがあったためです!

注意

とはいえ、簡単にできちゃうのはちょっとした副業とか仮想通貨でちょっと儲かちゃったって人限定のお話かもしれません。。。
フリーランスの人や副業が本業上回る勢いで稼ぎでているとかの人だとえらい大変なイベントなのかなあと思います。(収支の記録を辿るのが辛そうなイメージ)

自分の状況

去年の自分の状況として

  • 仮想通貨でそれなりの額で利確をした
  • 知人からちょっと仕事を引き受けて副業的に取り組んだ

ということがあり見事に副収入が20万円を超えてしまい、晴れて確定申告の対象に。。。

※ 会社勤めの場合、副収入が20万円になると確定申告の対象になってしまいます。

詳しくは

https://www.freee.co.jp/kb/kb-kakuteishinkoku/necessary-case/

確定申告に当たって準備するもの

必要な書類

  • 源泉徴収票
    • 会社からもらったやつ
  • マイナンバー通知カード
    • 掘り起こしてください
  • 運転免許証
    • 身分証明できるものであれば運転免許証でなくても可

※ 通知カードと運転免許証はマイナンバーカードがあればそれで代用できる

確定申告書を作るのにあると便利なもの

  • PC
    • あとで紹介する会計サービスをつかうため
  • プリンター、コピー機

確定申告のやり方

確定申告書類の作成はfreeeを使うとめっちゃ簡単でした!

www.freee.co.jp

月額980円がかかってしまうのですが、手軽に確定申告書類ができてしまうので払う価値は十分にあります。
詳しい操作はfreeeの指示に従っていけば大体完了しちゃいます!

会計freeeで行う確定申告の流れ – freee ヘルプセンター

僕の場合は副業の収入を記録する必要があったため収支の欄に雑収入として収入を入力しまくりました。
この収入の額については銀行通帳見ながら副業の収入の部分を手動で入力していきました。(自分の記憶力が試されます)

仮想通貨分の申告

今年の確定申告で結構肝になるのがこの部分の申告だと思います。
僕は以下のサービスを使って損益の計算を行いました。

www.cryptact.com

幸運にも某国内仮想通貨取引所しか使っていなかったため、このサービスに従って必要なデータをアップロードしただけで損益計算が終了しました。

ここで出てきた損益をfreeeの仮想通貨所得を入力する欄にコピペするだけでした。

仕上げ

あとはfreeeで確定申告書を作り切ってPDFとして出力するだけでした。

便利サービスを使うことで確定申告の知識が1ミリもない状態でも確定申告書類を作成することができます。
雑所得だと書類添付の義務はないみたいなので作成した確定申告書と必要書類だけ持って堂々と税務署に乗り込めばすんなり確定申告は終わってしまいます。

個人的な感想ですが、確定申告ってもっと仰々しいものだと思っていたのですが、結構あっさり終わった印象でした。

確定申告の流れまとめ

  • 必要書類を用意します
  • freeeを使って確定申告書を作ります
    • 仮想通貨の収入がある人はcryptactなど使って仮想通貨の損益計算を行って、計算結果をfreeeに記載
  • 作成した確定申告書を印刷します
    • 押印とマイナンバーの記載が必要な箇所があるのでそこは手書きで埋める
  • 税務署にいきます
  • 提出します
  • 優勝

といった流れになります。

最後に

注意して欲しいのですが、僕は税に関する知識などかなり薄いのでこの方法が正しい方法なのかは定かではありません。。。
実際に確定申告を行う際は自己責任でお願いいたします(ごめんなさい)

ただ確定申告って思いの外、あっさりしたイベントだよってのを確定申告をやってこなかった会社員の方などに知って欲しいという思いでこのエントリーを書きました。

確定申告が怖くて副業するのを踏みとどまったりしている人はもったいないのでガンガン副業しちゃった方がいいと思います!
あとちょっとだけ稼ぎが出てしまって確定申告の対象にはなってしまった人は少額なら大丈夫だろーと思わずにきちんと納税した方が良いと思います。

納税は国民の義務というのもありますが、このいっときのめんどくささに負けてやるべきことやらずに後から脱税が発覚して罰則で遅延料払わせられたりするのは馬鹿らしいと思うので。。。

とりあえず今回の確定申告で、収支の記録(領収書など)をこまめにつけておくのが非常に重要なんだろうなーと感じました。
もしかしたらフリーランスに挑戦したりすることがあるかもしれないので、いい教訓になりそうです。

確定申告期間は残り2週間です!!
バシッとめんどいことを終わらせて清々しい気持ちで来年度を迎えましょう

Facebook認証をlocalhostで試すときに見落としがちなこと

ちょっと間が空きましたが、メモっておきたいことがあったのでブログ書きます

概要

Facebook認証を実装してlocalhostで試そうとしましたが微妙にハマってしまいました。

developerサイトで有効なOAuthリダイレクトURIhttp://localhost:3000を設定して意気揚々とFacebookログインボタンを押すと

f:id:kimuraysp:20180128224027p:plain

上記のような残念な画面が。。。
ネットの海を漂って見ましたが軒並み有効なOAuthリダイレクトURIを設定すればいけるっす〜みたいな情報しかなくて微妙な気持ちに

とりあえず適当に設定を触りながら試して見たところ、以下の設定をいいえに設定するとlocalhostでも問題なくFacebookログインができるようになる模様

f:id:kimuraysp:20180128224238p:plain

localhostfacebook認証できないときは試してみるといいかもしれません(多分デフォルトだとはいになってる)

最後に

一週間に一記事チャレンジ2週目で終わってしまった。。。
週一執筆難し過ぎワロタ。。。
とりあえずモンハンやろ。。。

【Vue.js】vue-routerとmathjaxを掛け合わせてみたら数式が変換されていなかった話

携帯にいつのまにか書いた2018年の目標に週1でブログを更新するという項目があったため今週も書きました(使命感)
最近技術記事書いてなかったし、ちょうど苦しめられたことがあったので備忘録をば

概要

vue-routerを使ってSPAチックなWebアプリを開発していて、コンポーネント内にmathjaxで数式を変換して表示するような箇所がありましたがvue-routerでコンポーネントレンダリングした箇所が数式を変換していないという問題が発生しました。。。
普通に画面遷移で作っていたときは変換されていたので完全に見落としてました。。。

再現

vue-cliでvueプロジェクトを作成

$ vue init webpack mathjax-test

index.htmlにmathjaxのCDNを配置する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mathjax-test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 以下を追記 -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>
  </body>
</html>

ひとまず数式が表示されるか確認するためにsrc/App.vueに数式を設置してnpm run devを実行

<template>
  <div id="app">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>
$ npm run dev

いい感じに表示されます。

f:id:kimuraysp:20180113164720p:plain

vue-routerを使ってクライアントサイドルーティングを実装する。
とりあえずコンポーネントを二つ作ってみる。

src/components配下にFormula1.vueとFormula2.vueを作成します。

<!-- Formula1.vue -->
<template>
  <div id="formula1">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>

<script>
</script>

Formula2は適当に数式を変えて作成してください。
コンポーネントを作成したらrouterの設定を行います。

import Vue from 'vue'
import Router from 'vue-router'
import Formula1 from '@/components/Formula1'
import Formula2 from '@/components/Formula2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/formula1',
      component: Formula1
    },
    {
      path: '/formula2',
      component: Formula2
    }
  ]
})

とりあえず/formula1/formula2というルーティングを作成して、リンクをクリックしたらそれぞれのコンポーネントを表示するようにします。
src/App.vueを以下のように書き換えます。

<template>
  <div id="app">
    <div class="links">
      <router-link to="/formula1">数式1</router-link>
      <router-link to="/formula2">数式2</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

vue-routerの書き方に沿ってリンクとコンポーネントの表示場所を作成します。
そして数式1をクリックしてみると。。。

f:id:kimuraysp:20180113164411p:plain

mathjaxが効いていない!!!/(^O^)\ナンテコッタ

普通に画面をレンダリングした時には効いていたのに、一体なんなのかと。。。

とりあえずmountedのタイミングでmathjaxを読み込むように修正

src/components/Formula1.vueのscriptsにを追記

export default {
  mounted() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  },
}

これで表示されるんとちゃいます?と数式1をクリックしたら数式が表示されました。

f:id:kimuraysp:20180113164443p:plain

mathjaxを利用しつつvue-routerを使う場合は数式が入ってくるであろうvueコンポーネントmountedのタイミングでmathjaxを読み込ませる必要があるようです。
createdのタイミングでは変換されず。。。

もしmathjaxとvue-routerを掛け合わせる時にはまっている人がいたら参考にどうぞ。。。

今回のソースコードも一応上げておきます。
https://github.com/kimuray/sandbox-vue-router-mathjax

最後に

これ実際に仕事ではめられた悲しみなんですが、仕事でやっていたときはmountedで読み込ませるだけでもダメで、createdのタイミングでも読み込ませるという二段構えをしないと数式が変換されませんでした。。。

仕事の環境はvue.js + Rails(しかも変換箇所はマークダウンで記載されている)みたいな感じだったのが何か影響していたのかなあ。。。

もしmountedにmathjax設定しても動かない場合はcreatedにもmountedと同じ記載をすれば動くかもしれないのでおためしあれ。。。

地方の人って変わりたいけど変われないジレンマを抱えてるのかも

年末年始休暇を終えて東京に帰ってきました。
今回の帰省は気づきが多い帰省になった気がします。

勉強しようと思って、帰省の荷物に入れたオライリー本を1/4も読めていないのは内緒のお話。。。
あと明日から仕事したくない。。。

帰省を振り返って

帰省の過ごし方は予定の合う友達と飯行ったり、実家のコタツでダメ人間と化していたりと割と普段の帰省と変わらずな感じでした。
ちょっと違ったのは飯行ったりした友達が結婚して家庭を持った状態になっていたりしたことですね。

あとは親が割と今後のキャリアについて悩んでいたりするタイミングだったので、50近くになってもこんなに悩むことになったりするのかと人生の難しさを感じたりもしました。

今回のブログのタイトルは帰省で友達や親と話して感じたことです。(とはいっても話したの数人なのであれだけど)
ただこの内容は今後自分が成し遂げていきたいことにつながりそうな感じがするので形として残しておこうという趣旨です。

みんな悩みを抱えてる

今回あった人たちで悩み的なものが一つもなかった人がいませんでした。
自分自身も多少は抱えてるものもあるのでなにかしら悩みがあるのは当然だと思います。

ただ今回話をしてきた人たちは、個人的に以下のような感覚を受けました。

  • 解決するための思考や行動ができていない
    • できていないというより解決するという選択肢がそもそも存在していない
  • 悩みを完全に受け入れてしまって解決するのではなくこれを気にせず受け流してしまえばいいんだというような雰囲気
  • 自分ではどうしようもできないと思い込んでいる

確かに仕事的な悩みだと、人と人のしがらみがあって思うように動けないというような制限があったり、末端だったりすると会社事情の問題には口を出しづらかったりという要因があったり、家庭的な悩みだと奥さんや子供という自分だけではない存在がでてきて自分一人の問題ではなくなったりと、外的要因で身動きが取れなくなっているという事実もあるように感じます。

個人的に言わせてもらうと、上記のような要因があったとしても、それでも思考・行動がなさすぎる感覚を持っています。
話を掘っていくと大体はどこかで諦めて行動するだけ無駄という結論に達している感じが否めませんでした。
それと同時に自分では解決は無理とさじを投げている感じもします。

私自身がこれまで自分で行動することで自分の人生や周りの環境を変えていくといったことができている感覚なので、最終的には自分がやるかやらないかが大事だと思っています。
そのため諦めの早さには少し歯がゆさを感じる部分がありました。

しかし、少し考えてみると地方ゆえの難しさがそこにはあるように思いました。

地方って思っている以上にチャンスがない

私は4年前に新卒でSEとして前職の某SI企業子会社に入社しました。
そして、勤務地が東京となり、紆余曲折を経てRailsを学習して、現在の会社にエンジニアとして転職してうまいことやってこれています。
自分で前職のキャリアのままではまずいと感じて行動した結果今の自分があります。
その経験があるので行動さえしてしまえば意外となんとかなるという感覚が自分の中に形成されました。

そのため周りにも、とりあえず動いてみたらいいと思うと結構気軽に言ってしまうのですが、地方だとそれが難しいかもしれないと考え始めています。1 (とはいえ最終的には地方の人でも自分で動かないとどうにもならないという事実もありますが。。。)

よくよく考えてみると私は「たまたま世の中的にニーズのある技術に興味があって、たまたま東京にいたから動きやすかった」という側面があるなと思いました。

東京にはいっぱい仕事があって、いっぱい面白いところがあって、いっぱい人がいます。その分だけチャンスが多いってことです。
自分が興味のある分野もITだったのでエンジニアが売り手市場の昨今は自分にあったフィールドを探すことが簡単です。

ただ地方はその辺りが全然違います。
仕事の選択肢がかなり限られる、面白いところはほとんどない(地方人の憩いの場はイオン)、人は少ない(優秀な人ほど都会の方にでていってしまう)といった具合に、東京に比べて切れるカードが少なすぎると思います。

だったら東京に出てくればいいじゃんという意見もあるかと思います。
個人的にも東京に出てくることができるのであれば、出てきちゃった方がいいと考えています。
東京に出てくるという変化を恐れず行動することで確実に自分の人生を変えることができると思います。

ただ家庭を持っている人やそもそも東京に出る資金がない人はそれが難しいと思います。
だからこそ現状の悩みの解決というより、受容してしまうという形になってしまうことが多いのかなあと感じました。

あとは情報格差ですね。
自分の周りだけかもしれませんが友達で家にPCがないというパターンが結構多いです。
情報がないということは手札を用意することもできないということだと思います。

私は職業をどうしたいか悩んでいる人には割とプログラミングの勉強をすることを勧めたりするのですが、PCがないとそもそも勉強という選択肢すらとれません。

そのため地方の人は現状を打破するための手段、選択肢を持ち合わせていない人が多いという仮説があるなと思いました。
もし情報を得る手段を知っていたら、もし東京のように色々なものがある環境に身を置けていたなら、色々と話が変わってくる部分があるかもしれません。

きっかけをまっている

帰省中に会った友達の一人に「きっかけがあればな。。。」とふと呟いたのを聞いて、たしかに地方だときっかけがなかなかないなと思いました。
かつ情報を得る能力が欠如している人だときっかけをきっかけだと考えることができなかったりすると思うんですよね。

方法は現状全く検討がついていませんが、地方に住んでいる人たちが色々な選択肢に気づいて行動できるような環境が整えば地方が元気になってくるのではないかなあと思ったりもします。

地方創生という言葉をたまに聞いたりしますが、これを成し遂げるためには地方に住む人たちがもっと柔軟に働いたり、所得が増えたりするような社会を作っていく必要があると思います。

このきっかけは本当は自分で見つけて掴み取るのは大事なのかもしれませんが、少し都市部のほうから何か働きかけていくことが必要なのだと思います。
このきっかけを提供する仕組みであったり、活動であったりを自分発でやっていきたいと感じています!

最後に

書いてみて思ったけど、この話題は扱いが難しいような気がするなあ。
結構自分の考えの押し付けにもなっちゃいそうな気がしたり。。。
とはいえこの問題は解決しないといけない課題だと思うし、個人的に解決していきたい課題に感じる。
個人的に色々な力をつけてこの課題に全力で向き合ってみれたらいいのかなとか思ったりもしてますね

明確に答えのない話だからすごく「思う」とか「感じる」とかぼやっとした語尾が多かったなあ。。。
もっと言語化できれば解決策に近づけそうな気もする

そういや最近技術記事を書いていない!!
来週とか書こう!あと今月の目標も立てよ!


  1. 東京で働いているIT会社の人とかで会社をブラックだなんだと言っている人は環境は恵まれている(会社には恵まれていないのかも)と思うので行動を起こすべきだと考えています。環境を変えるための行動をせずにあーだこーだ言うのは筋違いなんじゃないかなあとか思ったり

2018年の目標(野望)

年が明けて早3日ですが、あけましておめでとうございます。
今年もよろしくおねがいいたします!!

年も明けたということで今年の目標を書いて行こうかなと!!

今年の目標

  1. 個人的にサービスを10個作ってリリースする
  2. 使える技術の幅を広げる
  3. 現在の会社で収益の柱になるサービスを立ち上げる
  4. 自分のブランディングを考える・土台を築き始める
  5. 人との繋がりを広げる
  6. 副収入を今の3~5倍にあげる

大きな項目としては上記の5つです!
一つずつ紐解いていきます!

個人的にサービスを10個作ってリリースする

去年はサービス作ろうと友人なんかとやってみたりしましたが、結局個人的なもので形になったものは0だったので今年こそはということで!
10個というのはスピード感を持ってものを作るという意味合いも込めてです!(あとは期間を短くすることで変に大きなものを作ろうとなるのが防げるかなと)
世の中に公開して使ってもらうためにはどうすればいいかという観点も磨きたいのでマーケティング周りも学習していきたいです。

使える技術の幅を広げる

これはエンジニアとして手を出せる領域を広げていきたいという意気込みですね!
今はRailsとVue.jsでアプリケーションを作ったり、VPSAWSを使ってアプリを公開するというWebアプリケーションを作るための最低限の基礎を持っているつもりですが、これだけだとこれからの世の中的に弱いかなあと思ったりしています。
第4次産業革命と言われている昨今で活躍するためにはWeb技術+αが求められるのかなと感じているのでの部分をつけたいと思います!
データ解析あたりが世の中のニーズともマッチしていそうな気がするのでその辺りに足を伸ばそうかと!
RailsAWS、フロントエンドの技術もしっかり深めていきたい!

現在の会社で収益の柱になるサービスを立ち上げる

現在所属している会社が新しい収益の柱を作れるように開発側からサービス企画を促していきたいと思います。
去年は既存サービスの改善提案などは行ってきていたのですが、新規で何かを始めるということはできていませんでした。
一応スタートアップといわれる部類の会社なのでスピード感を持って構築・改善をして行くことを目標にサービス立ち上げを先頭に立って行います!
2018年は新規で教育 × テクノロジーを促進していけるようなサービスを構築していきたい思います。

自分のブランディングを考える・土台を築き始める

これは自分が何を成し遂げたくて、何ができる人間なのかを自分の人生を振り返って構築していきたいと考えているので目標としました。
自分というブランドを確立して行くためには今の年齢から思考、行動をして行く必要があると最近人と話して思いました。
今後は何かしらの形で独立していきたいと考えているので、自分のブランドを作ることが近々では重要な事項だと考えています。
もしかしたら傲慢なことかもしれませんが、将来的に自分に関わってくれた人たちを幸せにできることを行いたいを考えています。
自分自身の力を大きくすることで、より世の中に働きかけやすくなると考えているので自分のブランドを構築することはとても重要だと思います。
2018年はこのブランド構築の土台を作っていきたいと思います!そのために自己分析や様々な知識を身につけていきたいです!

人との繋がりを広げる

これは結構課題感に感じているものの、苦手意識から今まで全然できていなかった事項ですね。。。 ブランディングのところで自分のやりたいことを明確にして、何かを起こしていくとなったら間違いなく人との繋がりが重要になると感じています。。。
その時になってから作るのもありかもしれませんが、やはり早めに動くにこしたことはないと思いますし、人との繋がりを作る訓練もしておいた方がいいと思いますし。。。
あとはエンジニアとして見識を広めるために色々なエンジニアに繋がることも大事だとも思っています。。。
ということで去年までは消極的だった勉強会やコミュニティ、イベント参加などを最低月2くらいのペースでやっていきたいと思います!

副収入を今の3~5倍にあげる

去年からちらほら個人的にお仕事の話をもらって副業するようになったのですが、まだまだ収入としてはお小遣いレベルなのでこれを本業がなくてもなんとかなっちゃうよというレベルまで持っていきたいと思います!
副業は開発を請け負ったりするだけでなく、もっとそれ以外の領域にも手を出してみたいなと!
何がともあれ先立つものは必要ですしね!笑
副業だけと言わず収入が上がることがあれば積極的に挑戦してみたいと思います!

最後に

なんか書いてみて思ったけど、今年は結構欲張っていく必要がありそうだなーと思いました。笑
ただ2018年は自分が今後どう生きていくかを決める第一歩となる年だと考えているので、貪欲に活動していきたいと思います!
これを全部達成できたらかなりの成長を遂げられそうなので頑張ろう!やってやれないことはない!