Aikの技術的な進捗部屋

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

かの有名なサンバ踊りCSSに機能追加してみました

はじめに

私が日課となった技術系面白記事を発掘していたところ…。
つい最近に投稿された記事で、めったくっそ面白い記事を発見しちゃいました。 qiita.com

なぜ私がこのような物を作ったのか、突如インスピレーションしたのかもしれないし、
5月中旬の時の、私の精神状態がおかしかったのかもしれない。
ただ、同期の中では、想定外の事実に直面した時に思わず声をあげてしまうような人間がいたことや、
デバッグで頭がおかしくなってしまった時に、サンバを踊る文化があったことだけは事実である。

〜本家記事より抜粋〜

ちなみに本家の成果物は下記にございます。
Ctrl+Enterを押した後の衝撃は格別です…! yuichisemura.github.io

こんな面白い成果物に、せっかくなのでちょっと機能追加したいなと思い…。
GithubからForkボタンをポチーと押し作っちゃいました。

今回の記事では機能追加に至る道のりを書いていこうと思います。
ちなみに完成物はこちら: aik0aaac.github.io

ソースコードはこちら: github.com

((ちなみに筆者のFork経験はこれが初めてになります。
((勝手にやってしまってよかったのでしょうかね…暗黙の了解とかあるんでしょうか…。

機能拡張までの道のり

先に申し上げておきます。
今回機能追加と言っておきながら、大変申し訳ないことにコードの実装内容も大改編しちゃいました。
本当勝手に…ゴメンナサイ…。

Vue.jsの検討

対象となったリポジトリのコードを見ると、PureJSで全て記載されておりました。
jQueryで書かれていたら、まず間違いなくjQueryに甘えて機能追加していたでしょう…本当に感謝です。

ただ、例えばサンバを踊らせるための顔文字下記のコードですが:

<p class="left"></p><p class="face">(^p^)</p><p class="right"></p>
<p class="left"></p><p class="face">(^u^)</p><p class="right"></p>
<p class="left"></p><p class="face">(^s^)</p><p class="right"></p>
〜以下省略〜

…という風に書かれており…。
個人的に「Vue.jsのコンポーネントを利用すればスッキリ書けそう」と思い(後Vue.jsの勉強も兼ねて)、本コードにVue.jsを適用するところから考えてみました。

Vue.jsコンポーネント

ひとまずは先の部分をコンポーネント化しました。
Vue.js公式記事だったり他記事を見ながら勉強…。
出来上がったコードはこちらになります。

const SambaPerson = {
  props: ['mouth'],
  template: '<div class="samba-person">' +
    '<span class="left">\</span>' +
    '<span class="face">(^{{ mouth }}^)</span>' +
    '<span class="right">/</span>' +
    '</div>'
};

こうする事で<samba-person-component mouth="p"></samba-person-component>と書けば\(^p^)/が出る様に!
いやーコンポーネント化って神ですねまじ。

ちなみに、コンポーネント化するときはtemplateはrootとなるDOM要素が唯一1つ無ければならないらしく…。
(ルートエレメントは1つでないといけない)
例えば下記の様なHTMLをtemplate化しようとすると、Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.エラーがでます。

<span class="left"></span>
<span class="face">(^{{ mouth }}^)</span>
<span class="right"></span>

この仕様に気づかずエラーを連発しまくり非常に苦労しました…。
Vue.jsの根本を理解しておけばよかったのでしょうかな。むむむ…。

機能追加: カスタマイズ絵文字がサンバできる様に

さて本題、機能追加です。
私が思いついた機能は「自分で作ったカスタマイズ絵文字もサンバで踊れる様にすること」。
出来ればダンサーたちを増やしたかったりしたのですが…そこまでは手が回らず。

ひとまず下記の様な感じにできました。

"新規機能追加のプレビュー画像"
一緒に踊れるよ

上記処理に該当するコードは下記の様な感じ。
Vue.jsが保持するdatainputタグのValuev-modelでバインドさせてます。
このお陰で入力するたびに踊っている顔文字が変化していく様になりました!たまたまですけどね

<samba-person-component v-bind:mouth="customSambaPerson"></samba-person-component>
〜中略〜
<section id="samba_add_wrapper">
  <span>一緒に踊る:</span>
  <input type="text" v-model="customSambaPerson">
</section>
let sambaApp = new Vue({
  el: '#sambaApp',
  data: {
    customSambaPerson: '',
    sambaNowDoing: false,
  },
  components: {
    'samba-person-component': SambaPerson,
  },
…

命名規則、HTML構造、JS構造を整備

今回は、コード読解も兼ねて命名規則を自分好みに修正したり、HTML構造やJS構造を自分好みに整理したりと
人様の書いたコードの…特にパフォーマンスに影響しない項目にまで手を加えちゃうのに何とも言えない罪悪感を覚えながら…。
でも、自分が見やすいコードにするためには…と言い聞かせながら整備していきました。

命名規則については、例えば下記の様に:

  • yureshakeにしたり
  • yurezunot-shakeにしたり
  • leftleft-handにしたり…

HTML構造については、sectionタグやmainタグを積極的に用いる様にしただけです。
下手にいじるとCSSまで手を加えないといけないですからね…。
また、HTMLの骨組みは非常に美しいと思ったので、壊すのなんてとんでもない!と思ったのもあります。

JS構造については「共通化できる部分は共通化していく」「ただしコード行数が劇的に変化しないのであればそのままにしておく」という理念のもと、自分好みにしていきました。
例えばでいうと下記のコードを:

var tateList1 = document.getElementsByClassName("left");
for(var i = 0; i < tateList1.length; i++) {
    tateList1[i].classList.add('hurueruLeft');
}

こんな感じにしたりしました:

addClassToArrayByClassName('left-hand', 'shake-left');
〜中略〜
/**
 * 指定したクラス名を持つDOM要素に指定したクラス名を追加します。
 * @param {string} targetClassName 対象のDOM要素が持つクラス名
 * @param {string} addClassName 対象のDOM要素に追加したいクラス名
 */
function addClassToArrayByClassName(targetClassName, addClassName) {
  let array = document.getElementsByClassName(targetClassName);
  for (let i = 0; i < array.length; i++) {
    array[i].classList.add(addClassName);
  }
  return;
}

正直3行→1行になった程度なので、わざわざしなくてもよかったかもですね…。 本当勝手に色々弄ってしまって申し訳ないです…。

終わりに

振り返ってみれば結構改修しちゃった様な…。
でも意外と時間はかからなかったのは、自分自身がVue.jsやJavascriptへの理解を深めている証拠なのかもですかね。
また、今回の経験を通じVue.jsのコンポーネントという概念もちょっと理解できました。こんなに便利な概念だったとは…!

合わせて初のFork経験もできました!
本来はこっからプルリクエストが始まるらしいですが…。
私的には本件のプルリクエストを送信するつもりはないです。
元コードからだいぶ自分流に弄っちゃったので…これをプルリクエスト送信するのは憚られて…。

ともあれ色々とまた経験ができ、非常にホクホクです。
((ブログ記事もこうして書けましたし…
またもしビビッとくるものがあったらこうしてForkしたりなんだりしていけたらと思いますっ╭( ・ㅂ・)و

余談

今回の機能追加に伴い、GithubREADME.mdへ完成版のスクショを貼ろうとしたのですが…。
README.mdに画像を貼るにはどうしたら良いかわからず、色々調べた結果良さげな方法が見つかったので備忘録がわりにメモを。

cakecatz.hatenadiary.com こちらの記事にある様に、「スクショを置いておく専用のブランチ」を適当に切って、その中にスクショのみを入れていきます。
その後pushし、画像URLパスをMarkdownに下記の様に入力すればOK!
![alt文](画像URL)

※ちなみに画像URLのパスはこんな感じになります(2019/09/09現在):
https://raw.githubusercontent.com/[Githubアカウント名]/[リポジトリ名]/[ブランチ名]/[ファイル名]

ブランチを分けることで他のブランチが汚れることもなくなりますし、Githubサービス内で全てを完結可能になる…。
考えた人は間違いなく天才ですな( ゚д゚)ウム

GitKrakenについてまとめてみた&使ってみた

はじめに

私はよくGit…Githubにお世話になっており、これまでGitの利用にあたってはCLI経由で行なっていました。

かれこれGitは初めて触ってから3年か4年くらい経つので、GitのCLI利用にはすっかり慣れちゃったのですが…。
CLIだとどうしても「コミットログが見にくかったり」「ブランチの状態がわからなくなりがち」で割と問題視にはしてました。

「だったらSourceTree使えばいいじゃない」という意見もありますが、SourceTreeのGUIの色味がが気に食わず、ずっと触れずにいました。
そんな最中、最近SourceTreeの様なGit GUIツール「GitKraken」を知り。 www.gitkraken.com

GUIもめっちゃくちゃイカしてますし、こりゃいいと思い使ってみることに!
…というわけで、本記事ではGitKrakenについて少しまとめたりGitKrakenを使ってみた感想を書いたりしようかなと思います。

GitKrakenの機能

GitKrakenは「axosoft」というアリゾナ州スコッツデールにある企業が作成されたツールです。
無料でも使用できますが、Privateリポジトリへのアクセス機能などは有料版でないと使用できません。

リリースノートをみる感じ、かなり頻繁にアップデートがなされております。有難や…。 support.gitkraken.com

また、サポートしているGitクライアントも豊富にあります。
Githubはもちろんのこと、BitbucketやAzure DevOpsまで対応されております、素敵!
詳細な対応リストは下記に…。

  • GitHub
  • GitHub Enterprise
  • GitLab
  • GitLab Self-Managed
  • Bitbucket
  • Bitbucket Server
  • Azure DevOps

ちなみにGUIはこんな感じ。
黒を基調とした非常にモダンな感じの雰囲気となっています。

"GitKrakenのGUI(Darkテーマ)"
モダァン…

もちろんカラーテーマもいじることができ、現在の最新バージョン(Version 6.1.4)では、「黒基調のDarkテーマ」と「白基調のLightテーマ」から選択可能です。
Lightテーマもこれはこれでおしゃれな感じです…。

"GitKrakenのGUI(Lightテーマ)"

また、SourceTreeとGitKrakenの機能面から見た違い…については、下記の記事に非常にわかりやすく書かれていたので参考に…。 spc-jpn.co.jp

合わせて、GitKrakenの導入方法や使用方法についても、下記の記事に非常にわかりやすく書かれていたので参考に…。 elated-blackwell-51e103.netlify.com

有料プランについて

先ほども少し(?)話しましたが、GitKrakenは有料プランが存在します。
有料プランは2種類あり、「Individual」プランと「Pro」プランに分かれています。
無料プランでも十分に扱うことは可能ですが、Privateリポジトリを操作するならIndividualプラン以上にしないといけない感じです…。

各プランの違いは下記に…:

  • Free: 無料
  • Individual: 年間29ドル
    • Free版と比較し下記の機能が追加:
      • Privateリポジトリの編集
      • GitKraken内で競合マージによるConflictを編集可能
      • Gloボード上のカスタム背景画像が利用可能
    • 利用にはGitKraken v6以上が必要
  • Pro: 1ユーザーあたり年間49ドル
    • Individual版と比較し下記の機能が追加:
      • .gitconfigを管理するためのプロファイルが利用可能
      • GitHub、GitLab、BitBucketなどと統合して利用可能
      • ユーザーの管理が可能となる(マルチユーザー対応)
      • メールサポートが保証される

見てみると、Individual版は個人開発向け、Pro版は企業向けといった形でしょうか。
なお、Proプランは7日間の無料体験期間があるため、そちらで体験してみてよければProに…といった運用も可能です。

感想

ここからはGitKrakenを使ってみた感想を書きたいと思います。
(筆者がGit GUI使ったの初めてということからCLIと比較した感想となるため、GitKraken固有の感想とはならない気もします…)

これまでのGit CLI運用と比較し、addやコミットが驚くほど手軽にできる様になりました
ボタンをポチッと押し、専用のテキストボックスにちょちょいとコミットメッセージ書けばもうコミットされてる…もう超便利です。
これまでだと、git commit -mでコミットメッセージ打ってる途中に間違えてEnter押しちゃって「ああ…」となることもあったのですが、GUIからならそんなことも起こりづらく快適です。

さらの、ブランチやコミットログがすっごく見やすくなったのもありがたいです。
…とはいえ私は個人開発が主であり、基本masterブランチへの直コミットがほとんどなので…ブランチが見やすくなったところで、というのはありますが。

でもコミットログが見やすくなったのは非常に最高です!
過去のコミットも非常に追いやすくなり「過去のコミットメッセージに合わせていい感じのコミットメッセージを書く」ことも非常に容易にできる様になりました!
もうgit logで過去ログを延々と追っていったり、Githubにわざわざアクセスしてログ見たりしなくていいんだぁ…。

さらに、複数のリポジトリをタブ形式で同時並行管理できるのもまたいいなと…。
これまで複数のリポジトリを同時並行管理するには複数のコンソールを開かなきゃいけないというクソみたいな感じでしたが…。
そういった苦労からも解き放たれ、快適に開発ができる様になりました。

そして極め付けは「コミットメッセージのテンプレートがリポジトリごとに設定可能な」所ですかね。
もうこの機能が最高に最高で…(語彙力崩壊)。
日記やブログ記事の管理リポジトリなら、定期更新がほとんどなのでコミットメッセージにあまり変化がないため、こうしてテンプレート化できるのはすっごくありがたいです。

ただ、GitKraken…というかGit GUIツールの欠点(?)として、「簡単にaddやコミットが出来てしまうためコミットのハードルが下がりすぎちゃう」点があげられるかなと。
まぁこれは使いやすさのトレードオフですがね…。

何となく、CUIだとコマンドを1個発行するのに慎重になれる感じがして(git statusで状態を確認しコミットするのが当たり前になる)。
GUIだとボタン1つでいろんな処理ができちゃうから…便利になる分、無駄なコミットが増えてしまわないかな?と思っちゃいます。
まぁまだGitKrakenは使いたてなので、慣れていけばうまい付き合い方も見えてくると思いますが。

終わりに

GitはこれまでCLIで運用していた筆者にとって、GitKrakenは本当に革命的でした…いや本当に。
今後もガンガンお世話になっていきそうです。

それでは|д゚)

以前作ったレガシーWebシステムのリファクタリングへの道 その1

はじめに

最近お仕事でコードを書いているのですが、業務でコード書いてると昔書いたクソコードをリファクタリングしたい欲がふつふつと湧き上がり…。
こちらのクソコードをリファクタリングしようと思い立ちました。 github.com

本ブログではそのリファクタリングまでの軌跡をつらつらと書いていきたいと思います。
リファクタリングをするにあたり、参考になったサイトへのリンクもメモ書き程度に置いていきます…。

なお、こちらのクソコードでは「GoogleスプレッドシートをDB代わりにしたWebシステム」を構成しております。
リファクタリング前でももちろん動きはします…が…:

  • jQuery使ってる
  • npmやyarnでパッケージ管理してない
  • async/awaitを使わず関数をネストし非同期処理に対応
  • JSON形式でのデータ取得にfetchではなくjQuery.Ajaxを使用

…などなどかなりレガシーな仕上がりに。
ひとまずの目標としては、上記点を解消すべくリファクタリングしていこうと思います。

リファクタリング1回目

本クソコードはGitで管理していたので、まずブランチを切るところからリファクタリングを始めました。
masterリポジトリからブランチを切り、feature/refactoringというブランチに。
リファクタリング作業はこのブランチ内で行なっていきました。
(ぶっちゃけチーム開発でもないんでmasterブランチへ直コミットでもいいんですけどね)

今回はリファクタリング1回目という事で、大きな変更点は:

  • npmyarnへのビルド対応
    • package.jsonwebpack.config.jsの作成
  • GoogleスプレッドシートからのJSONデータ読み込み機能をjQuery.Ajaxasync/awaitfetchで実装

…程度に収めました。
本当は脱jQueryまで行いたかったですが、想像以上にWebシステム構成がjQuery依存してたので今回では諦め…。
本当にがっつりやるなら、クラス構造を考えガチガチに分離した方が美しくもなりますし学びにもなりそうです。

変更後のソースコードは下記に。だーいぶ様変わりしました…。 github.com

今回のリファクタリングにおいて参考にした記事

今回のリファクタリングにおいては様々な記事を参考にさせていただきました。
以下にその参考記事のリンクをのっけておきます。

今回のリファクタリングの感想

今回のリファクタリングを行なった結果、localhostでのビルド方法がyarnコマンド一発で出来る様になり非常に楽になりました!
localhostの立ち上げが非常に楽になったのもあいまって、開発効率がこれだけでかなり上がったかなと感じます。

また、過去に作成したコードを読んでみて改めて「自分のソースコードのわかりにくさが浮き彫りになった」と思います。
クラス構造やアーキテクチャ構造などを考えていなかった時代に作ったコードですので「JS1ファイルになんでも処理を詰め込んでいて」…非常にわかりにくいコードとなっていました。
それこそ、以前は考えていなかったこれらの概念を加えて処理を階層化してもいいかもしれないですね。
これと合わせて、脱jQueryできたらな!と…。

また、リファクタリングとは関係ないですが…。
Googleスプレッドシートのデータ取得に利用している、3年くらい前に書いたGASのスクリプト今もなおそのまま稼働していることにも驚きました…。
Googleさんはこういったツール系はどんどん革新されていくイメージなので、かなり意外です。

合わせて以前作ったWebシステムを改めて見つめることで「Googleスプレッドシートを使ったWebアプリ作成」に改めて興味が出てきました!
やはり、業務で作る様な手堅くDB使う様なものではなく、Googleスプレッドシートを使って手軽に出来るっていうのが非常に魅力的ですね…。
他にも色々やりたいことはあるのでいつ手をつけるかは決めてませんが、いずれやってみようかなとは思います!

おわりに

今回の1回目リファクタリングでは、ひとまずある程度満足いくまではできたと思います。
とはいえ、babel対応や外部JSモジュールの読み出し、webpackでJSをひとまとめにするなどは中途半端にしかできておらず…。
また、JSファイルの構造化や脱jQueryなんかもできてないので、これらは2回目リファクタリング似て行なっていければと思います。

2回目リファクタリングでは下記を目標に、頑張ってみることにします!

  • webpackでJSをひとまとめにする
  • import/exportで外部JSモジュールを読み出せる様にする
  • babel対応
  • JSファイルの構造化
  • jQuery

また、今回のリファクタリングでは下記の領域に初めて触れましたが…。
まだ「使える様になった」だけなので、「使いこなせる様に」もしくは「真髄まで分かる様に」別記事にてこれら項目をまとめてみたいと思います。

  • webpack
  • npm(とyarn)

それではまた|д゚)