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

とあるプログラミングスクールで働くひよっこエンジニアが覚えたことや悲しみを記すブログ

【Rails】Webpackerを導入してモダンなJavaScriptをRailsで使う

今回はWebpackerの導入について書いていきます。
内容的には手垢つきまくりの内容ですが、地味に体系的にまとまっているものがなかったのでまとめてみました!

やりたいこと

Webpakcer導入

RailsでモダンなJSフレームワークなどを利用する際にはWebpackerを導入して行きます。
WebpakcerはRails5.1以降からrails newの段階から導入できるようになっています。
またWebpackerはyarnに依存しているためyarnをインストールしておく必要があります。
今回はrails newからではなく、途中のプロジェクトからWebpakcerを導入していきます。

yarnインストール
https://yarnpkg.com/lang/ja/docs/install/#mac-stable

Railsプロジェクトの作成

$ rails new webpacker_sample --skip-turbolinks

turbolinksはjavascriptで画面を実装している際に思わぬ落とし穴になりがちなので入れないようにします。
Railsプロジェクトでまず実行するコマンド周りを実行しておきます。

$ bundle install --path vendor/bundle
$ rails db:create

Webpakcerの導入

Gemfileにwebpackerをインストールするように記載します。
ついでに必要なくなる子達も消しておきます。

# 追記
gem 'webpacker', '~> 3.5'

# 削除
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'

基本的にフロントエンド周りのライブラリはnode_module経由で利用するようにしたいので、sassやcoffeeは削除しておきます。

Gemfileを削除したらbundle installします。
bundle installが完了したら、webpackerをインストールします。

$ rails webpacker:install

インストールが完了するとconfig配下にwebpackerの設定ファイル、app配下にjavascriptディレクトリが生成されます。

rails newのタイミングでwebpackerを導入するとこの工程が不要になります。

Webpackerの設定を調整する

初期の状態だとapp/javascriptjavascriptしか使えないん?という感じのディレクトリ名なので、わかりやすいディレクトリ名に変更します。
config/webpakcer.ymlを修正することで対応することができます。

default: &default
  source_path: app/frontend # 変更
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

この修正を加えた後にapp/javascriptディレクトリをapp/frontendにリネームしておきます。
またapp/frontend/配下にjavascriptsというディレクトリを作成して、その配下にapplication.jsを作成します。

app/frontend/packs/application.jsはwebpackのビルドの取りまとめを行うファイルとして扱います。

スタイルシートや画像も読み込めるようにする

スタイルシートと画像を保存するためのディレクトリを作成しましょう。
app/frontend/stylesheetsapp/frontend/imagesというディレクトリを作成しておきます。
stylesheets配下にはapplication.scssというファイルを作成しておきましょう。

ディレクトリとファイルが作成できたら、諸々の読み込みができるように app/frontend/packs/application.jsに追記します。

import 'stylesheets/application';
import 'javascripts/application';
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);

設定したjavascriptをviewで読み込めるようにする

javascriptの読み込みとstylesheetの読み込みをできるようにします。

<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

stylesheet_link_tagstylesheet_pack_tagjavascript_include_tagjavascript_pack_tagに変更します。

設定できているか確認する

viewを作ってみてWebpackerの設定がうまくいっているか確認します。

$ rails g controller pages top

次にrails serverとwepack-dev-serverを立ち上げます。

$ rails s
$ bin/webpacker-dev-server

Webpakcerを使うとbin/webpakcer-dev-serverを実行する必要が出てきます。
rails sとwebpacker-dev-server二つをいちいち立ち上げるのが面倒な場合はforemanを導入するとコマンド一つで立ち上げられるようになります。
https://github.com/ddollar/foreman

コマンドをうったらページ確認のためにブラウザでhttp://localhost:3000/pages/topにアクセスしてみましょう。
問題なくアクセスできれば設定はうまくいっています。

もう少し実感できるようにするためにapp/frontend/javascripts/application.jsapp/frontend/stylesheets/application.scssを編集してみます。

alert('テスト'); // 追記
// 追記
h1 {
  color: red;
}

すると画面にアラートが表示されタイトルが赤く表示されると思います。

f:id:kimuraysp:20180615145956p:plain

rails-ujsを導入する

rails-ujsはdeleteやputといったrequestを飛ばすために必要なライブラリです。
app/assets配下を読み込まないようにしたためrails-ujsが効かなくなってしまっているので導入し直します。

$ yarn add rails-ujs

まずはyarnでrails-ujsをインストールします。
インストールができたらapplication.jsでrails-ujsの読み込みを行います。

// 追記
import Rails from 'rails-ujs';
Rails.start();

ここまで設定することでモダンなJavaScriptRailsで扱えるようになります。

最後に

これでVueでもReactでもなんでもござれです。 ただreact-routerやvue-routerといったクライアントサイドルーティングとRailsの相性が悪い(経験則)ので、SPAにするときはRailsにはAPIに徹してもらうのが一番そうです。

【Rails】ActiveStorageを使ってお手軽にファイルアップロードを試す

最近ぼちぼちアウトプットしようとせこせこインプットしています。

前回Rails5.2でたからActionCable試すという舐めた記事を書きましたが、今日はRails5.2で標準搭載されるようになったActiveStorageを試します!

ActiveStorageとは

ActiveStorageはRails5.2から標準で搭載されるようになったファイルアップローダーです。
AWS S3などのクラウドストレージへのアップロードも設定で手軽に実装できる代物です。

rails/activestorage at master · rails/rails · GitHub

今日はこのActiveStorageを使って簡単な画像も投稿できる機能を作ります。

導入

まずは適当にrails newでサンプルアプリプロジェクトをつくります。
(DBにpostgresql使いますがなんでもOKです)

$ rails new active_storage_sample -d postgresql

プロジェクトができたらGemfile内のmini_magickコメントアウトを外します。
画像処理のために導入するためです。

# Use ActiveStorage variant
gem 'mini_magick', '~> 4.8' # ここのコメントアウト外す

コメントアウトを外したらbundle installでインストールしておきます。
これで導入に必要なものは整いました。

ActiveStorageをインストールする

ActiveStorageを使うためにはまずインストールのコマンドを実行します。

$ rails active_storage:install

実行するとActiveStorageでアップロードファイルを管理するテーブルのmigrationファイルが生成されるのでrails db:migrateを実行しておきましょう。

生成されるテーブルは以下の二つになります。

active_storage_blobs

カラム名 保存内容
id ID
key ファイルを一意に識別するkey
filename アップロードしたファイルの名前
content_type ファイルの種類
metadata メタデータ(画像なら縦横の大きさなどが格納される)
byte_size ファイルサイズ(byte単位)
checksum チェックサム
created_at 作成日時

active_storage_attachments

カラム名 保存内容
id ID
name モデルの属性名(Userモデルのavatarとか)
record_type モデル名(Userとか)
record_id record_typeのモデルのID
blob_id active_storage_blogsのID
created_at 作成日時

ActiveStorageの設定を確認する

ファイルの格納先はconfig/storage.ymlで設定されています。

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

例えばlocalの設定を使えばプロジェクトルートにあるstorageディレクトリ配下にファイルを格納するという意味になります。

次にconfig/environments/development.rbをみてみます。

# Store uploaded files on the local file system (see config/storage.yml for options)
config.active_storage.service = :local

という記載があり格納先にconfig/storage.ymlで定義したlocalの設定を使うよという設定が書いてあります。

これで設定の確認は完了です。

ファイルアップロードする画面を作る

まずは画像アップロードできるようにUserモデルを作ります。

$ rails g model user name:string

ActiveStorageを扱う際は画像アップロード用のカラムを定義する必要はありません。
コマンドを実行したらrails db:migrateを実行します。

Userモデルができたら、ActiveStorageを使うための記述を追記しておきます。

class User < ApplicationRecord
  has_one_attached :avatar # 追記
end

この追記を行うことでUserモデルにavatarという画像を扱う属性が付与されます。
has_oneがあればhas_manyもあります。
has_many_attachedを利用すれば複数画像を扱うこともできます。

詳しくはこちらで

Active Storage の概要 | Rails ガイド

ActionStorageを使うための記載はだいたい終了なので、あとはざっと画面などを作成します。

# config/routes.rb
Rails.application.routes.draw do
  root "users#index"
  resources :users, only: [:new, :create]
end
# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)

    if @user.save
      redirect_to root_url, notice: 'Add User'
    else
      render :new
    end
  end

  private

  def user_params
    params.fetch(:user, {}).permit(:name, :avatar)
  end
end
<!-- app/views/users/new.html.erb -->
<h1>Add User</h1>

<%= form_with model: @user, local: true do |form| %>
  <div>
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div>
    <%= form.label :avatar %>
    <%= form.file_field :avatar %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>
<!-- app/views/users/index.html.erb -->
<h1>Users Index</h1>
<%= link_to 'Add user', new_user_path %>

<ul>
  <% @users.each do |user| %>
    <li>
      <p><%= user.name %></p>
      <%= image_tag user.avatar %>
    </li>
  <% end %>
</ul>

ここまでやると、こんな感じになります。

  • 投稿画面 f:id:kimuraysp:20180420235321p:plain

  • 一覧画面 f:id:kimuraysp:20180420235349p:plain

という感じですごく簡単に画像アップロードが実装できてしまいます!

S3にアップロードできるようにする

S3でバケットを作る

せっかくなのでS3にアップロードできるようにしてみます。

まずはAWS S3で適当な名前のバケットを作成します。
(わかりやすくactive-storage-sampleというバケットを作りました)

f:id:kimuraysp:20180420235619p:plain

作成したらS3を操作できるIAMユーザーを作成してアクセスキーとシークレットキーを取得しておきましょう。

格納先の設定をS3に向くように変更する

config/storage.ymlの以下のコメントアウトを外します。

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: ap-northeast-1
  bucket: active-storage-sample

config/environments/development.rbで先ほどlocalとなっていることを確認した設定をamazonに変更します。

config.active_storage.service = :amazon # :localを:amazonに変更

またS3へのアップロードを行うためにaws-sdk-s3を導入します。
Gemfileに以下を追記しましょう。

gem 'aws-sdk-s3'

追記したらbundle installしておきます。

アプリケーションからS3につなぎこむ

アプリケーションからS3につなぎこむためにIAMユーザーを作成して取得したアクセスキーとシークレットキーを設定しましょう。

Rails5.2からcredentialsという機密情報を暗号化する機能が追加されています。
これを使ってアクセスキーとシークレットキーを設定します。

$ EDITOR=vim rails credentials:edit

これを実行するとエディタ(この記載だとvim)が開いてキーを設定できます。

エディタが開いたら以下のように設定を記載します。

aws:
  access_key_id: アクセスキー
  secret_access_key: シークレットキー

記載したら保存して閉じます。
するとconfig/credentials.yml.encというファイルとconfig/master.keyというファイルができています。
config/credentials.yml.encは暗号化されているので内容を見ることはできません。

暗号化のキーにはconfig/master.keyに記載されているキーが使用されています。(環境変数RAILS_MASTER_KEYが設定されていれば、これを使う)

設定を確認したい場合はrails credentials:showを実行すれば生のデータを確認することができます。

先ほどconfig/storage.ymlでコメント外したところに

Rails.application.credentials.dig(:aws, :access_key_id)

という記載がありましたが、これはcredentialsのawsaccess_key_idを取得するという記載になります。

ここまで設定できれば画像を保存した際にローカルではなくS3にファイルが格納されるようになっています。
クラウドストレージへのアップロードも少ない手順で実現できてしまうのはお手軽で素晴らしいですね。

ちなみに

config/master.keyRAILS_MASTER_KEYの取り扱い間違えて消してしまったりすると、credentialsの複合ができなくなり詰んでしまうので注意しましょう。
詰んでしまった場合はconfig/credentials.yml.encを削除してrails credentials:editで1から設定し直すと持ち直せる可能性があります(個人開発に限る。チーム開発だとハラキリしかないかもしれない)

最後に

ActiveStorage手軽で便利なのですが、バリデーションやキャッシュの機能を持ち合わせていないとどこかでみたのでアップロード時にファイルチェックが必要な要件があったりすると扱いにくいかもしれません。

ただ厳密さが求められないような状況であれば素早く実装できるので検討してみても良さそうです!

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と同じ記載をすれば動くかもしれないのでおためしあれ。。。