TORICOインターン生のブログです。会社で起きたことについて情報発信していきます。

Viewing posts from June, 2019

インターン24日目!# データの受け渡しに苦労しました。

本日もタスク管理ツールの改修をやっていました。

今日のタスクはデータテーブル上のチェックをつけたキャンペーン情報の情報をメールテンプレートに自動表示するというものでし

たが、チェックをつけた行だけ新たな配列に格納することはできたのですが、それをメールテンプレート側に渡す方法がわかりませ

ん。

Vueのコンポーネントから直接渡すのはあまり良くないらしく、

最終的には新たにtypescriptのファイルを作りそこに処理をかくやり方でやるのですが、一度情報をvuexを使ってstoreから取ってきた

り、新しく作ったtypescriptのファイルから新しいクラスを生成して新たな型を作ったりなど、新しいやるべきことが盛りだくさんの

一日でした。

あとはエラーが起きた原因を調べる方法で,エディターが怒っているところをみる(webstorm使用)やchromeの検証のconsoleをみ

る、console.logをみるなどの方法を取っていたのですが、

今日は新しくdebuggerを使ってエラーを確かめられるようになりました。便利すぎたので今後がっつり使っていきます

インターン23日目!# 日付処理

こんにちは、今日も社内タスク管理ツールの改修です。

本日はバナーの発注するときに呼び出されるメールテンプレートの改修をしていました。

締切日を自動的に表示させるところで、当初は普通に締切日をそのまま表示させていたのですが、二日前かつ営業日に表示を変えて欲しいとの声をいただいたので、それについて考えていました。

二日前だけなら簡単なのですが、そこに休日ではないという条件が必要です。

そこでプラグインを探すわけですが、koyomi.jsという営業日を色々といい感じにしてくれるものがあったらので、それで実装することができました。

途中でつまずいたところでは,

このプラグインはjsで今はtypescriptで書いているので、importでの読み込み方がよく分からなかったことです。

最終的にrequireで読み込んでくれたので良かったですが、importを使った方法はないのでしょうか・・・笑

次の改修ではついにVuexと戦うことになりそうです。

続く。

インターン22日目!# バグ修正

本日もまたタスク管理の改修作業です。

ついにデプロイされたので、ユーザーのフィードバックが返ってきます。

やはり人に使ってもらえると自分では気付けなかった不具合などが見つかりますね。

自分で作っているときは結構自分好みで作れるところがありますが、フィードバックから生まれるタスクは相手の要望をより汲み取る必要があるので、

少し自分が逃げていたような開発に向き合わなければなりません。

本日は検索した言葉が含まれるタスクを編集しているとランダムでその編集画面が消えてしまうというものでした。

最初はそのエラーがいつ起きているかも分からなかったですが、実際にエラーが起きているところをヒアリングした結果、

編集している間に検索したワードに一致している部分を消してしまうと検索条件から外れてしまい、検索結果から消えてしまうというものでした。

解決自体はシンプルなコードでしたが、そもそも今回はどのようなエラーが起きているか自体が分からなかったので、最近はvueがちょっとできるようになって画面にのめり込みがちですが、コミュニケーションを忘れてはいけないと思った日でした。

続く。

インターン21日目!# 出来るようになってきた感じがします。

ついにインターンも21日目になりました。

最初は環境構築から始まって、初めて使うフレームワークも言語も意味がわかりませんでしたが、最近は少し慣れてきたようで、ただネットの記事を丸コピレベルから

自分で少しオリジナルのコードが書けるようになってきました。

こうなると自分好みの機能とかが作れるようになってくるのでプログラミングが楽しくなってきます。

最近はある条件の時、セレクトボックスとかを出すといった処理をよく書くのですが、

変数作って

真偽判定するコード書いて

その時にif文でその部分を出す。

みたいな自分の中で定番処理が出てきました。

持ちネタが増えることで迷う時間も減りました。そしてまた新しいことを覚えようとする余力も出てきますね。

今日はVue.jsでリアクティブなプロパティを動的に追加するとこでつまずきましたので$setとかそこらへんを調べていこうと思います。

次回に続きます!

インターン20日目!# 実装

本日は前回の続きをやっていました。

ある情報をまとめたデータリストがあってチェックボックスにチェックをつけると、それらのプロジェクトの進行状況を一括で変更できるというものなのですが、

<v-checkbox>でチェックボックスを作り,v-modelでチェックした複数のリストを取得し、

進行状況の初期値を変数に入れておいて、取得したリストがidと合致する時が、ループさせて状態を変化させているうちにあったら、v-selectitemsに対応する値で進行状況を書き換えるということをやりました。

今までで一番書けたのですが,プロミス処理が分からなかったのでそこを補強しようと思います。

インターン19日目!# 分かってきましたけど、動かない

インターンも19日目となりました。最初はまだ来て数回かとか思っていましたが、時間が過ぎるのは本当に早いですね!

それから先日、社内全体の飲み会に参加させて頂きました。

会場は池袋虜だったのですが、室内、出される飲み物、料理とも全部おしゃれで感動しました。

ゲームも楽しかったですし、幹事さんたちに感謝です。

業務の方ですが、最初は何がわからないかわからないぐらいのvueでしたが、最近少し慣れてきまして、関数も自分で組み立てられるようになってきましたし、コンポーネント間の情報の受け渡しもできるようになってきました。

しかし、それでも作るべき機能の実装は難しいです。

今までは言語自体に苦しまされてましが、最近はロジックで悩まされています。

あと、最近タイピング効率化を推奨されており、私はプラインドタッチは日本語打つところは問題なくできるのですが、記号とかはブラインドタッチができません。

今度は完全なブラインドタッチをしようと、今は手が拙い感じになっています笑

色々やるべきことが見えてきて、楽しいですね。

それではまた次回に続きます。

インターン18日目!# フィルタリング機能

今日はタスク管理ツールにジャンルごとに検索できる機能の実装に取り組みました。

実はフィルタリング機能自体は前回も作ったのですが、関数の作成などは自分だけではなかなか難しく、手伝ってもらいながら、そのロジックに追いつくのに必死でした。

今回は他のページにもまた別の検索機能を実装するのですが、問題発生・・・

他のファイルから取ってきたいデータをなかなか読み込めません・・・

どうしてもエディターの方で怒られてしまいます。

取ってきたいデータは配列が入ってくる配列がありまして、その中の配列の要素の中にまた、配列が入っている配列がありまして、その配列に要素にfilter()機能でアクセスしたいのですが、混乱してきますね・・・

僕にはまだ時々、jsで配列とオブジェクトが混ざってしまうことがありまして、いい加減そこらへんに慣れていきたいと思った一日でした。

今日、オライリーのJavaScriptの本を借りることができましたので読み込もうと思います」・・・続く。

インターン17日目!# Vue.js TypeScript

今日は今まで作っていた管理ツールの機能調整についてのミーティングから始まりました。

今まではひたすら、与えられたタスクに取り組む形が多かったのですが、そのツールを使う方達も含めて話した初めての機会です。

今までは機能実装以外に考えることはより綺麗なコードをどう書くかや、パフォーマンスなど画面と向き合って考えることがメインでしたが、

ミーティングをすることで実際のユーザーの使ってみての感想を聞けますし、チームでより良いものを作っていこうというモチベーションもシェアされますのでいい経験になりました。

そのミーティングで改修するべき新しいことが出てきましたので、それについて取り組んでいました。

僕はいつも条件を書く時、if文で書き始めてしまう癖があるのですが、冗長であることが多いです。

今回実装しようとしたのは、ある〇〇が真もしくは偽の時を判定するものでしたが、

今日の業務を通して、!!を前につけることで真偽型を返せるテクニックを身につけました。

あと悩んでいたところがあって調べていくと、どうやらVuexの知識が必要のようです。

state/mutations/commit/actions/dispatch/this.$store

わからないことばかりだったので、そこらへんを勉強していこうと思います。

インターン16日目!# AWSに触ってみた

本日は最近やっているタスク管理ツールの方がひと段落したので、レビューをしてもらっている間に久々に別のタスクが振られました。

巷でよく聞くAWS(アマゾンウェブサービス)のデータベースのバックアップをPythonによる自動化です。

Pythonで自動化というのは、いかにもpythonらしいことをやっている感じがしてやる気が出ます。

しかし、自動化のやり方が全く想像つきません。

コードでもあれば、それをひっぱて来れば良さそうですがAWSは当然ですがGUIです。

データベース自体の作成はコマンドラインを使うこともなく画面上でサクサク進みますが、実際にバックアップの動作をどのようにコードに落とし込むか迷います。

そうしたらpythonAWSを操作するライブラリboto3というものがあることを知り、全部を自分で書き上げられたわけではないですが、そのAPIを使ったらあっと言う間に実装できました。

用意されている機能を書くだけで、実際にバックアップのボタンを画面上で押した時に〇〇するみたいなことを考える必要もなく、少し自動化についてわかった日でした。

あとはgit stashなどの操作も覚えてきました。

次回に続きます。

インターン15日目!#コンポーネントを作っています

本日も社内タスク管理ツールの改修作業を引き続き行いました。

今日のタスクのいつもと違うところは、今までは表示する文字を変えたり、色を変えたり、する、もしくは機能を新しく付け加える等でしたが、今回は一からコンポーネントを作っています。

最近、タスクに取り組んでいて思うことは、色を変えるなどの単純な変更は、技術的にも簡単ですが、やるべきことを把握するのも容易です。

しかし、機能を新しく作ったり、新しいページを作ったりする際には、作って欲しい相手の要望をしっかり把握することが必要です。

そうしないと条件文なども書けません。

エンジニアは黙々と作業しているイメージがありますが、ちゃんとコミュニケーションも求められる仕事だと肌で感じました。

コンポーネントを作る上で、一番苦しんだのが、やはり元あるデータの受け渡しです。

表示したいものを作っているファイルに取り込む上でimportexport、またはtypescriptを使っているので@propの登録などがあります。これが自分の中ではきちんと書いているつもりなのですが、なかなか認識してくれないことがあります。

コンポーネントを作るのは今までの総合復習みたいな形で取り組んでいますが、しっかり内容を噛み砕いていこうと思います。

インターン14日目!#関数を作っています

社内タスク管理ツールの改修を始めてからしばらく経ちます。

最初は少し既存のコードを書き換えるだけのもので簡単でしたが、最近は自分で関数を作って処理をしないといけないので自力でコードを書く力が求められます。

特にJS, TypeScript, Vue.jsどれも書き方が同じわけではないので、いまだに混乱している自分がいます。

今回はある質問があって埋まってないと、そこの色を変えるというものだったのですが、

関数を作る上で、メソッドの使い方がわかっていない、しかもその原因が、オブジェクトと配列が同じものに見えてしまい、うまく使うところを指定できない。

次に埋まっていないところをあぶり出す条件。

これらに苦労していましいました。

そしてこの関数が出来上がったら、見た目に反映すためにこの条件が真の時、新しいクラスをSCSSに付け加える作業をするのですが、1つのタスクにかなり頭を使ったので、またしても混乱してしまいます。

やはりここら辺は定番の処理のようなので、ここら辺で体力を消耗しないようにして、テキパキと進めていくのが今日の反省でした。

インターン13日目!# 初めてPCを組んでみた

今日もいつも通り改修作業と思いきや、サプライズがありまして

突然、PCを組んでみないかと言っていただき、PCを組むことになりました。

目的は社内Kubernetesを運用するためだそうです!

初めて聞く言葉ですが、やたらにカッコいい響きです。

どうやらこれは、インフラツールのようです。

初めてPCを組むわけですが、デスクトップの中身は意外とスカスカですね。ものすごい大きなイメージの割にです。

まずは基盤のマザーボードに繋いであるやたらに多いコードを外していきます。

そして基盤を取り除いた後は、

新しく購入された

マザーボード

CPU

メモリ

SSD

を繋いでいきました。

精密機械なので慎重に扱います。

一番難しかったのはマザーボードとパソコンの外見の電源コードをつなげる作業です。

非常に細くぱっと見ではどこに挿せばいいか全くわかりません。

しかし、他の皆さんはケーブルを見ただけで、どれを繋ぐか分かっていて、なんで知ってるんだ・・・ってなりました。

やっと起動して、画面にwindowsでもMacでもlinuxでもない画面を見て感動しました。

次回からは改修作業に続きます。