フロントエンジニアのメモ

普段フロントエンジニアしているやつが思ったことや書き残したいこと

「広島のベンチャー企業」から「東京の大企業」に転職して9ヶ月が経ちました

f:id:tf6533:20171201192737j:plain

いよいよ12月になり、今年も残り1ヶ月になりましたね。
同時にエンジニアにとってはAdvent Calendarの始まりですね。

僕もいくつか登録しており、この記事は下記Advent Calendarの1日目です。

adventar.org

転職前

転職前は広島のベンチャー企業で働いていました。
ちなみにこちらは2社目になり、その前は東京のベンチャー企業の営業でした。
拾ってくれた社長のおかげでフロントエンドエンジニアになることになった感じです。

仕事内容はよくあるWeb製作会社のフロントエンドエンジニアです。
フロントエンドエンジニアといってもほとんどがWebサイトの製作で、主にHTML、CSSを触ることが多かったので、 コーダーに近い存在だったのかもしれません。
Angularを触ったり、GulpやWebpackで環境を構築することがあたったので、フロントエンドエンジニアと名乗っていました。

その他では勉強会の登壇や主催をさせて頂いたり、東京の勉強会に2,3ヶ月に1度参加して情報収集をしたりしていました。

なぜ転職を考えたのか

理由としては2点ほどありました。

  • フロントエンドエンジニアが身近におらず、目標となる人が欲しかった。
  • 実務でJavaScript(SPAフレームワーク)を本格的にやりたかった。
  • 今の環境ではこれ以上フロントエンドエンジニアとして成長できないと思ったから。

当時は勉強してもあまり業務でJavaScriptを触ることもなく、周りに相談できる人もいなかったので、そんな環境を変えたいなと思っていました。

東京の大企業に転職した理由

「なんで東京にいくの?」や「ベンチャーにずっと居たのになんで大企業なの?」とよく聞かれます。

東京を選んだ理由は勉強会もたくさんあって、いろんなエンジニアが居て楽しそうだったからです。

大企業を選んだ理由はフロントエンドエンジニアとしてSPAをおもいっきりできそうなところを探したけど、求人はめちゃくちゃあったので、「とりあえず待遇の良さそうなところから受けるか!」と思って受けてたらそのままご縁を頂いたからでした。

現在

無事に3月に転職して今に至ります。

今はフロントエンドエンジニアのチームでReactを使って開発しています。
チームにいる方達がすごく優秀な方達で、常日頃学ぶことがあってとても幸せです。
特に技術選定や新しい技術がでたときにディスカッションをすることができるのは、とてもありがたく思います。

勉強会やカンファレンスに参加して、色んな方達と直接情報交換ができるのも良いですね。

あと、自分にとっては超ホワイト企業なところも。

まとめ

エンジニアになってまだ2年目ですが、過ごす環境は大事だと思います。
僕は若いうちはいろんなことを経験した方がいいと思うので、3年経って転職と考えるよりも、今の環境にくすぶっているならすぐ行動したほうがいいと思っています!

electronでHello Worldを表示するまで

f:id:tf6533:20171119222903j:plain

こんばんわ!
先日electronを初めて使用して「Hello World」まで表示させたのですが、
ものすごく簡単だったので、ブログに残します。

electronとは??

Javascriptでデスクトップアプリケーションを作る際に使用するツールです。
Atom、VS Code、SlackもElectronでできています。
詳しくはググればいくらでも記事が出てきます。

公式サイトを見るのが一番良いでしょう。

electronjs.org

electronで「Hello World」を表示させる。

早速本題に入ります。

electronで「Hello World」を表示するのに必要最低限なファイルは以下の通りです。

index.html
index.js
pacage.json

今回はelectron公式が用意している、electron-quick-startを使用します。

github.com

上記の公式ページにあるとおり実行

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

これだけでChromiumブラウザが起動し「Hello World」が表示されると思います。

f:id:tf6533:20171119220357p:plain

あとはelectron-quick-startでcloneしたファイルを使ってカスタマイズしていくだけです。

最後に

Hello World」を表示させるまでは物凄く簡単でした。
ですが、色々とやり込もうと思えば奥は深いと思います。
幸いにもドキュメントは豊富で、これを見れば様々なことがあまり苦労せずできそうです。 electronjs.org

Qiitaなどを参考にしても良いのですが、やはり動かないサンプルコードなどが存在していました。 公式を見るのをオススメします。

Macをリプレイスした際に最低限している設定・導入していること。

こんばんわ! 最近私用のPCを新しいMacに乗り換えて、いい機会なので自分が開発する上で最低限している設定などを残しました。

Macの設定

  • カーソルスピードをMAXにする
  • ライブ変換を切る
  • Docを縮小し、自動で隠す
  • マウススピードをMaxにする
  • キーリピート速度とキーリピート開始速度をカスタマイズする
  • 隠しファイル・フォルダを表示
defaults write com.apple.finder AppleShowAllFiles TRUE

キーボード設定(外部キーボードを繋いでいる場合)

ソフトウェア設定

iterm2をインストール

chorme

  • インストール
  • 同期する(拡張子などの共有)
  • ⌘+Qで閉じるときに確認モーダルを出す。
    上部のメニュー バーで、[Chrome] をクリックします。
    [終了する前に警告メッセージを表示する(⌘Q)] をクリックします。

homebrewインストール

zshを導入

Gitをインストール

brew install git

anyenvのndenvつかってnodeをインストール

Angular CLIをインストール

TypeScriptをインストール

HyperSwitchをインストール

WebStormインストール

最後に

以上、僕が開発する上で必要最低限の環境です。
ぜひみなさんのオススメツールや設定も教えてください!
ツイッターのDMやリプ待ってます!

フロントエンジニアとしての個人的情報収集まとめ

先日We Are JavaScripters! @12th【初心者歓迎LT大会】 - connpassで下記のようなLTをしました。

speakerdeck.com

LT内容としては、普段自分が良く見ているサイトやサービスのまとめです。

LT後に参加者から「blogにまとめてほしい」と軽い希望があったので、資料に少し内容を足してまとめます。

一覧


  • ツイッター
    勉強会やカンファレンスに登壇している人を片っ端からフォローするだけで最新情報が追える。
    言語、フレームワーク、コミュニティのアカウントもフォローしておくと尚良い。
    全部TLで追うのは大変なので、リスト機能を使ってまとめておくと見やすい。
    ぼくのアカウントはこちらなので、よければフォローしてください。🐕さきと🐕 (@mki_skt) | Twitter


  • Qiita
    忙しいときには「人気の投稿」を見るだけでもしておく。
    よくQiitaで活動している人をフォローしておくと、フォローした人のストックした内容も見れるのでおすすめ。


  • GitHub
    自分が気になるOSSのIssueを追っていれば常にどのような変更やバグあるかわかる。
    Trending JavaScript repositories on GitHub today · GitHubを見ればどのJavaScriptOSSがよく活動しているかわかる。

  • npmjs
    npmパッケージを作成するだけではなく、更新状況を追うことなどもできる。


  • Qaleidospace
    サイトの説明文にQiita の投稿を独自のアルゴリズムで評価し、ランキング化するサービスと明記されている通り、 Qiitaでは見逃しがちな投稿を拾えるので、Qiitaと合わせて見ておく。


  • はてなブックマーク
    テクノロジーカテゴリは毎日チェックしている。


  • Slack
    様々なコミュニティのSlackチームがあり、自分は普段Angular Japan User GroupのSlackチームを見ている。
    最新情報だけではなく、実務上の質問なども行われており勉強になる。
    Slackチーム一覧はこちら => Slack-list-ja


  • Gitter
    GitLabが提供するSlackのようなコミュニケーションツール。
    海外の方が多く英語で会話が繰り広げられているが、最新の動向や海外現場のソースコードが見れるので、 英語の勉強も兼ねて見ている。

  • HTML5 Experts.jp
    最新のWEB技術を用いて開発した現場の感想など多くの最新情報が更新されている。


  • PSOTD
    主に海外の記事を翻訳したものが更新されていて、日本語で情報が追えるので見てる。


  • ICS MEDIA
    最新のフロントエンド情報を更新しながらも、初心者にも分かりやすく丁寧な内容が多い。
    記事を更新している @tonkotsuboy_comさんは、 Qiitaでも多くの優良記事を出しているのでよくお世話になっている。


  • coliss
    デザイナーさん向けの内容が多いが、WEB製作会社のフロントエンジニアにとっては参考になる。


  • TechFeed
    Web/フロントエンドカテゴリを見ておけば、世の中のフロントエンド動向が掴める。


  • ECMAScrip compatibility table
    JavaScript の標準であるECMAScriptのブラウザ対応状況はわかる。
    使用しているメソッドのstage状況を確認するときに見ている。


  • JSer.info
    @azu_reさんが更新しているサイト。
    フロントエンドの基本的なニュースはここを見ればだいたい網羅できる。


  • blog.koba04.com
    @koba04さんのblog。
    Reactについて日本語かつ詳しく更新されている。


  • abcdefGets
    @brn227さんのblog。
    TypeScriptの新機能が日本語かつ詳しく更新されている。


  • from scratch
    @yosuke_furukawaさんのblog。
    node,npm,React周りの情報が詳しく更新されている。


  • best.of.js.org
    JavaScriptOSSのスター数、現在のバージョンなどなどがこのサイトで一括で追える。
    海外のJavaScriptコミュニティの著名人もまとまっている。


  • Echo JS
    JavaScriptの海外ニュースがまとまっている。
    英語の勉強も兼ねてたまに見ている。


  • egghead
    オンライン動画学習サイト。
    かなり内容の濃い動画が多く掲載されていて、React v16の内容もすでにある。
    月額契約/40$、年間契約199.99$だが見る価値あり。ちなみに自分は年間契約している。


  • Code Grid
    フロントエンジニアの教科書のようなサイト。
    特にフロントエンドを学び始めた頃は毎日見ていた。
    月額契約/800円だが、書籍を購入するより安いのでおすすめ。


  • NET BIZ DIV. TECH BLOG
    リクルートマーケティングパートナーズが更新しているblog。
    他ではあまり見ないような技術記事を詳しく丁寧に更新されており、 とても見やすく勉強になるので見ている。


最後に

今回紹介したものを毎日すべて見るのではなく、主に土日に見ています。
他にも通勤途中など空いた時間を使えば情報を追うのはそこまで大変ではないと思うので、 ぜひ見て見てください!

今回紹介したもの以外にもおすすめのサイトやサービスがあれば、是非教えてください!

Geek Women x Microsoft - Geek になりたい人のためのミニカンファに参加しました

f:id:tf6533:20170310190438p:plain
先日の日本マイクロソフト株式会社で行われたGeek Women x Microsoft - Geek になりたい人のためのミニカンファに参加してきました!
geekwomenjapan.github.io


このイベントは題名の通り、日本マイクロソフト株式会社とGeek Women Japanによるカンファレンスです。
今回はWeb開発に用いられるエディタのVisual Studio Code(以下VSCode)を使用した開発について、セミナーがあったので学びたいと思い参加しました。
code.visualstudio.com

今回のスケジュールは下記のようになっており、同じ時間帯に3つのセミナーが同時進行する形になっていました。

f:id:tf6533:20170310191746p:plain

今回は「モダンWeb開発におけるVSCode活用TIPS」と「超簡単 Visual Studio Code ではじめる Angular 2」のセミナーに参加しました!
「Xamarin ハンズオン」や「Dockerで 今日からはじめる Container体験」は予定があった為、残念ながら断念しました。

モダンWeb開発におけるVSCode活用TIPS

まずは、木村茉由さんによるVSCodeを用いたWeb開発についてでした。

VSCodeのインストールからスタート!さすが初心者向け!優しい!
VSCodeは一度インストールすれば、最新バージョンに自動的にアップデートしてくれる優れものであり、git機能やデバッグ機能、拡張機能、統合ターミナル機能があるエディタよりもIDE(統合開発環境)のような高性能エディタのようです。

f:id:tf6533:20170310193030p:plain
自分も進行と同時にインストールしたのですが、Atomよりも軽快に動作しているような気がします。

インストールや基本機能の紹介のあとは、下記のカスマイズTIPSやオススメ拡張機能の紹介でした。

カスマイズTIPS

  • エディタの配色テーマを変更
  • 空白文字の表示
  • ファイルの自動保存
  • 保存時のオートコードフォーマット機能

おすすめ拡張機能

  • 公文チェック(Lint)機能
  • スネークケース、キャメルケースの置換
  • Git Project ManagerでローカルGitを開く
  • Debugger for Chromeで開発者ツールと連携
  • File Name Completeでファイル相対パスの補完
  • HTTP/S and relative link chekerでリンク切れMarkDownのチェック

そのほかにも色々と紹介がありました。
とても便利そうな印象ですが、リファクタリング機能やimportの折りたたみなど、細かい部分の改善が今後期待されるようです。

個人的に、普段のWeb開発には申し分のないエディタなので、使用していこうと思いました。
発表資料にAngularのコードが使われており、次の時間のセミナーに繋げていたのが、面白かったですね。

超簡単 Visual Studio Code ではじめる Angular 2

続いては、さっくるさん@sakkuruと佐川さん@albatrosaryによるVSCodeを使用したAngular2開発についてでした。
まずは、さっくるさんによる基本的なVSCodeの使用とプラグインについての説明がありました!
Angular v2 TypeScript Snippetsプラグインの紹介でしたが、Angular界隈では有名なJohnpapaさんが作成者ということで、これだけでもAngularをVSCodeで開発する価値があるのではないかと思いました。
Angular2のスニペット補完を行なってくれるもので、かなり便利そうです。

https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

f:id:tf6533:20170310200333p:plain

そのあとは、佐川さんによるAngular2のハンズオンでした!
Angular2の環境の準備から基本的なコンポーネントの書き方の説明がありました。
30分はハンズオンをするにあたって、短い時間でしたが、環境構築も含めてVSCodeでもAngular開発の触りが学べて、良い機会でした。

感想

予定があり、後半2つは参加できませんでしが、良いセミナーでした!
Geek Women Japanが運営しているだけあり、ITセミナーでは珍しく女性も多かったです!
あと、Xmarinエバンジェリストのちょまどさんが本当に動いてました。