fujjima’s blog

主に備忘録

一年弱を振り返り

こんにちは。

最近もコードを書く毎日です。
今の会社に入社してから、そろそろ1年になる勢いです。あと2ヶ月ぐらいですかね。

一旦、この一年弱でやってきたことを整理してみたんですが、ざっと下記のようなことをしてきました。

  • ちょっとしたフロント側のデザイン変更
  • そこそこ大きな機能の実装・リリース
  • 料金計算部分の修正
  • gem, npmパッケージの影響調査及びアップデート
  • その他細々としたタスク


んで、出来ること自体は増えたんですが、依然「実装力」自体が低いままになっています。
頭の中に画面の動きやデータの流れはイメージできるようになってきたんですが、それをいざ実装しようとすると
途端に詰まることが多いです。

これについては実装方法のスタックが自分の中に少ないことが最大の原因です。
こればかりは、コードを書いていく中で引き出しを増やしていくしかないかなと。

しかし、やはり今の会社で働き始めてもうすぐ一年になるので、いい加減コアメンバーとして実装できるぐらいには
成長していたかったんですが、壁を超えられていない感じです。

メンバーの中でも、自分が消化できたタスク数が一際低くなっていることが常なので、ここに関しては本当に早めに改善したいと思っています。


改善されるのが早いか、切られるのが早いか、というのが現実味を帯びてきてしまっているので、是が非でも改善していきたい今日この頃。

一旦ここまでで、また技術系の投稿をしていきたいと思います。

それでは。

webpackについて(備忘録)

htmlのheadにてlodashをcdn経由で使用するためのリンクを貼っつける
bodyでindex.jsスクリプトを使用するための記述を追加する

index.js内では、htmlのbodyに追加するdivの中身を生成して追加する
webpackを使うと、index.htmlで必要とされるデータ(画像、スクリプトなど)を、個々でサーバーに取得要求しなければならず、
時間がかかってしまうことを解決できる。


npm installした「lodash」をローカルで使うように修正。
npm installした後、index.js内にimport文を書く。

src/index.jsを、webpacjkがバンドルして、その成果物「main.js」をdist/に出力する。
なので、index.html側でmain.jsを使用できるように、body内で
main.jsを読み込んでいる。

  • webpack.config.jsについて

config.jsをwebpackに使ってもらうには、exportしないといけない



npxコマンドについて
ローカルにインストールしたnpmパッケージを、「npx」と入力することで実行可能。
npxはnpmにバンドルされているため、個別のインストールは不要。

ひとまず、下記コマンドで対応した。

# 開発環境
npm run dev

# 本番環境
npm run build

JSでのnull判定とかundifined判定とか色々あるが、lodashのライブラリに便利なものがあったのでメモ。

  • nullかどうかを判定
_.isNull(value)
  • null, およびundifined判定に使える
_.isNil(value)


上二つのメソッドは、要はそれぞれval == null,val === nullの判定をしているということですね。
DB上の値をフロントに返す際に、nilであれば何も返さないという実装にしていることがあるが、そうするとReact側で対応している変数にはundifinedが入ってしまう。
そこで、null、もしくはundifinedかを検出できる2個目のメソッドが便利という話でした。



参考にしたサイト
lodash.com

semantic UI(React)のDropdownのplaceholderについての備忘録

こんにちは。fujjimaです。

 

今回はSemantic UIについて、タイトル通りの備忘録です。

細かい部分については、以下の記事を参照してみてください。

 

↓ Semantic UIは何者か?

 

 

Semantic UIの中に、ドロップダウンを簡単に作るための「Dropdown」コンポーネントがあります。

Dropdownコンポーネントには、入力に関するヒントを表示するための「placeholder」オプションが用意されていますが、こいつがどのタイミングで表示されるかがよく分からなかったため、調べました。

 

結論からいうと、placeholderが表示されるタイミングは下記の通りです。

 

  • value」属性の値がnull or undifinedの時。

 

というわけで下記サイトで検証します。

react.semantic-ui.com

 

1.

下図のプルダウン中に「Select Friend」と表示されているが、コード内の「placeholder」で指定されていることが分かる。

 

f:id:fujjima:20190714174556p:plain

 

const DropdownExampleSelection = () => (
  <Dropdown
    placeholder='Select Friend'
    fluid
    selection
    options={friendOptions}
  />
)

 

2.

options(プルダウンをクリックした際に表示されるの選択肢を指定できる属性)に設定されたオブジェクトの中で一つ、「value」をnullにしておく。

 

↓ ここでは、2個目のオブジェクトのvalueをnullにしてみました。

const friendOptions = [
  {
    key: 'Matt',
    text: 'Matt',
    value: 'Matt',
    image: { avatar: true, src: '/images/avatar/small/matt.jpg' },
  },
  {
    key: 'Justen Kitsune',
    text: 'Justen Kitsune',
    value: null,
    image: { avatar: true, src: '/images/avatar/small/justen.jpg' },
  },
]

 

選択肢が2つになっていることが分かる。

f:id:fujjima:20190714182431p:plain

 

 

3.

valueをnullに設定した「Justen Kitsune」を選択してみると、
placeholderで設定した「Select Friend」が表示されていることが分かる。(ここめんどうなので画像略)

 

使い道としては、以下のようなものが考えられるかなと思います。

選択肢の中に{ value: null,  text: "xxxx" }の組み合わせを仕込んでおいて、valueがnullの場合に表示させたい文字列やらがある時に、placeholderにも同じように「"xxxx"」を指定しておけば、それを初期表示できる感じですかね。

 

すごいマニアックな内容ですが、地味に詰まったため備忘録として残しました。

 

schema.rbについての備忘録

業務の中でschema.rbのコンフリクトを起こすことが多々あったため、備忘録として残す。

schema.rbは現DBの構造を元に作成され、その後migrationファイルが実行された際に変更点があれば、schema.rbが更新される。

この時、

rails db:migrate

によって一度でも参照されたmigrationファイルは、2回目以降の参照対象から外れてしまう。

なので、「このmigrationファイルはこれとまとめられるからまとめておこう」とかいうのは出来ない。
そういう時は、新しくmigrationファイルを作成するか、

rails db:rollback

とかでDBの状態を該当のmigrationファイル実行前まで戻してから、migrationファイルを修正して、再度

rails db:migrate

を実行すればいい。

久々に更新しました。

気づいたら3ヶ月空いていた、中々恐ろしいことだ。

 

お久しぶりです、fujjimaです。

 

「ブログを更新する」というのが日課レベルには全然なっていないため、そもそも更新するという発想が日常生活で思い浮かばないという問題が発生しています。

 

技術的なことはqiitaとかにあげればいいし、お手軽具合だとnoteに軍配が上がるイメージ。ブログは、なんというか個人的な趣味とかをさらに深掘りしていって、そこでの自身の見解とか知見を公開するぐらいのレベル感なんじゃないかと思っています。

 

敷居が少し高いかな? という感じで。
ただ、普段の生活、または仕事とかでもあれこれ考えることはあるので、それを書きなぐるぐらいでもいいので更新をちょっとずつしていこうかなと最近は考えています。

 

あと、書いてみて思ったのが、なんか語彙力が減少している気がしてならないということ。本は、もはや一部の技術書とかぐらいしか読まなくなってしまっているので、インプット元が減ってきているのが原因なんですかね。

 

小説とか評論とかセンター試験以降読んでないんじゃないのか、というレベルです。

読むかぁ。

 

ではまた ✌︎('ω')✌︎

 

 

 

 

 

 

 

 

 

 

 

 

(またははたしてあるのか…?)

前職と現職の比較

こんにちは、fujjimaです。

 

ここのところ、睡眠時間が短くなってしまい日中眠気が残ってしまう状況になっているため、1時までには寝るように生活リズムを整えたいと考えています。

 

さて、前回ですが「前職と現職の比較を行う」と書きましたので、ここで整理してみようかなと思います。

 

ざっと書くと下のような感じになります。

 

【前職】

・勤務時間: 9:00 〜 18:00

・休日:土、日、祝日

・仕事内容:コールセンタ向けの業務用アプリケーションの開発

・バージョン管理ツール:SVN

・FW:Springとか

・言語:Java, C++

・OS:Windows

・月残業時間:平均45H

・服:スーツ(オフィスカジュアルはOK)

・開発方法:ウォーターフォール

 

 

【現職】

・勤務時間:完全フレックス

・休日:土、日、祝日

・仕事内容:Saas型の自社サービス開発

・バージョン管理ツール:git

・FW:Rails, React

・言語:Ruby, Javascript(たまに)

・OS:Mac OS

・月残業時間:所定労働時間超えた分

・服:私服

・開発方法:アジャイル

 

 

特に顕著だったのが、「勤務時間」と「仕事内容」です。

前職にもフレックスという制度自体はありましたが、ほぼ空気と化しており、基本的に毎日9時にはデスクについていました。

 

現職は月の所定労働時間のみ決まっています。私は朝の満員電車を回避するため、10:30に出社して19:30ぐらいに帰るパターンに落ち着いています。

その人の出社した時間が定時になり、退社時間もまた定時となるのです。

 

仕事内容の面では、現職になってからコーディングに費やす時間が圧倒的に増えました。もはやほとんどコーディングです。イヤホンで音楽を聞こうが、気分転換で共有スペースで仕事をしようが自由です。昼寝もOKですが、節度は守っています。

 

この他にも、色々と違いはあります。エクセルに全く触らなくなったとか、slackでやり取りするようになったなどなど。

 

そんな中、転職して思ったのは「会社が違えば文化は全く異なる」ということです。私自身、経験した会社は2社に過ぎませんが、全く正反対の文化を体験しました。自分としては、現在の会社での仕事が楽しいと感じる事ができているので、転職自体はしてよかったなと改めて感じています。

 

今後に関して、ひとまずプログラミングに関わる知識を増やしていくのと同時に、デプロイ周りやDBのチューニングあたりの知識の不足もひしひしと感じているので、そこらへんを勉強していく所存です。

 

ではまた('ω')