フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

#技術書典 で初心者でもWebサービス作れる方法まとめた本売るので買いにきて!

技術書典って?

技術書オンリーの同人誌の販売イベントです。

2018/4/22に秋葉原で11時からやってるから、近くの人はぜひ見るだけでもいいので来てください。

techbookfest.org

どんな本出すの?

「Vue.jsとFirebaseを使って、簡単なWebサービスを作ってみる」という内容になっております。 npmってなんだ?とかのレベル感の人でも、一から環境構築してサービスを公開するところまで進めるという感じです。

ターゲット

本書抜粋

本書は以下のような方をターゲットとして執筆しています。主に簡単なWebサイトを作った事があるWebフロントエンド初心者の方が、本書を通じてSPAの基本を掴み、簡単なWebサービスが作れるようになることを目的としております。そしてそれらを抑えた上でさらに次の段階へステップアップするための足がかりになるような要素を各所に入れております。

  • HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
  • 複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
  • 普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
  • シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
  • やったことないけどとにかくWebサービスを作ってみたい人
  • FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
  • 普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人

目次

画像で申し訳ないですが目次を貼っておきます。

f:id:tatsuaki_w:20180419152027p:plain

f:id:tatsuaki_w:20180419152031p:plain

価格

50Pちょいの冊子が500円で、電子版も当日一緒に売ろうと思っています。

どのブース?

自分のサークル申し込みは落選してしまったので、友達のブースで出させてもらいます↓

techbookfest.org

くー45ですね!

買いたい!って人

このフォームに入れてくれた人の分は取り置きしておきます!

すでに取り置きしてくれている人の分など抜いて冊子は80冊くらいしか販売しないので、事前に取り置き登録しておいてもられば残しておきます。

【追記】 当日見本みてから微妙だったら買わなくても大丈夫です!笑

--取り置きは締め切りました--

ダウンロードカードを別途販売する予定ですので、売り切れたらそちらをお願いします。

以上です。

当日はよろしくお願いします!

追記

こちらで電子版販売しておりますので、よろしければお買い上げください!

booth.pm

フロントエンドエンジニアに求められるもの多すぎ問題

背景

postd.cc という記事がちょっと前にありました。

github.com Roadmap to becoming a web developer in 2018って最近のWeb技術のまとめみたいなもんもよく引き合いに出されます。

このまとめの中にフロントエンドのものありますが、これはフロントエンド技術自体のロードマップです。

これらの技術すべてに精通していればいいのかと言われるとそんな必要は全く無くて。

でも現場によって実際 フロントエンドエンジニアに求められているものはそれ以外にもたくさんあるんですよね。

会社によってマジでJavascriptプログラミングしかやらない人も、マークアップする人、デザインを作ってそれをCSSに落とす人、本当に一口にフロントエンドエンジニアと言っても幅広すぎ。

担当範囲が広すぎるフロントエンドエンジニアに関していろんな会社が募集してると思うんですが、具体的にどういうスキルが求められてるのかと、逆にこういうのやりませんってのはっきりしてくれると選定する際に参考になるかな〜と、そのためのスキルの一覧表みたいなのを作りたいと思ってこの記事を書いています。

それと、私自身はもう会社やめちゃってヒモみたいな感じなんですが、上司もいなければ目標面談とかもなく、今自分がどこにいてどこに向かっているのか相談出来る人がいないので迷子になってます。(マジで前職は信頼出来る上司がいて良かったな〜泣)

そのためスキルの棚卸しをして「あれが足りてない、これを次やりたい」っての考えるたたき台となるようなものを作りたいと考えています。

ということでですね、世のWEBフロントエンドエンジニアと呼ばれる人たちが現場で求められているスキルだと思われるものをガガガッと以下に書き出してみました。たくさんあります。

もちろん一個一個説明したらそれだけで1記事書けてしまいますので、ここでは詳細は書いてません。

これもまた深度がどれだけかってのがまた現場によって変わるから○✕では判断が難しいので、

  1. 知らない
  2. 知ってる
  3. 触ったことある
  4. そこそこ動かせる
  5. ゼロから構築出来る

とかで通信簿的にしてみたら、わりと判断材料になるのかな〜と思ってます。(○✕で書けるようなレベルに表の方をドリルダウンしてもいいですね)

また、それぞれが個々に具体的にどういったスキルなのか説明も必要だとは思いますが、それはまた今度。

スキル通信簿

マークアップ

CSS

  • 目的のデザインの再現力
  • レスポンシブ対応やデバイス毎の差異吸収(Gridとか)
  • CSS設計に関わるマークアップスキル
  • 設計全般(BEMなどの大規模サイトでも破綻しないルールづくり
  • SASS、POSTCSSなどのaltCSS

Javascriptプログラミング

  • プログラミング基礎力
  • Dom操作のあれこれ
  • Ajaxや、jQuery等のライブラリを使える
  • Javascriptそのものに対する知識(イベント伝播とかECMAScript)

デザイン・アニメーションまわり

  • UIデザイン出来る
  • デザインツール最低限使える(Adobe関連とかSketch)
  • モーションデザイン
  • CSS・JSアニメーション実装

html・css・js複合的内容

Javascriptその他

  • npmまわり(yarn)
  • ビルドツールやタスクランナー(Webpack, gulp)
  • altJS (Typescriptとか)
  • canvasの扱い(create.jsなど)
  • webGL(three.js)
  • PWAとそれに付随するあれこれ

SPAフレームワークあれこれ

  • フレームワーク・ライブラリ熟練度(React,Angular,Vue)
  • 状態管理(Redux,RxJS,Vuex)
  • テスト(Jest,Mocha,Jasmine)
  • プロトタイピング(Storybook)
  • 結局担当するネイティブアプリ実装:ReactNative等

なんだかんだやることになるフロントエンドに付随するサーバーサイド周り

  • Wordpress全般
  • SSR実装(SSRライブラリでの実装やrailsなどのサーバーサイドとの連携)
  • node.js(faasとかも)

まとめ

これら全部を求められているような現場は多分存在しなくて、広いんだけど「フロントエンドエンジニアを名乗るからには全部やってなきゃ」なんてことは全然ありません。現場によっては概ねやりたい事だけやれるとこもあります。

自分から首突っ込んでいったらホント色々やれるので、飽き性の人にはおすすめな職業ですよ!(まぁ〜これはエンジニア全部か)

「私こういうのもやってますし、結構やってるとこ聞きます」「これとこれは一緒なのでは?」「今時WebComponentsやってないのは小学生までだよね〜キャハハ」みたいな意見はバシバシ 私のtwitter宛に投げつけていただければと思います。

以上です。世のエンジニアの皆様ご意見ください。

アプリーチのリニューアルをしました!

長年の負債を返済することが出来ました。

Bootstrapそのままのデザインだったアプリーチに苛立ちを覚えていたブロガーのみなさん、大変おまたせいたしました。

mama-hack.com

f:id:tatsuaki_w:20180330132915p:plain
アプリーチ

アプリーチって?

アプリーチはブログ等でスマホアプリを紹介する際に、

AppStoreとGooglePlayのアプリを一度に検索して、統合したブログパーツを瞬時に作れるツールとなっております。

3,4年前にブロガーである妻の要望で作成し、他の方でも利用出来るように公開しました。

ありがたいことに様々なブロガーの方に利用していただいています。

こんなブログパーツがさっと作れます。

Kyash - ウォレットアプリ
Kyash - ウォレットアプリ
開発元:Kyash
無料
posted withアプリーチ

(Kyashめちゃ便利ですよみなさん)

デザインについて

今回デザインは はるたん こと春田さんに頼んで作ってもらいました。

twitter.com

春田さんのCAREER HACKでのインタビューはこちら↓

careerhack.en-japan.com

今回は

  • 春田さんの慣れているツールで(Sketch)
  • UIのパーツとかは基本的に流用:配置等考えてもらう
  • PCのデザインのみ

という絞った条件で、できるだけ春田さんの手を煩わせない形で頼み、今のデザインになりました。 スマホ対応はこちらで行いました。

素敵なデザイン改めてありがとうございます。

UXを考慮してページ内要素の整理順序設定なども提案していただけました。

優秀で手が早く、シンプルなデザインをサクッと作ってくださり、4月からfreeeでデザイナーとしてバリバリ活躍していかれること間違い無し!

使ってる技術

バックエンドは以前の流用、フロントはVue.jsでわーっとつくりました。

Vue.jsのwebpack-simpleテンプレートにvuexを加えて

gulpで

  • pug→htmlの生成(生htmlはエラーの元なのであまり書きたくない)
  • 今回あんまり意味ないけどstaticファイルをdistと別で管理できる
  • vue-simpleだとJSのキャッシュが更新時にリセットされないのでその辺

とかを加えたテンプレートを使っています。

ソースはこちら。 github.com

とはいえhtmlたくさん作るなら nuxt.js generateでいいし、 キャッシュとかもsimpleじゃないwebpackテンプレート使えばいいので他人が使う旨味はあんまりないですね。

VueでのAdsenseの扱いがちょっとやっかいだったり、IEとEdgeは生成するHTMLに差が出るってのにつまづいて時間かかりました。

追加機能について

リニューアル後から「新コード」として、生成するコードのなかにstyle要素やidを含めないコードとしました。

新コードのほうがパフォーマンスもよいですし、カスタマイズがしやすくなっているはずです。

利用する際には別途サイトのCSSにサンプルCSSを追加してからご利用ください。

はてなブログの無料版をご利用の方は、スマホではCSSの追加が出来ないので新コードが利用できません。(はてなさん・・・)

もしブロガーさんでアプリーチの新コードでのカスタマイズについて記事にしてくれる方がいたら、サイトから紹介記事へのリンクを載せるかもしれませんので、その際には私宛までご連絡いただければと思います。

今後は要望などあればバシバシ追加していこうと思います。(以前のコードがかなりカオスだったので更新がめちゃくちゃ億劫でしたが、今後はすぐ直せるはず!)

お問合わせや機能要望等はこちらにどうぞ

アプリーチお問い合わせ

宣伝

これをお読みのアプリASPのご担当者様がいましたら、アプリーチ内にASPへの加入リンクを配置することが出来ますので、お問い合わせください。

また、来月に技術書典でVue.jsとFirebaseを使って簡単なWebサービスを作れるチュートリアルの本を出します!

細かい内容は前回のブログに記載しています↓

nabettu.hatenablog.com

もし読みたい〜という方がいましたら、こちらのフォームをご記入ください! できれば当日買いに来て頂きたいですが、当日買いに来れなくても個別配送したりは出来ると思います。

「初めてのシングルページアプリケーションVue.jsとFirebaseで作るミニWebサービス」の取り置き申請フォーム

私のサークルは落選しましたが、く-45の場所の KUGIBAKO の場所をお借りして出す形になっていますので、実際に手にとってから買うか検討したい方はどうぞご来店ください。4/22です。

以上です。最後までお読み頂きありがとうございます。

今後もアプリーチをよろしくお願いします。

#技術書典 落選したけど、すでに60ページくらい書いててなんとかしたいので頑張るぞい

どうもワタナベです。

techbookfest.org

↑このイベントに出ようと息巻いていましたが、あえなく落選しました。

Vue.jsとか多分、人多いしな笑 私もFlutter本を書いていれば、当選したでしょうかw

当落が決まる前からデザイナーの友達に表紙と冊子デザインを頼んでいた&しっかり表紙付きで印刷したかったので「とにかく早めに書かねば」と、年末年始から書き始めて概ね全体像が出来上がってのB5で60ページ。

からの落選(笑 f:id:tatsuaki_w:20180204215237p:plain

仕方ないので元々「落ちたら委託をさせてくれ〜」と言っていた友達のサークルで出させてもらおうかと思ってはいます。はい。

委託は委託で多分大変で、そもそものそのサークルに迷惑をかけないレベルにしないとならないわけです。

前回同様とすると場所は「2人座れるくらいのスペース」を一人分(50%!)占拠してしまう。 開店前に準備するとなるとその事前準備チケットも1枚もらうことになってしまいます。

さらに個人的な方の問題として「どれくらい刷ればいいのかわからない」ってのがあります。

技術書典では事前にサークルチェックリストというものがあり、サークル側は「そのチェックが入っている人数かける1.2 ~ 1.5くらいは売れるっしょ」と大体見積もれるのですが、それが出来ないため全くの未知数!困った!

対策

ということで、もう見積もれないので事前取り置きの数*1.2冊とかで行こうと思うんですがどうでしょうか。

今のところ書いている状態の目次を載せておきますので、以下のフォームに名前を書いてもらえれば取り置きしておきます!

--取り置きは締め切りました--

値段はまだわかりませんが、高くても1000円以下で60ページオーバーになると思われます。

内容

「Vue.jsとFirebaseを使って、簡単なWebサービスを作ってみる」という内容になっております。 npmってなんだ?とかのレベル感の人でも、一から環境構築してサービスを公開するところまで進めるという感じです。

ターゲット

本書抜粋

本書は以下のような方をターゲットとして執筆しています。主に簡単なWebサイトを作った事があるWebフロントエンド初心者の方が、本書を通じてSPAの基本を掴み、簡単なWebサービスが作れるようになることを目的としております。そしてそれらを抑えた上でさらに次の段階へステップアップするための足がかりになるような要素を各所に入れております。

  • HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
  • 複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
  • 普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
  • シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
  • やったことないけどとにかくWebサービスを作ってみたい人
  • FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
  • 普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人

現状の目次

f:id:tatsuaki_w:20180204230044p:plain
目次1

f:id:tatsuaki_w:20180204230050p:plain
目次2

おわりに

(キャンセル待ち枠みたいのあったらいいけど、多分落選って人結構いるから無理そう。)

2ヶ月半後と迫ったイベント。サークル出典出来ないのは切ないのですが、ここまで書いておいてなにも出さないのはもっと切ないので、みなさん是非買いに来てください!

このフォームに入れてくれた人の分は取り置きしておきます!

「初めてのシングルページアプリケーションVue.jsとFirebaseで作るミニWebサービス」の取り置き申請フォーム

書いた人は4/22を忘れずにカレンダーに入れておいてください!笑

電子書籍版は今のところ未定です。

追記

ブースはく-45になります!

https://techbookfest.org/event/tbf04/circle/14540001

書評「サーバーレスシングルページアプリケーション」

買ってから結構経ってしまったけど読み終わり(作り終わり)ました。

この本を読むとこんな感じの「プログラミングの問題サイト」が作れます。 TOPとかに何も説明入れてないけど、とりあえず「関数がtrueになるために __ に何入れたらいーでしょう?」という問題をとかせるWebサービスです。

ざっくりとした本の内容

  • s3を使っての静的サイトホスティングとそのデプロイ
  • 基本的なjavascriptを使ってのSPA開発(hashを使った画面遷移)
  • フロントエンドのテスト駆動開発
  • Google login(aws の cognitoってサービスを使ってアカウント管理)
  • DynamoDBへのDB書き込み読み込み(自分の回答の登録・読み出し)
  • lambdaを使った、全ユーザーでの回答の多い順出力関数及びその関数の api gatewayでのhttp化しての公開
  • セキュリティ問題についての浅く広い情報
  • スケール時のAWSの注意点やアラートの設定

かかった時間

読むだけでなくリポジトリをクローンして、それを編集して上記内容の機能を徐々に加えていくというスタイル。基本的には写経していけば動く!

バグったときにAWSの知識が少ないと結構苦労するため、たまに足をすくわれることがあり合計15時間くらいはかかったと思います。

良かった点

章で進んだ点都度デプロイしてWWWに公開していくというスタイルは、内容はどうであれ「なんか進捗した感あるぞ!」ってなるので、モチベーション低下を防げるので良い手立てだと思った。

テスト駆動開発でしっかりと進めていくので、自然と身につく。

サーバーレスでWebサービス作る上で最低限必要な要素を網羅的に学習出来る。(Cognitoとか出たばっかだし触ってる人も少ないのではないでしょうか。)

SPAってフレームワーク使ってちゃちゃっとやってしまいがちだけど、ゼロから自分で作るのでSPAフレームワークの理解が深まるとともに、ありがたみを感じられる。

微妙な点

AWSの細かいとこで引っかかってしまってすごく時間が取られる場面があった。 もちろんそれを経て学べる事もあるので、一概にはダメとは言えないが、AWSノー知識な子がやったりすると挫折の原因になりそう。

(途中面倒なことは全部firebaseにぶん投げたくなる。。。)

まとめ

本に沿って写経していくだけで、テストファーストでサーバーレスなSPAが公開できます!

私のバックグラウンドはWebフロントエンドエンジニアだったので、SPAの部分についてはさらっとのつもりでしたが、意外とためになる事が多かったです。Viewの部分ってテスト駆動取り込みづらかったりしますよね。

本業サーバーサイドの人はこの本の「サーバーレス」な部分はちょっと物足りないというか得るものは少なそうですが、「なんとなくSPAって最近の流行りについてさらっと知っておきたい」という人にはいいかも。

どちらのバックグラウンドも無いような初心者の人でも「AWSの部分でバグったら、誰か近くに聞ける人がいる」なら大丈夫だと思います。とは言え完璧に本の通りにやってればバグらないはず。。。!

周りに聞ける人がいない場合は↓のteratailってので質問したら結構ちゃんと教えてくれる人がいますので、こちらもどうぞ。

以上です。 全体的に広い層におすすめ出来る内容だと思います!

ダメなWebサイトチェックシート

f:id:tatsuaki_w:20171020131108p:plain

みなさん、日頃色々なWebサイトを閲覧していると思いますが、今日は私の考えるダメなWebサイトの共通点を洗い出しました。

コンテンツ制作者の皆さんは自分の制作物に当てはまらないかチェックしていただいて、より良いインターネッツライフを提供していただければと思います。

もちろん私の主観的な内容がふんだんに取り込まれていますが、「主観的に見ても好みの範囲だな」という内容は一番下の[入れるかどうかは好み]欄にしました。

それではご査収ください。

続きを読む