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

Viewing posts by 保坂俊太

インターン50日目!# 原因がつかめない時

新しい改修タスクが毎日来ます!それはどんどん使いやすくしていく訳なのでそれはいいのですが、

困るときは改修したことで今まで動いていたものが、動かなくなってしまったときですね。

もしある改修をしていて、他の機能に影響が出そうな場合はコードを自分自身が追っている訳ですから、事前にトラブルを避けようとする訳です。

でもトラブルが起きてしまうということは、自分では気づかないところで影響が出ている訳で、

そこの原因をつかむのに苦労しています。

最初はメソッドを作るのが辛いとか思っていましたが、最近は楽しくなりまして、

フロントエンド覚えること多すぎと思っていた時期は、 普通にお勉強したら抵抗感がなくなって来ました。

次はエラー場所を見つけるのになれることがタスクですね。

こちらは本日のランチです。トラジです。

夏休みということでしばらくお休みをいただきますが、インターンはまた復帰して続けます。

インターン51日目!# どハマり

Vuetify data-tableでソートをかけるとチェックボックスが全部うまるエラーや、unit-testをかけるタスクなどにどハマりしてて、今日は進行具合がイマイチです。

本日はスロットとemitらへんをできるようになりました。

最近は、今までよくわからなかったものの意味がわかるようになってきたのがやり甲斐です。

金色のガッシュベルという漫画がありまして、レベルが上がると魔本の読める部分が増えて、使える技が増えるという設定があるのですが、そんな感じです。

結構よくわからないまま書いてしまうので、理解しつつ進めてかつ、実装スピードもあげていけたら最高です。

続く。

インターン50日目!# vuetify

今日も引き続き、社内タスク管理の続きです。

Vuetifyでデータテーブルが作ってありまして、列ごとにチェックボックスをつけてあり、そこをチェックするとその情報を取ってそれがメールテンプレート に反映されるというものなのですが、

ソートをかけると、チェックボックスが全部埋まってしまう不具合がありまして、それを直そうとしています。

最初は結構すぐ行けるかと思いきや難しいですね、公式ドキュメントのサンプルを丸パクリしても直りません泣

ソートをかけるとなぜかチェックボックスが反応するのですが、見た目だけ反応していまして、それでメールテンプレート を引き出しても、その列の情報は入っていません。

なんだかんだ時間をかければ少しはわかってくるのですが、今回はなぜかどハマりを起こしている気がします。

それでは明日に続きます。

前回のメールテンプレート に画像を添付する機能はこんな感じで仕上がりました。

インターン49日目!# うな重

今月のランチ会は何を食べようかという話になり、うな重を食べに行くことになりました。

せっかくの夏ですし、ランチから3000円もするものはこういう機会がないとなかなか食べに行けないですね。

九段下にはオフィスから徒歩10分圏内に意外とうな重をやっている店がたくさんあります。今回行ったところは大盛りオプションがあったので、それを食べてお腹を膨らませました。

さて、今回のタスクではメールテンプレート の画像貼付機能にドラック&ドロップ機能を付け加えました。

Input type=file で情報が欲しいときは、 event.target.files からファイルを取得でき、ドラッグ&ドロップの場合は、event.dataTransfer.files で取得すること

Input type=fileの見た目はcssで変えられないのでdisplay=noneで消して、labelタグで挟んでcssかける

らへんを学びました!

続く。

インターン48日目!# メールテンプレート に画像貼付&プレビュー機能つけました

夏休み毎日働いております保坂です。

今日やっとメールテンプレート の諸々の実装が終わりました。長かったです笑

最近は今までドキュメントなどを読みましても、よく分からなかったものがわかるようになり、技術書を読むのが楽しいですね。

ドキュメントを読みましても「何言っているんだ・・・こいつ」状態だったのですが、前書いたあれのことか!や、

この前書いたコード、es6のこの書き方使えばもっと楽に書けるやん!となっています。

まだ全然ですが、jsは何かを作ろうとなっても抵抗感がなくなってきましたので、次はvuetypescriptの仕組みをもっと実装を通しながら理解していきます。

インターン46.47日目!# 自分で何か作ってみようかと

世間はお盆ですが、毎日通っています。

最近、改修は一通りできるようになってきましたが、やはり0から機能を実装するとなると、手が止まることが多いですね。

なんとかする方法としては一部分だけを考えるのでは間に合わなくなってくるので、思考を整理するノートみたいなものも必要です。(当たり前ですねかね)

あとはやっぱり何か自分で作ってみるということですかね。

最初は作りたいものと言っても何がそもそも作れるかわかりませんでしたし、分からないことが取り組むに当たって大きすぎて僕の性格にはきつかったです笑。

そろそろ自分でも何か作れるだろうという自信と、そうすることで現時点で足りていないものを効率的に取れる気がしますので、

ブログでも作ってみましょうかね、pythonもありです。

続く。

  

インターン45日目!# ドキュメントがわかるようになりました。

今日もvue.tsを書いていたのですが、実装が難しいところがあり、ググっていたところ、typescriptではなく、javascriptで書かれていることばかりで、あまり参考にならず・・・

それでもjsが書いてあるならあとはそれをtypescriptに置き換えて書けばいいだけですから、できそうですよね。

それでもなかなかできなく、今考えるとすでに用意されているものでしたら、それなりにできるようになってきましたが、1から作るケースや生JSを参考にしないといけないケースの場合、に対応できてなかったのです。

何せ、働き始めて、typescript ばかり書いていて逆にjsは見慣れておりませせんでしたので。

本当に基本文法知っているだけで、最近es6の文法とかを吸収してます笑

ということでググっていても正直なぜこのコードを書いているのかわからないため埒が明かず、基本に戻ってドキュメントを読んでいたのですが、

前まで何を言っているか全くわからなかったドキュメントが理解できるようになっていまして驚きました。

これはコードが書けるようになるまでは

ドキュメントを読む

意味がわからない

作りたいものをとりあえず、よく分からないけど実装する

あとで説明を読む

この順番でやるのがいいかもと思った1日でした。

インターン44日目!# トリコに来てからの変化

今日は前回実装したメールテンプレートに配布ファイルをつけて送る機能に今度はそのプレビュー機能を

追加しようとやっていました。

Dom操作しようとすると、document.getBy…とかつい書きたくなってしまいますが、

Vueなのでcomponentv-forで回すとかそういう発想をできるようになりたいですね。

いつも普通の記事ばかりなのでたまにはここに来てからの生活の変化でも。。。

エンジニアチームでは月に1回ランチ会で美味しいものご馳走していただける機会があります。

そのおかげで、今までスーパーで半額の弁当しか食べていなかった生活が

かなりマシになりまして、そのランチ会を毎月楽しみにしております。
before
 

after
 

やはり美味しいものを食べるとそれだけで元気になりますね。

明日に続く。

インターン43日目!# メール送信機能に添付ファイルつけれるようにしました

相変わらず、社内タスク管理ツールを改修しております。

発注情報をこのツールからgmailに送るような機能を以前実装したのですが、

今度は画像を添付できるようにしてほしいとの要望があり、それの実装をしていました。

Gmail apiを使って送っているのですが、送信内容を作るには自分で

Mimeデータを書く必要がありました。

最初は適当にネットで拾ってきた情報を書いていたのですが、どうやら改行なハイフンやら色々なルールが意外とあるらしく、

それの書き方に苦戦しました。

そのあとはエンコードをしうる必要がありFileReader.readAsDataUrlメソットやBase64multipartらへんの知識が増えた1日でした。

そんなかんだで添付ファイルをつけられるようになりました。

これのブラッシュアップを次回やっていこうかなと思います。

インターン42日目!# フロントに戻りました。

Python をやり出したましたが、フロントの改修が入り、vueに戻ってきました。

少し時間をおいて、思ったことがありまして、

今までずっと同じプロジェクトを見てきましたが、それのせいか本当に自分が新しくできるようになったこともあれば、

見慣れすぎて、なぜかよく分かっていないけど書けるようになった部分がありました。

前ならできそうなことが、あれ、これどうなっているんだ?ってなるわけです。

そうなると、また埋めた方がいい部分というところが見えてきます。

冷静に見直せるのがいいところですね。

本日のタスクではメール関連の知識が必要になりました。

今までコピペで済ましていた

btoa(unescape(encodeURIComponent(subject)))

'MIME-Version: 1.0',

'Content-Type: text/plain; charset=UTF-8',

'Content-Transfer-Encoding: 7bit',

rfc822

らへんと現在戦っています。

また明日に続きます!

インターン42日目!# ラズパイ組み立てました

本日は作業をしているとAmazonから荷物が届きました。

中身はラズペリーパイというもので最初は何か美味しいそうなスイーツが届いたのかと

思いましたが、違いました。パソコンでした。

ラズペリーパイはググったところ、安価なパソコンとのこと。

組み立てをやってみましたが、メモリーカードとマウス・キーボード、hdmiのケーブルをつないで電源供給すればいいだけなので

あっという間に起動できました。 

起動してみましたら、とても簡略的なwindowsみたいなUIでして、見た目もいいですし、ターミナルもすぐに開くことができますし、chromeも立ち上がりますし、Coolです。

インターンを始めてからパソコンの組み立てをさせてもらえるのがtoricoの特徴?なのでしょうか。

さて、これは大阪のイベント会場に持ち込まれるみたいです。

自分でももう一台パソコンが欲しくなったら、金欠なのでラズペリーパイ欲しいですね。

ということで今日はラズペリーパイが安い、簡単、可愛い!の三拍子が揃ったものだということが分かった1日でした。

インターン41日目!# いい運動しました

本日はいらなくなった資材の移動のヘルプをしていました。

結構重くて大きいものを階段を上下して運んだのですが、夏なだけあって汗だくだくになりました。

普段は運動不足気味なので、いい機会になりました。

さて、プログラミングの方ですが、サーバーサイドは覚えることがとても多いですね笑

本日はテキストの操作して、それをdatetimeを使って文字列をdatetime型に直して営業日計算をすることをしていました。

あとは、自動テストをやったりと、一気に新しいことがどーんと来て混乱することもありますが、やっぱりただ教材で文法を写しているだけと比べると、

無理矢理でも慣れていっている感覚がします。

もう少ししたらまた結構Djangoが書けるようになっていることを祈ります。

インターン39/40日目!# python

Djangoのためにpythonの基礎からやり直している保坂です。

Python 簡単ってよく聞きますが、個人的にハマりどころが多いなと思います。

例えばfor-else文は laravelpythonでは挙動が違うらしいですし、

辞書型はjsでいうオブジェクトに似ているので、同じかと思いましたら違いますし、type()で型判定したら

Class ——って出てくるのでpythonでは型はclassなの?とか思ったり

トリプルクオートで複数行のコメントアウトかと思ったらdocstringとかいうものでした

あとは

__init__.py , __name__, __main__ここら辺は暗号にしか最初見えなかったです笑

ということで新しいことを始めると、一気に新しい知識が増えるので、頑張っていきたいです。

インターン38日目!# Django難しすぎ

本日からDjangoをやり始めました。

久々に触ったのですが、python自体をよく知らないままDjango入ると結構難易度高いです。

しかし1日中見ていたら、だんだん今までやっていたjsの共通部分が見えてきまして、ましになってきた。

Djangoをやって一番難しいなと思ったのはプロジェクトのディレクトリ構造ですね。

今までvue cli, laravelあたりはディレクトリがなんとなく、どういう規則で配置されているかとか、ファイルの中身とか推測しやすいですが、

Djangoは個人的に複雑に感じます。

例えば__init__.pyというファイルはいたるところに見かけますが、そんなに初期化する必要があるファイルばかりなのかとか思いますし、肝心の中身は空っぽですし、よくわかりません。

あとはpycharmを使っているのですが、このIDEの設定が難しいですね。。。

インターンの入りたてに戻った感じです笑

こういう時にはタスクを通じてひとつずつ覚えて慣れていくのがいいですね。あとは普通にpythonの概要をもう一度おさえようと思います。

インターン36・37日目!#そろそろpythonをまたやり直します

最近は社内タスク管理ツールの方の改修も、社内の方達ともコミュニケーションが取れるようになってきたので、

仕様の方の把握もスムーズに済むようになったり、改修も自力でやれるようになってきました。

残っているタスクを確認しましたら、残りはサーバーサイドを扱う必要が出てきましたので、今までvuetypescriptに絞ってきましたが、ついにサーバーサイドの方も

手をつけ始める時期が来ました。

( フロントはvue+typescript、サーバーサイドはDjango です)

今までwebアプリケーションを一人で構築する力があまりなかったので、これを機に作れるようなれると思うとかなりこれからが楽しみですね。。

ただこれで晴れてサーバーサイドに移れるかと思いきや、今日は日付を扱う場所でどハマりしまして、

日付の計算に苦労しました。ただ解決してみると数学的に難しいというよりは、そういう処理の考え方、発想がなかったのでこれも結局慣れの問題だと思います。

今後も頑張っていきます(出勤数が増える予定です)

インターン35日目!#メールテンプレート 画面で編集できるようにしました。

長らくこのタスクをやっているイメージですが、最近は大体の機能は実装できていて、実際にデプロイされたものを

使ってもらって、抜けていたところを改修、もしくはbuildできるようにしたりlintをかけたり、気に入らなかったデザインをscssで調整していたりしていました。

今日はtypescriptnom install したモジュールがtypescriptに対応していないと

Importでかけません。

対処法としていくつか方法があるのですが、

まず nom install @types/…で入れるタイプはまずそんなものは存在していないよ。とはじかれ

コメントアウトで触れておけばエラーが出なくなる、requireで書くものは今回コンポーネントを取り出す上で、書き方がよくわからず

最終的にはsrcの下に@typesを作ってそこにdeclare  moduleで宣言して、それだけだとこの場所がわかってもらえないのでtsconfigを修正してimportで書けるようになりました。

あとはscssで調整しているときに、 componentに書いたscssはブラウザの検証ツールで見るとタグがかなり変わっていますので、検証ツールから読み取ったタグをscssで書いていくのですが、vuetifypropによってタグが変わったり、そもそも長すぎてよくわからなかったり、ひどいコードになってしまったので大元のタグにclass名を振ってまとめました。

時間がかかってしまいましたが、手が止まってしまう時間は短くなってきた気がします。

インターン34日目!# 試験期間終わったらリフレッシュとプログラミングの勉強しようと思いました

今日も社内タスク管理ツールの開発をしていました。

前回問題だったメールテンプレート の確認画面を出すところですが、自作のコンポーネントを作るのもいけそうでしたが、最終的にネットから拾ってきたものをnpm installしてそれで作りました。

メールテンプレートを表示するだけではなく、編集するタスクに関しては、前回v-for文で表示されたものはtextarea内では読み込めないという問題があったのですが

そこは新しくからの変数を作っておいて、そこにslotの内容を入れてから、その変数をvtextareaで表示することにしました。

vmodelで情報を連動させればテキスト画面で編集してもそれがそのままメール内容として送れるのですごい便利です。

一箇所度ハマりしたところがあってv-model= this.変数って書いていたのですが、ずっとそれでは読み込めずこれに気づくのにかなり時間がかかってしまいました。

ただググるだけではなくて挙動も詳しくならないとダメですね。

夏休みに入るのでリフレッシュしながら勉強しようと思います。

インターン33日目!# できそうでできない

相変わらず、社内でのタスク管理ツールを開発している保坂です。

最近はできそうでできないものに苦戦させられています。。。

本日は

1:発注メールを送信するときに文に訂正があったら、そのメールテンプレートを編集できるようにするというものです。

メールのテンプレートはvueslotで作って、その中で配列とかに格納した情報を自動表示するなどしているのですが、それを編集そのままできるように、

textareaで囲みました。

Slotの中にtextareaを使ってもpreタグを使っても読み込みますが、その中にv-forで回しているtemplateタグがあると急に動かなくなりますね・・・

まずはそこを解決しなければなりません

2:次に発注メールを送るときに確認画面が出ないので、モーダルを出したいのですが、既にモーダルで出しているのでまたモーダルで出すとくどくなりますね。

Vuetifyでそれらしきものは確認できず・・・新しくコンポーネントを作ったのですがimportexportも問題なしなのに表示されないので、

そこらへんを次回考えていきます

インターン32日目!# やるべきことが尽きません。

エンジニアという仕事について、ある疑問を思ったことがあります。

作り終わったあと、エンジニアいらなくなるのではないか。という素朴な疑問です。

改修するところが出てくるとはいえ、そんな常にエンジニアって常にいなければならないのかと思っていました。

特に会社など1つの場所で働く形態の場合。。。

昨日、タスクツール管理を完成させて、使ってもらうと次々に直すところが出てきます。

直すところがなくなってもより良いものにするためにやることは出てきます。

新しい技術が出てくれば、それに対応させる必要も出てきます。

つまり、常に何かやることがあるのが、この仕事です。

結構エンジニアって性格とか気分で向いているかどうかあるのではないかと思いました。

気分が乗っていたり、楽観的でしたら新しい技術について学ぶのも、何か創作しているのも捗ります。

一方、逆の場合は時にはこれが負担になる時もあるでしょう。

つまり、エンジニアにとってただ技術だけではなくメンタル管理も大事な要素ということをふと思った1日でした。

インターン31日目!# メールテンプレートがついに完成しました!

発注メールのテンプレート自動作成の実装に取り掛かり始めてからだいぶ時間が掛かってしまいましたがついに今日完成しました!

今思うと、これまでやってきたタスクは何か1つできるようになれば実装できましたが、今回は今までやってきたテクニックを総合的に使うことが必要でした。

扱っているのはVue + TypeScript ですが

コンポーネント間のデータの受け渡し方

(お恥ずかしいですが) filterpushなど基本的なメソッドの使い方

Dateオブジェクトを操作

営業日などを入れての日程計算

Vuex

正規表現

クラスや関数を自作

Slotの使い方

Vuetifyの使い方

Gmail API

といったものを使えるようになりました。

といってもサポートもたくさんして頂いたので、もっと自力でできるようにならねばと思った1日でした。

ですが、今日はずっと苦戦してたタスクがひと段落してよかったです。

続く。