インターン
ブログ

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

Viewing posts for the category

インターン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でもない画面を見て感動しました。

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

インターン12日目!# TypeScript

今日も社内のタスク管理の改修をVue.jsでしていました。

しかし今回はどちらかというとvueのファイルをいじる部分が少なく、

TypeScriptをいじらなければなりませんでした。

TypeScriptはインターンに参加させて頂いてから、初めて触ったのですがJavascriptに型づけをさせる印象ぐらいしかありませんでした。

その型をつけるので、stringとかintegerなどの型をつけるのはわかるのですが、自分で作った名前の型も付けれるようで、独自で型なんて作れるのかという所がどうしても腑に落ちませんでした。

そこで今回はそこを重点的に教えていただきました。

そうするとJavaScriptのクラスを作るような基礎的な所がわかっていないこともわかり、

サンプルでクラスを作ってみて、それをTypeScriptに変換しながらすることで、今回わからなかった所が解消されました。

しばらくJS系を頑張っていきたいです。

インターン11日目!# Vue.jsに苦戦しました (3)

今日も社内タスク管理の改修をVue.jsでおこなっていました。

みた目を変える改修が多いのですが、今日あたりから改修するべき部分にあたるコンポーネント名を覚えているようになってきまして、いち早く該当部分を見つけれるようになりました。

入力していないフィールドを色を変えるというタスクをやったのですが、僕は最初、if文を書いて直そうとしたのですが、そうではなくてタグ内にjsの変数を書いておいてtrueだったら色を付けるというやり方を教えていただきました。

真偽値については前から知っていたのですが、実際に使う機会がなく、使ってみると条件を考える上で頭が混乱してしまい、慣れが必要だと感じました。

あと、真だったらクラスを新しくつけるものでjQueryでは書いたことがありましたが、数行書く必要がありました。ところがVue.jsだと一行で簡単に行えたので物凄く楽で少し感動しました。

次回も頑張っていきます。

インターン10日目!# Vue.jsに苦戦しました (2)

本日も引き続き、昨日と同じタスク、検索フィルターの作成をしていました。

今まではコンポーネントの中身をいじってみた目を変えるくらいの業務でしたが、

Typescript が絡んできたり、コピペではなく、自力で関数を作らないといけなくなったりしてきましてかなり難しくなってきました。

しかし、もし一人でこういう作業をしようとしたら、負荷がかかり過ぎるし、わかないところの解決もできないままで、ほぼ不可能だと思います。

少し前はチュートリをやったくらいのレベルで、今もやっていることに追いつくのに必至ですが、こういう壁を何回も乗り越えれば、かなりスキルアップできる予感しかしないので

次回も頑張っていきます。

インターン9日目!# Vue.jsに苦戦しました

本日の業務は引き続き

社内のタスク管理の不備の回収をしていました。

午前中はサクサク進みまして、ヘッダーのメニューを追加したり、あるところをコピーできるボタンを実装していました。

そこで、DRY原則やVuetifyの使い方を学びました。

午後からはあるタスクを検索フォームから探す機能の実装をしたのですが、そこに加えてタスクの種類、日付指定機能を付け加えなければなりませんでした。

今までのcssを書き加えたり、一部分コードを書きなおすだけのタスクに比べると今回のタスクはめちゃくちゃ難しくて、フレームワークの流れを押さえていなければできないものでした。

しかし、これのおかげで大分、for文やif文を書いたりするレベルから進歩できたと思います。

後日も引き続き、これをやっていきます!

インターン8日目!#Vue.jsで改修

最近は社内のタスク管理アプリの改修をやっています保坂です。

今日は会社に来てみると机に新しいMacBook Proが!!

自分のmacUSキーボードなのですが、僕が働き始めた時はUSキーボードを搭載した

Macがなかったので、外付けキーボードを使っていたのですが、ついに新しいMacBook Proが入ってきました。一新されたキーボードやデザインを新鮮でいいですね。

午前中は再びMacの環境設定をしていまして、前回よりはキビキビと環境構築できるようになって無駄がなくなってきたので効率化した気がします。

最近は業務に入れるようになってきて、ただチュートリアルをやっている時よりは断然やり甲斐を感じます。

今回もテキストの文字の色を変えるだけの簡単よりのタスクだったのですが、ただCSSを変えるだけではなく、Vue.jsVuetifyというライブラリを使って変えるもので、そのライブラリをまだ知らなかった僕はそれを使うべきだというのにかなり時間がかかってしまいました。

考えることは必要だと思いますが、時間配分をミスってしまった感があるので、次回はもっと効率化して作業を進めていけるようにしていきたいです。

インターン7日目!# Django

本日のタスクは昨日の続きです。

出勤を管理しているシステムがあるのですが、今年は5月から令和が始まったことで、ゴールデンウィークの休日判定が例年とはズレてまして、それの改修をDjangoでやるというものです。

実務では扱うファイルが多すぎて、まず参照先を整理するのに頭がこんがります。(移動自体はCommand + clickなので簡単ですが。)

まずは今年のゴールデンウィークで休みなのに仕事になってしまっている日をループ文とjholidayというライブラリで洗い出します。

Pythonの文法はかなりあやふやなままなのですが、コード自体はものすごくシンプルなので検索しながらやっていけば問題ないですが、そこに新しく知ったライブラリの機能を組み合わせたりすると難易度が上がります。

それでも、分からないところはちゃんと説明していただけるので、少しずつ理解が進んでいっているかと思います。

改修作業も済み、次回からもどんどん頑張っていきます。

インターン6日目!#Dockerと少し実務

本日はDockerについての講義を受けて、ついに実務に入りました。

Dockerは今、業務で今すぐに僕に必要なスキルではなかったのですが、いつも個人的な環境

構築に苦労してまして、Dockerを勉強しても分からないと事ばかりでしたので、

圧倒的丁寧に今日午前中の時間を取っていただき、教えて頂きました。

そして今までコピペでなんとなく動いていたものを理解しながら再び作ることができたので

かなり成長したかなと思います。


ランチを終えて、

いよいよ実務に初めて入りました。

最初はcssの崩れを直すだけだったので、楽でしたが、次にDjangoを扱うサイトの改修に入

り、チュートリをやっただけでは、やはりなかなか上手くいかずに苦戦中です。

次回はその続きをやります。

インターン5日目!#Vue.js

こんにちは!今日もVue.jsの学習を進めていました。

昨日は公式ドキュメントを読んで、知識はある状態でしたが実際にいじってみようとすると

全く流れがわかっていなく、タブの切り替え機能すらあたふたしてましたが、

一晩経ちましたら、特に昨日詰まったいたRouterの機能や、ViewsComponentの違いが

わかってきまして、なんとかタブ切り替え機能を作れるようになりました。

次回はまたPythonをいじることになりそうです。 毎回新しい言葉が膨大にきて混乱しますが、

慣れればできると思ってやっていきます!

それではまた後日。

インターン4日目!#Vue.jsやってます

こんにちは!今日はゴールデンウィーク明け始めての出勤でした。

前回まではPythonを触っていましたが、今回はフロント側に移りましてVueです。

ゴールデンウィーク中にドキュメントを読んだりしていたのですが、やはり座学だとすぐ忘れますし、覚えるのも単調になってきて、ペースが落ちますね!

ということで実務に早く入れるように実際に自分でググりながら、タブの切り替え機能などを搭載を試みますが、

そもそも根本的にわかっていないところが多くて大苦戦・・・・

Component と viewsの違いや仮想DOMとはなんぞや???など

せっかく良い機会を頂いているので、深くまで理解しながら進めていこうと思います。

それではまた次回に。

最終日

二、三回ブログを更新できなかった国分です。

今日でインターンシップ最終日でした。


最後はほとんどスキマコミックスのページのタブ切り替えの機能を作っていました。




結果こんな感じになりました!

スマホ表示のみ「続きを読む」ボタンがつくようにし、バナーとタブで漫画っぽい感じに仕上げられたかなと思います!






そして、今回初挑戦のVue.js😌


タブ機能をVue.jsで書いていたんですが、もっと読むボタンをjQueryで書いていたことにより挙動がおかしいことに・・・

このことをリリース後に気づき、もっと読むボタンもVue.jsで書くことにしました笑

教えていただきながらやったのでなんとなくはわかるようになったかなと思います!


少しずつ学んでいきたいなと思いました!


タブの改善を行った後は、9社の漫画アプリを比較してUI/UX上のメリット、デメリットを考えるということしました。

この機能はユーザーにとって使いやすいのかどうかということを考えながら比較しました。


9つもアプリを比較するのは結構体力が要りますね笑


でも、このような作業は好きなのでとても楽しかったし、漫画アプリでも色々な機能があるんだなと感じました。





この2ヶ月間、あっという間でしたが、色々なことを学ばせていただきました。

バナー制作についても教えていただきました。

どのような色や配置が見やすいか、余白はどのぐらいがいいのかなどとても参考になるレビューをたくさんいただくことができ、とても勉強になりました。

これから、もっとWebデザイナーとして勉強していきたいと思いました。


ありがとうございました。




インターン3日目!#Djangoに触ってみる

こんにちは!

今日は午後からの出勤でした。

引き続きPythonのイケている?らしいDjangoというフレームワークの学習を続けていました。

Viewsのあたりから混乱してきましたが、とりあえず大まかな流れは把握し、アプリケーションが動くところまで行きました。

今は全てが新しく覚えることが多いですが、そのうち慣れてくることを期待しながらやっていこうかと思います。

次回はゴールデンウィークを挟み、Vue.jsに取り組んでいきます。

インターン2日目!#Pythonに触ってみる

こんにちは!

今日のお昼は歩いて5分くらいのところにある焼き魚定食でした。

業務の方ですが、

環境構築は前回終わらせまして、本日から早速バリバリ、プロジェクトにコミットしようかと思いきや、

僕はPythonは触ったことがないので、勉強から始めます。

Pythonは今まで触ったことがあるPHPと書き方が異なるのですが、実際に見てみると確かにシンプルに書ける感じがしまして新鮮です。

インターンの良いところは、いきなり即戦力を求められず、育ててくれるところから始められることにあると思います。

もちろん基本的に自力で考えながら進めるのですが、分からないところがあったらちゃんとした説明つきでアドバイスして頂けるので、自分一人でやっている時より、遥かに早く、より深く理解しながら学習が進んでいるな。と今日1日で感じました。

今日のやったことはまずは

Pythonのチュートリアル(公式)を1から全部目を通しまして、

次にそのまま、Djangoというフレームワークのチュートリアルを始めます。

チュートリアルのアプリを作っているのですが、今日はちょうど半分くらいまでしか完成できませんでしたので明日に続きます!

インターン初日!#環境構築

こんにちは!

インターンを申し込んだのが約2ヶ月前で、ついに今日から僕にとって初めてのエンジニアとしての実務が始まります。

今までスーツをきちんと着て働く人たちが多い環境で育ってきたので、私服で働いていることにまず少し感動を覚えます。

作業は支給されるMac book proで行われるため、本日は環境設定を主にしました。

まずはMac内に自分のアカウントを作り、普段自分が使っている環境設定に変更し、そのあとはPythonを扱うことになるので、その環境をマニュアルを読んで構築していきます。

途中、エラーを吐いて直らない時も度々ありましたが、質問するといつでも解決するまできちんと教えて頂けるので、なんとか本日中にプロダクトをgitで持ってきて作業できる状態までになりました。

初出勤ということでランチに寿司をご馳走していただきましたし、今日いい日です。

Pythonは触ったことがないですが、次から本格的に取り組んでいきますー!

インターン15、16日目 #Vue.jsでタブ切り替え

こんにちは!

前回ブログを書く時間がなかったので、今回まとめて更新します!


現在、スキマオリジナルページに「全て」「連載」「完結」の3つのタブを作り、切り替えを行う機能を作っています。

前回は、Vue.jsでタブ切り替えができるようにしたところまで進みました!


連載中の作品のデータと完結の作品のデータを取ってきて、if文で条件分岐させるのがとても苦戦しました。

やっぱりVue.jsは難しい…😅



そして、今日は、タブのデザインを考えました!

調べてみたんですが、吹き出し風のタブやインデックス風のタブ、下線のみのタブなど色々あるんですね!


今回は、吹き出し風のデザインに挑戦してみました!

作るのは意外と簡単だったのですが、色や枠をどうするかでかなり悩みました笑

全てボーダーで囲ってみたり、下線だけつけてみたり・・・


いろいろやってみた結果、タブをリストで作っていたのでそれぞれをボーダーで囲んだデザインが一番しっくりきました!!!


吹き出しなので漫画っぽさも出て、可愛い感じにすることができました😊



今回、タブのデザインでもたくさん種類があることを知ったので、他の機能のデザインも調べてみようと思います!