渡り鳥の旅路

元半導体系エンジニア、今Webエンジニアの雑記

【初参加】We Are JavaScripters! @17th【初心者歓迎LT大会】に参加してきた

最近仕事でJSを触り始めた&前から気になっていた勉強会だったので参加してきました。

今回初参加だったのですが、お題目の通り経験浅めの方が発表しやすい雰囲気を保ちつつ、ベテランの方が初心者向けにかみ砕いた発表をしていたのが印象的でした。

こういう勉強会だと独学だけでは自分のアンテナに引っかからないテーマや、次に手をつけるのにハードルが高すぎないテーマが見つけられるのでありがたいです。

wajs.connpass.com

ハッシュタグはこちら

#wejs hashtag on Twitter

LTとメモ

LT0: メルカリスポンサーLT

会場スポンサーのメルカリさんのLTがあったそうなのですが、僕は遅れて行ったため聞くことができませんでした。

LT1: チームをCQRS @boiyaaさん

speakerdeck.com

このLTの途中から会場入りしました。

元々のエンジニアの職務として、

  • フロントエンド:UI作る
  • バックエンド:データ操作

という分け方をしていたが、 フロントエンドがクライアント寄りのサーバサイドを触るなど仕事の幅が拡張している。

そこらへんの定義を再考して見た方が良いよね、といった話でした。

LT2: 【ビギナー枠】フロント未経験者のReactプロダクト改善 @shikicheeさん

speakerdeck.com

Ubieが提供する病院の受付サービスについて

MBAでサービスデプロイしてから軌道に乗る手前で、 サービス拡大のためにどうプロダクトを改善していくかという内容でした。

  • 元々はブラウザ対応だったが、ブラウザ環境ならではの課題が見つかる

 (例)ボタンの押し間違えやすさなど

  • 技術的負債の解消

 - ESlint, prettierの導入

 - 業界標準をきちんと選定しつつ

 - 今後入ってくるであろうデザイナーが関わりやすいようなツールの選定

  • 得られた知見

 - Webでネイティブアプリっぽい動きをさせるのは大変。うまく行きそうだったら、すぐにPWAやアプリに置き換えよう

  • 技術の移り変わりが速いので参考記事は一年以内のものを選ぼう

LT3: new version of context in React 16.3 @sottarさん

speakerdeck.com

react v16.3 本日リリース

Reactのこと知らな過ぎてよくわからなかったのですが、 New context APIの話でした 笑

参考記事

medium.com

動画もあった

What's New in React 16.3.0 - YouTube

LT4: What is necessary for developer friendly UI? @kuwahara_jsriさん

speakerdeck.com

APIコールを利用した連鎖的UIのバッドサンプルのお話でした。

Riotのことはよくわからなかったので、ReactやVueと比較しつつ調べてみようと思います。

LT5: ForkwellスポンサーLT

できるエンジニアになるために、 社内評価と市場評価のギャップをどう埋めていくかが大事だよねというお話

  • 社内評価 > 市場評価:技術をつける=>勉強会等で発信していく
  • 社内評価 < 市場評価:コミュニケーションとって自分ができることを見える化

時間がないあなたにスカウトサービスあるよ!で締め。

LT6: 【ビギナー枠】Vuetifyで学んだVueのコンポーネントあれこれ @10tomok0さん

  • Vuetify:海外ではVueのOSSフレームワークで一番使われている

  • スライドアップされてないけど、今回の内容は技術書典4で頒布予定とのこと

  • チュートリアルややってみた系の記事だけでは実戦投入するまで至らない=>フレームワーク自体のソースを読む

  • PWA Beginners 勉強会 #3 - connpass

LT7: HyperappでMarkdownエディタを作って薄い本を書きたい @atsucoさん

speakerdeck.com

  • JS製超軽量ライブラリのHyperappでmdエディタを作ったお話

  • 開発環境はWebpack

  • Hyperappの良い点=>シンプル、JSXが使えるので見通しが良い、etc.

  • 詳しくは技術書典4で!まだ書けてないけど!

LT8: Osushiに見るフロントエンドのセキュリティ(仮)@shibe97さん

speakerdeck.com

先日のOsushi炎上=>復活までのお話でした。

めちゃくちゃつらい体験をしたはずなのに、笑いを交えつつその経験をシェアできる強さやそれを受け入れるWeb業界の文化が良いなぁと思ったり。

セキュリティの話もそうなんですが、一度炎上を経験した後の選択の仕方や復活させるまでのストーリーの作り方が参考になりました。

React本をだしたが事情により宣伝できず。。

  • 攻撃の数を減らす

Devtoolハック

  • 攻撃を防ぐ

セキュリティ系ヘッダー

 - X-frame-options

  Iframeでサイト丸ごと表示させて、攻撃側の誤クリックを誘発する

 - X-xss-protection

 - X-content-type-options

関連記事 devcentral.f5.com

  • 被害を最小限に抑える

 - そもそも取られるものをなくす

  =>可能な限り個人情報をAPIで返さない

LT9: 【ビギナー枠】継続的 npm update のために実践していること @codenote_netさん

speakerdeck.com

  • Tokyo otaku mode:スタックが全てJS

  • 毎日npm updateしてる?

 - npmローカルモジュールを活用:azuさんの記事が参考になる

 - ローカルモジュールを使えば新旧バージョンを共存させることができる

 - ライブラリ自動アップデートサービスの例:Greenkeeper.io, Dependabot

LT10: WASMとES modulesの話 @chikoskiさん

資料はアップされてないので関係ありそうなツイートをてきとうに貼る 笑

  • Web Assemblyはバイナリ製のモジュール

 C, Rust, 裏にLLVMを持っているkotolin などで作れる

  • モジュールとは?

 - 表、すなわち名前と値でできている

 - スコープもモジュールの一種とも言える

  • WASMはESと違って手動でインスタンス化しないといけない

 - Webpackで楽をする->頑張って開発中

 - ブラウザでインポートできるようにしようよ!と言い出した(少し先のお話)

次回

次回は4/24にリクルートにて

まとめ

完全に自分用勉強リストになっている。。

「コンピュータはなぜ動くのか」を読んだ

きっかけ

先日rebuild.fmの#127/#128を聴いていて、連続でパフォーマンスチューニングの話題が上がっていました。

rebuild.fm rebuild.fm

最近それなりにコード書くのも慣れてきたし、そろそろパフォーマンスのことも考えられるようになりたいなと考えていたところにこの話題。

show noteにおススメの書籍として「コンピュータの構成と設計」があがっていたので出版社のページをみたところ中々分厚い感じでヒヨる。。

ec.nikkeibp.co.jp (電子書籍なら上下合本番があるのでそちらがお得です!)

というわけで、ウォーミングアップとしてまず「コンピュータはなぜ動くのか」から読んでみました。

ec.nikkeibp.co.jp

目次

第1章 コンピュータの3大原則とは

第2章 コンピュータを作ってみよう

第3章 一度は体験してほしいハンド・アセンブル

第4章 川の流れのようにプログラムは流れる

第5章 アルゴリズムと仲良くなる7つのポイント

第6章 データ構造と仲良くなる7つのポイント

第7章 オブジェクト指向プログラミングを語れるようになろう

第8章 作ればわかるデータベース

第9章 簡単な実験7つでTCP/IPネットワークを理解する

第10章 データを暗号化してみよう

第11章 そもそもXMLって何だっけ

第12章 SEはコンピュータ・システム構築の現場監督

こんな人向け

この本は学生の時に情報系じゃないけどIT系の仕事に就いた人向けに、 各ジャンルの最初の一歩の知識をやさしく紹介している本です。

また自分みたいに促成栽培的に仕事を始めた人が、まだ手を付けてないところの雰囲気をつかむときに必要な章をつまみ食いする読み方がおススメです。

読書メモ

自分はこの本のうち1-6、9-11章を読み進めました。

1-6章に関しては元々大学でC言語で挫折したクチなので、低レイヤーの言語の話(機械語やアセンブラ)を知っておきたいなと思い通読。

あとネットワーク周りも全然わかってないので、やりとりするデータの話も含めて9-11章を読みました。

オブジェクト指向やデータベース周りは実務で触ったり別で勉強したことがあったのでこの本ではスキップ。

オブジェクト指向は「オブジェクト指向でなぜつくるのか」が歴史的背景含めて書いてあり、概要をつかむのに良いと思います。

ec.nikkeibp.co.jp

あとは実戦で意識しながら使い続けないとなかなか腹落ちしないかなと。。自分もまだまだ修行中です。。

データベースはがっつりはやってないので、どこかのタイミングで勉強したいところ。

出版が10年以上前なので話題がちょっと古いところはありますが、そこは必要に応じて流していけばいいかと思います。

まとめ

とりあえずウォームアップ完了ということで、次は「コンピュータの構成と設計」へ

分量的に重い感じなので、まずはさらっと読んでいこうかと思います。

Ruby on Railsもくもく会@新橋に参加してきた(はじめて)

最近Rails触りたいなー、と思ってたので参加してきた。

教材

定番中の定番、Railsチュートリアル railstutorial.jp

事前準備

Railsチュートリアル上ではCloud9かホストPCへの環境構築について書いてたけど、 ローカルで仮想環境作っとくと楽だよねってことでDockerにコンテナ立てた。

もくもく会は午後からだったので、午前中にこの記事を見ながらさくっと環境構築

とにかく簡単にDockerでRuby on Railsを動かしてみる(初心者向け) - Qiita

最後のlocalhost:3000で"このサイトにアクセスできません"エラーが出る。。

ちょっとググッてみて、下記記事を参考にIP確認して無事繋げた。

dockerで立ち上げたアプリケーションにアクセスできない - Qiita

第1章

Herokuへのデプロイはスキップ 今までCakePHPとLaravelのチュートリアルしか見たことなかったけど、 RailsチュートリアルはGitやテスト・本番環境へのデプロイについても触れていて良いな~と思った。

第3章

実はテストコードを書いたことなかったので、こういう手順ですすめるのか~と新鮮に思いながら粛々と進めた。TDD

まとめ

もくもく会中はRailsの習得に注力したかったのでデプロイ部分はスキップしたけど、 家で進めるときはちゃんとやろう。

チュートリアルの最初からコードをきれいに保つ重要性など書いてあり、 Railsエンジニアのコードの綺麗さへのこだわりはこう言うところから始まっているのかと感じるなどした。

【スタテク読書会】「Linux標準教科書 ver2.0.0.」を読もう#2 に参加してきた

前回に引き続きスタテクさんのLinux読書会に参加してきたので、そのレポートです。

今回も雑談駆動の勉強会でした 笑

  前回の様子はこちら↓ roo-ashi.hatenadiary.com

 

 

課題図書

今回はLinux標準教科書(Ver2.0.0)の第3,4章が事前課題でした。 (実際は話が飛んで5章の範囲までやっちゃいましたが。。^^;)

メインパート(質問からの雑談)

Q1 正規表現のおススメ勉強法

これは僕の質問です。 grepの検索条件で正規表現を使うのですが、以前業務で正規表現に苦しんだことがあったので何か良い勉強法がないかなと思って聞いてみました。

(回答いろいろ)

  • 実際のところベテランでもたまにしか使わないので、都度調べながら対応している。
  • お題を決めて練習する(電話番号、メールアドレスなど)。 ググってみたら正規表現のドリルがありました。
  • 正規表現チェックツールを使う。 正規表現チェックツールまとめ - Qiita
  • 言語ごとに表現が違うので、それぞれのリファレンスを見に行く。
  • 正規表現は手続き型言語とは違うことを念頭におくと良い
  • 範囲を選ぶときは、ASCIIコード表が指定する順番に注意

いつの間にかログの話題に派生して、tailコマンドのオプションの話になってたり。。

Q2 Linuxの効率的な勉強法

Linux勉強してると今どの辺まで理解できているかよくわからない、という意図だったと思います。

(回答いろいろ)

  • 全体感を把握するなら、LPICの本を見ると網羅的な知識が整理されているのでよい。試験は高いので仕事で必要なときだけ取ればいいのでは、とのこと 笑
  • コマンドリファレンスを一気読み ->コマンドが何となく頭に残っているだけでも、発想力が違ってくる。
  • Linuxを要らないPCに入れる業務を通して覚えた->やってみると気にするべきところがたくさん見えてくるので勉強になる(セキュリティとか)
  • Gitのリポジトリの共有設定の話->Gitサーバー - Gitosis
  • まずはオープンソースの環境構築を立ち上げてから、アプリケーションを作ってみるのが良さげ
  • 環境構築で使うコマンドは意外と少ない

Q3 パスを通す、とは?

前回のブログに書きました↓ roo-ashi.hatenadiary.com

Q4 ログの見方について

さらっと見るときにはlessコマンド等でチェックするが、分析等するなら環境用意してツール使った方が良いというお話でした。

(回答いろいろ)

  • 基本的にはgrepで自分が見たいログがあるかを検索して、lessで確認する。
  • データとして扱うときはログ収集ツールを使う。->fluentdとか
  • elasticsearchkibanaといったちゃんとした基盤にに入れると便利

Q5 意外と知らないけど知っておくと便利なコマンドシリーズ

  • -vを入れるとコマンドに対するフィードバックが帰ってくる。
  • !$にはコマンドを打った最後の結果が残る。例えばmkdirした直後にcd !$と打つと作ったディレクトリに移ることができる。
  • cd -で一つ前にいたディレクトリに戻る。OLDPWDという環境変数に一つ前のPWDが保存されているのでそれを見ている。
  • readlink -f (シンボリックリンクのパス)とするとシンボリックリンクのリンク先を確認することができる。

まとめ

今回は(も?)読書会でありながら教科書をほとんど開かない感じで進みましたが、質問を起点として話題が縦横に広がるとても勉強になる回でした。今回初耳で消化しきれてない話題がたくさんあったので、これから少しずつ調べていきます。

次回は3/24 (土) 開催予定とのことです!

パスを通す ~WindowsとMac OS X / Linuxの違い~

昨日のLinux読書会でふと疑問に思ったので調べてみた。

元々は別の参加者の方が「パスを通すってどゆこと?」という質問をされていたんだけど、そういえばWindowsを使っていると毎度パスを通す作業があるのでMacと比べて面倒くさいな、とふと思ったのが発端。

普段Windowsでソフトインストールしたときに環境変数にパスを設定すると思う。 例えばGitだとこんな感じで細かくパス指定している↓

C:\Program Files\Git\cmd

でもMacとかでPath変数の中身を確認してみるとこんな感じで浅いところまでパス指定しておけばコマンドが走る。

echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/sbin #実行結果

詳細はこの記事を参考にしてもらうとして、 qiita.com

OSがやることとしては、

「コマンドが叩かれたときにPath変数に保存されているディレクトリ下から実行プログラムを探して実行する」

らしい。

結論としては、ソフトをダウンロードしてきたときに実行ファイルがまとめて一つのディレクトリに保存されるかどうかでお作法が違ってくる。

WindowsとMac/Linuxの違いというより、OSダウンロード時に走るプログラムの違いによるってことだと思う。って書こうとしたんだけど、結局OSのディレクトリ構成起因っぽい。。

WindowsはProgramfiles直下でソフトごとにフォルダが分かれてて、

Programfilesフォルダの中身

それぞれの中に実行ファイルがしまわれている

Git/cmdフォルダの中身

対してMacで確認してみると、例えば/ls/usr/binディレクトリには下記のように実行ファイルがまとめておいてある(わかりにくいですがほぼディレクトリでなくファイルです)。

/ls/usr/binディレクトリの中身

というわけで、Windowsめんどいねという話 OSのディレクトリ構成がこんなところにも影響あるんだねという話でした。

Linux読書会、次は3/24 (土) 開催予定らしいです! startup-technology.connpass.com

【WIP】WEBエンジニア勉強会 #05 に参加してきた

自分の振り返り用にシェア済のリンクまとめました。 感想などあとで追記していきます。

connpassページ

web-engineer-meetup.connpass.com

発表タイトル

HTTPレイヤーで行うパフォーマンスチューニング (@engineer_osca)

とにかく分かりづらいTwelve-Factor Appの解説を試みる (@suke_masa)

www.slideshare.net

なにか作ったらプレスリリースを出してみよう! (@binbin4649)

www.slideshare.net

OSS BIツール Redash について (@zuckey_17)

speakerdeck.com

redash-meetup.connpass.com

Amazon Rekognitionを用いてフォロワーの男女比を出す (@kzkohashi)

speakerdeck.com

Dockerを利用したローカル環境から本番環境までの構築設計 (@kkoudev)

www.slideshare.net

非機能要件を考えてみよう! (@iwanaga0918)

【スタテク読書会】「Linux標準教科書 ver2.0.0.」を読もう#1 に参加してきた

この週末にLinux読書会に参加してきたのでそのレポートです。

普段の実務でたまにLinuxコマンドを打ったりをvim触ったりするけど、 そのつどググるだけでは身につかないことなど体系的に学びたいなと思い参加しました。

startup-technology.connpass.com

Linux読書会について

課題図書

Linux標準教科書(Ver2.0.0)を使用

全11章からなり、この勉強会では2章ずつ進めていくとのこと。 課題図書は事前に読んでおく

www.lpi.or.jp

発足の背景

元々スタートアップテクノロジー (以下スタテク) の社内でLinux読書会をやっていて大好評、 それを見たスタテク内定者のコメントを発端として社外からも参加できる読書会が発足

startup-technology.com

こんな人におすすめ

  • Linux触りたいけど何から始めたらいいかわからないという人
  • Linux使えるとどんないいことがあるの?という人
  • たまにLinuxを触るけど独学なので一度体系的に学んでみたい人
  • すでにLinux名人なのでいっちょ初心者に教えてやるかという人 笑(今回は参加者にも名人が紛れ込んでいて、とてもためになるお話を聞けました)

雰囲気

基本的にゆるい雰囲気で進んでいきました。

参加者層はLinuxを全然触ったことない人からLinux歴数十年の達人までとバラエティに富むメンバー構成

話題はかなり初心者っぽい質問から始まり(自分ですがw)、かなりマニアックな内容まで繰り広げられました。

勉強会の内容

メインパート(教科書に沿った部分)

第1章 Linuxとは

コンピュータの基本構成やUNIX, Linuxとそのディストリビューションについて

(出てきた質問)

Q1: CentOS等のディストリビューションはソフトウェア構成のどの部分を指すか?

A1: 図のうちのカーネル (狭義のLinux) + 応用ソフトウェア群 (ユ ーザーランド) のセットを指す。 この組み合わせが、Red HatやUbuntuなどのLinuxディストリビューションによって異なる。

ちなみにCentOSは商用のRed Hatから有償部分を差し引いた互換ディストリビューションであり、無償で提供されている。 (バイナリ互換って書いてあるので、有償ソフト=>無償ソフトへの置き換えをしている?)

Q2: Linuxを勉強すると何の役に立つのか?

A2: 一番多いのはサービス運用時のトラブル対応で、OSの仕組みを理解していると対処できることが増える。また、機械学習など大きな計算をするとき

 (例) パフォーマンスの低下、性能検証、etc.

第2章 Linuxのインストール

内容がCentOSのインストール手順だったので、読書会中ではあまり触れず。

自分はかなり前にVagrant上で環境構築したきりなので、もう一度やってみてから次章に進む予定。

雑談パート

どちらかというとこっちの方がメインだった気がw

全てはカバーできないので箇条書き

  • 仮想マシンの話(VagrantとDockerは何が違うの?など)
  • デュアルブートの話(BIOSやブートローダーなど)
  • Linuxをどう勉強すればよい?(自作PC作ったり、LPIC受けたりなど)
  • 【読み物紹介】伽藍とバザール (ソフトウェア開発に関するエッセイ) The Cathedral and the Bazaar: Japanese
  • Linux From Scratch - LFSブック日本語版

まとめ

こんな感じで事前に課題図書を読んでおき、気になるところをバンバン質問していくスタイルの勉強会でした。

教科書自体はかなり基本的な内容なので、プラスアルファで普段疑問に思っていることなどまとめておくと、いい感じで参加できそうです。

次回は2/24予定で今後connpassで案内が出るそうです。

今後やること (自分向け)

  • 仮想環境でLinux (CentOS) を準備
  • Linux 3,4章もくもく
  • 次回の勉強会に参加