コードを書きたい

コードが書きたかった

Svelteのドキュメント翻訳に参加した

過去にこちらのスライドで書いた内容を文字に起こしたものです。

speakerdeck.com

Svelteとは

svelte.dev

zenn.dev

上記の記事を読んでいただければ大体のことは把握できると思います。

とあるPodcastを流し聞きしているときにSvelteのことについて知りました。なかなか面白そうなフレームワークだなと思い、触ってみたのですが、結構楽しく開発ができたので一度は触ってみることをお勧めしたいです。

uit-inside.linecorp.com

翻訳について

日本での普及は少ないらしく、採用実績も文献もあまり見つからないそうです。

そんななか、上で触れたPodcast内でドキュメント翻訳についてお話をされておられました。 Podcastを聞いた当時は、まだまだ翻訳が進んでないらしく、参加できるかなと思っていました。 コードを書くようなOSS貢献は自分には難しく、こういった翻訳のプロジェクトなどからOSS貢献ができたらいいなと思っていたこともありました。 まずはドキュメント翻訳のGitHubリポジトリを見たり、Discordに参加させていただいたりして、自分にできそうなことを考えていました。

ほかの翻訳者の方のプルリクエストなどを参考にしたりして、自分の担当するドキュメントの部分を翻訳してプルリクエストを送ってみたところ、少々修正はあったもののすぐにマージされたので晴れて自分もOSSコミッターの仲間入りを果たすことができました。

github.com

日本語コミュニティについて

現在Svelteに関する日本語のコミュニティはDiscordがあります。

GitHubから招待リンクが踏めるので参加してみてはどうでしょうか？

最後に

Svelteを触ってみて、開発経験がとてもよかったので、現在はSvelteを使って自作ブログを作ろうと思っています。

また、Svelte以外にもSapperなどについてももっと勉強したり、翻訳に参加したりしたいなと思っています。

Vue.js完全に理解した

はじめに

昨年の夏に株式会社いい生活という会社で行われたインターンシップに参加してVue.jsとAPIを使ったWEBアプリを１週間で作成しました。

jdkfx17.hatenablog.com

そのときの開発経験が最高に良かったので、インターンシップが終わった秋頃からVue.jsでなにかしらのWEBアプリを作ろうと思い、とりあえず試しに読書管理アプリを作成してみました。

vooks-4f56b.web.app

ソースコードはGitHub上に全てあげています。

github.com

まだまだ使ったりしたいVue.jsの仕様などもありましたが、あまりたくさんのことを一つのプロジェクト内で試したくはないので、一旦このプロジェクトは区切りとし、次に作るWEBアプリで使ったみたかった仕様などを活用していきたいと思っています。

アーキテクチャについて

f:id:jdkfx17:20210214225623p:plain

ユーザーがフロントエンド側から楽天の商品検索APIを呼ぶと、フロントエンド側にJSON形式でデータが返ってくるので、それをパースしてリスト表示されるようにしています。

また、ユーザーが書籍をリストに登録するなどの動作を行った際にはCloud Firestoreにデータが保存されるようにしています。

詰まったところ

初めての本格的なフロントエンド開発だったので色々と詰まってしまったところがあるが、自分が記録していた部分で詰まっていた箇所を書いてみようと思います。

JSONの表示

OnSearch: async function(search_form) {
      let queryOfKeyword = "";
      if(search_form['keyword'] !== null){
        this.queryOfKeyword = `&title=${search_form['keyword']}`;
      } else {
        this.queryOfKeyword = "null";
      }

      let queryOfAuthor = "";
      if(search_form['author'] !== null){
        this.queryOfAuthor = `&author=${search_form['author']}`;
      } else {
        this.queryOfAuthor = "null";
      }

      const getUrl = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?format=json&applicationId=${process.env.VUE_APP_RAKUTEN_API_APP_ID}${queryOfKeyword}${queryOfAuthor}`
      await this.$axios.get(getUrl).then(response => {
        console.log(response.data);
        this.items = response.data.Items;
      })
    }

このプロジェクトを始めてからすぐの頃に書いた検索用のメソッドなのですが、今見たら結構ごちゃごちゃしているイメージがありますね。

this.items = response.data.Items;

ここで検索して返ってくるデータを代入しているつもりだったのですが、うまく表示されなくて結構悩まされました。 Twitterでフロントエンドに強そうなイメージを持っている @uzimaru0000 君にgistを投げて対応してもらいました。

list-of-books - JSONの表示 · GitHub

結果的に以下のように書いて検索したデータを代入しています。

this.items = data.Items;

ちなみにテンプレート側で呼び出す時は、

<p>タイトル：{{ item.Item.title }}</p>

このようにしています。

$emitとpropsの使い方について

子コンポーネントを作成し、親から呼び出してデータのやりとりをする必要があったのですが、そこで$emitとpropsを活用することにしました。（これも @uzimaru0000 君に教えてもらった気がします。）

正直なことをいうと、コンポーネントの親子関係について、しっかりと理解できていなかったため、どっちで$emitを書くのか、もしくは、どっちにpropsを書くのか、しばらく悩み続けました。

Vue.jsのドキュメントはわかりやすかったのですが、このコンポーネント間のやりとりに関してのドキュメントは僕にはわかりにくかった模様です。

いろいろと調べたのち、以下のようなコードを書いてみました。これは子のコードで、親のコードを貼るのは流石に長すぎると思ったので、先述のソースコードを参照してください。

<template>
  <v-container fluid>
    <v-btn color="blue" v-on:click="addWishList()">読みたいリストに追加</v-btn>
    <v-dialog v-model="wishDialog" max-width="300">
      <v-card>
        <v-card-text v-if="toPropsWishFlag">「{{ toPropsTitle }}」が読みたい本のリストに追加されました</v-card-text>
        <v-card-text v-else>「{{ toPropsTitle }}」は既に読みたい本のリストに追加されています</v-card-text>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import firebase from 'firebase';
export default {
  name: "WishButton",
  components: {},
  props: ['toPropsTitle', 'toPropsWishFlag'], // ここで親から渡してもらいたいデータをpropsでもらっている
  data() {
    return {
      wishDialog: false,
    }
  },
  methods: {
    async addWishList() {
      firebase.auth().onAuthStateChanged((user) => {
        if(user) {
          this.$emit('wish-button'); // ここで$emitを使い、親で行う関数を呼び出している
          return this.wishDialog = true;
        } else {
          alert("サインインしてください");
        }
      });
    },
  },
}
</script>

$emitで子から親で実行したい関数を呼び出し、propsで親から子に渡して欲しいデータを受け取っています。

感触の違いについて

インターンシップでVue.jsを触った際は、もちろん開発経験は楽しかったのですが、（インターンシップのブログ記事にも書いてますが）ドキュメントをしっかり活用できてなかったという後悔がありました。

なので今回はしっかりとドキュメントを見て、コードを書くことを意識し、なるべくサンプルコードに頼らない開発を行いました。

ドキュメントを活用することによって、わからないことが出てきてもドキュメントを熟読すれば大体のことは解決するようになりました。

そして、なにより、コードを書く際に「ドキュメントをみる」という一呼吸置く作業をすることによって勢いに任せたコードを書くことが減り、自分の考えを持ってコードを書けるようになったので、なにかしらのエラーが起きた際に、「どこでエラーがでてきたのか」ということがすぐにわかるようになりました。

これからについて

Vue.jsはこれからも触っていきたいですし、Laravelとの相性もいいのでLaravelのフロント側に利用したいなとは思っています。

そしてフロントエンドについても、Webpackやパフォーマンスチューニングなど、もっと勉強したいなと思うことができたのでそちらについても学んでいきたいと思います。

フロントエンドの難しさに気づかされたWeb Speed Hackathon

はじめに

2月6日（土）～2月7日（日）の二日間にかけて、サイバーエージェント社主催の Web Speed Hackathon に参加しました。 結果としては57.45点で15位を記録して終わりました。

フロントエンドは全然触ったことがないので、自分がどれくらいできるのかとても不安だったのですが、思ったよりもできていたのでよかったです。 前日に過去の問題の解説を読んでいるときは Space Cat になってしまったのですが、実際に競技に取り組んでみると意外と Space Cat にはならなかった印象があります。 f:id:jdkfx17:20210209152234p:plain

また、競技中は Webpack に悩まされたり、パッケージの依存関係に悩まされましたが、先述の通り過去の問題の解説があったので、そちらを参照して今回の問題でも対応できそうな部分を変えていきました。

ハッカソンに関するルールや内容などは同じく参加した方のブログを参照してください。

kaaazu.hateblo.jp

やったこと（時系列）

書いていることが若干違う可能性がありますのでご了承を。 （違っていたらリプライください）

  • NODE_ENV=development -> NODE_ENV=production
- "build": "cross-env NODE_ENV=development webpack",
+ "build": "cross-env NODE_ENV=production webpack",
  • Webpack ( Source Maps, Mode ) の変更
- mode: 'none',
+ mode: 'production', // or mode: process.env.NODE_ENV,

- devtool: 'inline-source-map',
+ devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
  • PostCSS ( Source Maps ) の変更
- map: true,
+ map: false, // or map: { inline: false },
  • PostCSS ( postcss-custom-properties ) の変更
+ const postcss = require('postcss');
+ const postcssCustomProperties = require('postcss-custom-properties');

// ...

+   postcssCustomProperties({
+     preserve: false,
+   })
  • PostCSS ( postcss-calc & cssnano ) の追加
+ const calc = require('postcss-calc');
+ const cssnano = require('cssnano');

// ...

+   calc(),
+   cssnano(),

  • Lazy Loading の追加

  • JPEG を WebP に変換

  • GIF の最適化

  • useBuiltIns の変更

-       useBuiltIns: false,
+       useBuiltIns: 'usage',

これ以上は難しいと思ったのでここで断念。

やりたかったができなかったこと

  • CSS の最適化

  • lodash の消去

  • bluebird の消去

  • 静的ファイルの配信を最適化 ( Fastify の導入 )

最後に

もし前回の解説がなかったら今頃 Space Cat になってただろうなと思っています。

また、今回の競技に参加して、自分のフロントエンドに対する考え方が少しだけ変わった気がします。

次回に向けてですが、Webpack についてもう少し詳しくなっておきたいということと、解説内で使われたパッケージについてしっかりと調べておきたいです。

とても楽しかったのでまた開催されることを楽しみにしています。

2020年を振り返り、2021年での新たな目標を立てる

あけましておめでとうございます。

昨年度は色々な方にお世話になりました。

滑り込みでポストしたかったのですが、間に合わず新年を迎えてからこの記事を書いています。

さて、昨年の目標などを振り返ってみて、どうだったか、そして今年はどのような歳にしていきたいかということについて書こうと思います。

 

昨年について

新型コロナウイルスにより家から出ることが少なくなった年でした。

また、個人的な事情で言えば自分の不注意による大きな怪我をするなど、あまりいい歳ではなかったという印象でした。

学内での活動

新型コロナウイルスによって大学もオンライン授業に変わり、生徒が先生と対面で授業することがすくなくなってしまい（後期は最初は対面であったが広島市の新型コロナウイルス感染者数の増加により、またオンライン授業に戻ってしまったのであった）、生徒間、先生間の距離がとても遠く感じる学校生活を送った気がします。

学校に通わないということにより、昨年言っていた「学内コミュニティを形成し、学内でより開発のしやすい環境作りを設けていけるよう切磋琢磨していきたい」という目標もうまく動かすことができませんでした。しかし、学内の（特に研究室の）Discordグループにて元同期や先輩たちと交流することで割とそれなりにはコミュニティらしきものには参加はできている状態であったかなと感じます。

学外での活動

昨年の目標であった技術カンファレンスでの登壇などは叶わなかったのですが、学内の活動としては色々と活動できたかなと感じています。

個人開発

広島工業大学休講情報Botの作成をおこないました。PHPで学内のポータルサイトをクローリングして情報を取得してツイッターに通知するという簡単なシステムですが、ライブラリを使用したり、自宅サーバーで動かしたり、自分的には勉強になることがたくさんあったかなと感じています。

インターン

数社行くことができました。インターンで学んだことは今でもしっかりと活用させていただいてます。インターンに行くことによって自分の直さなければいけないところなどがすごく浮き彫りになってきて、とても自分のためになったかなと思います。

コンテスト

ビジネスコンテストに参加してみました。前々から考えていたアイデアだったのですが、最優秀賞という素晴らしい賞をいただきました。よりアップグレードさせて自身の製作物にしていきたいと考えています。

 

2021年はどんな年に？

2021年ですが、昨年のように大まかな内容で目標を立てるより、具体的な内容（できれば数字で表せるような内容）で目標を立てていきたいと思います。

2021年の目標はこんなかんじですかね…

  • 作って理解するOSを読み切る

2020年、積んでいました

  • OS自作入門を読み切る

2020年、積んでいm((ry

  • コンピュータシステムの理論と実装を読み切る

2020年、積んd((ry

  • 自身で好きな言語を使ってOSを作ってみる

自作OSを自分ができる言語でやってみたいという夢があります。できたらカッコええだろうなというとても下心丸見えな目標ですが、それなりに勉強をしなければ行かないだろうと感じています。

2020年、積((ry

できれば関東圏の企業に勤めたいです。

  • ガソスタのバイトを辞める

はい、やめます。時間の無駄です。

  • 不動のオフ車をレストアして走れるようにする

バイクについても整備の知識をしっかりと身につけたいと感じています。

意外とやりたいことがたくさんあってできるかどうか不安ですが、少しでも多くのことに取り組んで達成していければいいかなと思っています。

 

最後に

2020年は本当にいろいろな方にお世話になったと思います。

今年もよろしくお願いいたします。

 

TDD challengeに参加してテストを書いてきた #mixi_TDD

はじめに

10/24（土）にミクシィさんの主催で行われたTDD challenge #5 onlineに参加したので、その内容と感想などについて書いていこうと思います。

mixi.connpass.com

 

このイベントはテスト駆動開発/設計についての講義とペアプログラミングでの実習がメインとなっているイベントでした。

 

参加した経緯

PHPカンファレンスなどのイベントに参加していると、テストという言葉をよく耳にしています。が、しかし、実際にはテストのテの字もわからない状態で、自分もテストをかけるようにはなっておきたいなと普段から感じていました。

そんななか、ちょうどよくイベント開催の通知が来たので参加することにしました。

 

演習

TDD challengeで出される課題はようは競技プログラミングのようなもので、決められた要件に見合ったコードを書き、そのコードにいくつかの特定の値を渡して、その値が実装したコード上で要件に見合った動作をしているかどうかを試していくというものでした。

 

実装する→テストを書く→テストが失敗する→実装とテストを見直す→テストが通る→うれしい

 

こんな感じの作業を繰り返していきました。

 

ちなみに、言語はRubyを用いて@anekoooくんとペアプロをしました。自分はRubyを触ったことがほとんどなかったのですが、@anekoooくんがいろいろとやってくれて結構助かりました。

 

感想

  • これまでテストを書くという行動について「難しそう」、「しんどそう」という印象がとても強かったが、そうでもなかった
  • テストを書くことによって、実装の矛盾点に気が付けるようになった
  • テストコード自体が要件の仕様書になってくれるのでコードを見ながら要件を考えたりしなくてもよくなった

 

これからについて

テストについてしっかり学ぶことができたので、これからは自分でテストコードをかけるようになれたらいいと思っています。

また、今回はRubyで演習を行いましたが、PHPでもPHPUnitなどを用いたテストコードを書けるようになりたいと思いました。

 

Vue.jsとAPIを使ってチーム開発をした

はじめに

9/7から5日間かけて株式会社いい生活という会社のサマーインターンに参加しました。このエントリーはインターンで行った内容について書いたものになります。

e-seikatsu.snar.jp

インターンの内容としては、Vue.jsでいい生活社の「いい物件One」と連携するためのAPIを使って、チームメンバーで何を作るか検討し、開発を進めていくというものでした。

 

株式会社いい生活とは

テクノロジーと不動産領域を掛け合わせたサービスを提供する会社です。

今回のサマーインターンも実際の不動産情報を利用してサービスを開発しました。

 

使用した技術やAPIについて

今回のインターンでは主にVue.jsといい生活社の「いい物件One」と連携するdejima APIというAPI、そしてFirebaseを用いて開発をしました。

これらの技術の連携に関してはこのような形になっています。

f:id:jdkfx17:20200914174844p:plain

1日目：オリエンテーション、講義、企画

1日目は最初に配属されたチームで自己紹介を行い、GitとVue.jsの講義、これから作るサービスの企画を進めていきました。

自己紹介や講義の内容は割愛しますが、メンバーの年齢もバラバラだったりして面白かったです。

ちなみにチーム名は「おすし」という名前になりました。（あとでペルソナやサービス名を決める時に重要になりました…）

自分たちのチームでどのようなサービスを作るか決める企画の時間では、まず、対象となるペルソナを決めて、そのペルソナに対するユーザーストーリーマッピングを書き出す作業をしました。

対象となるペルソナはこんな感じでした。

f:id:jdkfx17:20200914175256p:plain

また、それに対するユーザーストーリーマッピングはこのような感じになりました。

f:id:jdkfx17:20200914175406p:plain

これをもとに、次のテーマを定め、実装する機能を選び出しました。

f:id:jdkfx17:20200914175502p:plain

 

2〜4日目：開発

実際に企画段階で決めたサービスの機能を実装する段階に移りました。

僕たちのチームが作るサービスはこのような感じのサービスになっています。

実際に作ったサービスはこんな感じのサービスになっています。

f:id:jdkfx17:20200914175616p:plain

サービス名：SUIU（すし屋のうどんって意外とうまいよね）
機能：

  • 物件の条件検索機能
  • 物件のマップ表示機能
  • 物件の詳細表示機能
  • チャット機能
  • 認証機能

開発段階ではお互いに実装する機能をGitLabのissue機能を使って担当分けをして作業を進めていきました。

自分はチャット機能と認証機能について担当しました。FirebaseのRealtime Databaseを使わず（Realtime Databaseを使うことが推奨されていた）、Cloud Firestoreをいきなり使わせてもらうなど無理を言ってしまって申し訳なかったです。

 

ここから実際に作ったもののスクリーンショットを貼るのですが、実際の物件情報を扱っている部分については隠しています。

 

物件の条件検索機能

f:id:jdkfx17:20200914175848p:plain

画面上部のフォームで条件を指定することによって動的に条件に見合った物件が地図上にピン立てされるようになっており、ピンをクリックするか一覧にでてきた物件のカードをクリックすることで物件の詳細画面にできるポップアップを表示できるようになっています。

物件のマップ表示機能

f:id:jdkfx17:20200914180040p:plain

検索結果を地図上にピン立てする機能です。上記で書いた物件検索機能と連携して動くようになっています。地図の表示についてはVue.jsで地図を表示することができるVue2Leafletというライブラリを使用しています。マーカーを表示したりマーカーをタップしたりすると出てくるポップアップはコンポーネントのLMarkerやLPopupなどのコンポーネントを使い実装をしています。

Vue.jsのアプリケーションで地図を使いたいときはVue2Leafletが一番使いやすいと思います。

物件の詳細表示機能

f:id:jdkfx17:20200914180200p:plain

物件の詳細内容を画面に表示する機能です。ほぼ隠れていますが、右側に物件の住所や間取りといった基本情報に加え、セールスポイントやアピールポイントなどを表形式で表示しており、左側には物件の画像を表示するような画面になっています。また、右下にあるチャットボタンからチャット画面に遷移できるようになっています。

チャット機能

f:id:jdkfx17:20200914180247p:plain

チャット機能では付近の住民やその物件を管理している不動産屋側の方とコミュニケーションをとれるような機能になっています。Cloud Firestoreを利用してチャット情報を管理するようにしました。

認証機能

f:id:jdkfx17:20200914180353p:plain

ユーザーと不動産屋側の方の新規登録やログインをする機能になっています。

また、こちらについてはユーザーと不動産屋側の認証を分けたかったので別々のリンクから登録とログインができるようになっています。

 

使用したUIフレームワーク

今回の成果物に使用したUIフレームワークはVuetifyと呼ばれるもので、Vue.jsアプリケーションでマテリアルデザインを使えるようにしたUIフレームワークです。簡単にそれっぽいUIを実装でき、デザインの手間がかからずとてもよかったです。

また、Vuetifyにはフォームやボタン、カードな多数のコンポーネントが使えることが特徴として挙げられます。

 

5日目：成果発表

成果発表ではお互いに作ったサービスを発表しました。

各チーム面白いペルソナを用意して面白そうな機能を実装しているなという印象を受けました。

中には、ペルソナにサーファーを想定して物件の近くの海岸を検索できるような機能を付けているチームもいて笑ってしまいました。

成果発表の時間ではメンター以外にも社内の方々も見にこられていてSlackで質問をしたり、ワイワイしたりしていてとても楽しそうでした。

 

終わりに

このインターンを通してVue.jsの知識をより深くつけることができました。個人的にLaravelで作っているサービスにVue.jsを使うことがあったのですが、Vue.js単体でサービスを作ることがなかったので、これからなにか自分のアウトプットになるようなものを作ってみたいと思っています。

また、今回のチーム開発ではお互いの進捗を2時間程度といった短いスパンで確認し合うチームミーティングのようなものを定期的に行っていたので自分のチームの進捗状況を全体的に把握しやすく、開発もスムーズに進めることができました。この体験は自分の中でもとてもよかったので、これからまたチーム開発をする際にもやってみようと思います。

また、今回の開発では自分の技術調査の甘さについて感じることが多々ありました。ドキュメントをしっかりと読み込む癖や、ドキュメントに書かれている内容を応用してコードに落とし込む練習をすること、サンプルコードばっかりに頼りすぎないことなどをこれから開発に生かしていきたいと感じています。

 

小噺

インターンが終わって打ち上げ会に参加したのですが、そこでISUCONの話題になりました。ちょうどインターンの最終日の次の日がISUCON予選の日だったので、いい生活のISUCONに参加する方と話したりしました。

ちなみにISUCON予選の問題の内容がISUUMOという不動産サービスに関する問題で今回のインターンで開発したようなサービスだったので笑ってしまいました。