paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

フロントエンドをいつか学ばなきゃと思ってるエンジニア向け・一番効率的な勉強法

f:id:paiza:20180330181705j:plain
Photo by Christiaan Colen
高村です。

エンジニアで「実践的な勉強はつい後回しにしちゃって…」という人って結構いると思います。

で、みんな「いつか時間ができたらやろうと思って…」とか言いますけど、時間ができることなんて一生ないですよね?

あるいは、情報系の記事や技術書などを買って、ちょろっと読んだだけで勉強できた気になっちゃったり、本を買っただけで満足しちゃったりしますよね。実際は何も身についてないのに。

私も最近、ちょっとそんな感じになっちゃっていたので、勉強がてらスライド作成用のmarkdownエディタを自作してみました。

今回はそのmarkdownエディタの話と、「エンジニアは動くモノを作るのが一番勉強になる」という話をします。

■なぜ「動くモノを作る」と勉強になるのか

◆モノを作るのに必要な技術や知識がまとめて得られるから

そりゃそうだろって感じですけど、そもそもエンジニアはモノを作るのが仕事ですから、たとえ知識があっても手を動かしてモノ作りに落とし込めないと意味がないです。

自分は最近、フロントエンド開発スキルが足りないなーという課題感がありまして。ちょいちょいそれ系の本を開いてみたりはしていたのですが、当然ながらそれだけで実践的なスキルは身につきません。特にYarnとかWebpackとか、よく耳にするようになったけど実際に使った経験がないから全然知らん!やばい!という状態でした。

だからといって、「まずはこのライブラリの使い方を完璧にして、次はこのツールの使い方を完璧にして、次は……」みたいな感じで、それぞれの技術を単体で勉強していくやり方は筋が悪いです。実際にちょっと試してみましたが、時間はかかるしモチベーションも維持しづらくて続きません。

特にフロントエンド界隈は流れも早すぎるから、ひとつずつ丁寧にやるよりは、「実際に実務でも使えそうな道具について、全体的にさくっと触れてみる」というのを繰り返すほうがよさそうかなと思います。そのほうが最新情報をキャッチアップしやすいですし、深掘りが必要になったら、そのときに改めて丁寧にやればいいのですから。

というわけで、「何かテーマを決めて動くモノを作ってみる」のは、おすすめできる勉強方法の1つです。

私は今回、フロントエンドの技術を学びたかったので、できればそれに特化したいい感じのフレームワークを使おうと思い(サーバ側は開発経験あるから、わざわざ考えたくない…)、ソフトウエアフレームワーク「Electron」を使って、reveal.js用のhttpサーバつきmarkdownエディタを作ることにしました。

理由は

  • ふだんreveal.jsでスライドを作っていて、便利だけど微妙に不便を感じる場面がちょいちょいあった
  • みんなに使ってもらえるものを作りたかった

からです。

アプリを作るって言うとハードル高そうに聞こえますが、今回、最初の粗めなプロトタイプは大体3日間ぐらい(1日2・3時間ずつ)で作れました。

◆本を読むだけではダメなの?

f:id:paiza:20180330174828j:plain
Photo by Mandy Goldberg
paiza新卒の就活生向けイベントに出ると、「エンジニアになりたいんですけど、どんな本を読むといいですか!?」と聞かれることが非常に多いです。

もちろん技術書を読むのも大事です、例えば「就職先でこの言語を使うと決まっているから、基礎を学んでおきたい!」みたいに、学ぶべき技術が明確で、既に定番化してるものを体系的に追いたい…みたいな場合は、断片的な情報収集をするよりも、初心者向けの書籍を一冊通しで体系的に勉強するほうが効率よく正確な知識を得られるかもしれません。(今はWeb上の学習コンテンツでも初心者向けのものが増えてきましたが…)「リーダブルコード」みたいな、普遍的な古典の名著もありますし。

ただ、いくら本を読んでも実際に手を動かさないとモノを作れるようにはならないので、読むだけで満足せず、実践してみるのが大事です。技術書って、買っただけで満足して勉強した気になりやすいですし。

私は、今回は「新しめの技術を試してみたい~」と思っていたので、ネット上の記事やドキュメントなどで情報収集をしながら作りました。

■というわけでこれを作った

reveal.js用のhttpサーバつきmarkdownエディタ「reveal_lightning」です。

github.com

こんな感じの見た目です。
f:id:paiza:20180330175656p:plain

reveal.jsを使っていて微妙に不便なところを解消したかったため、

  • 画像をドラッグアンドドロップで入れられる(URLの記述不要!)
  • アイコンをクリックするだけでアニメーションが作られる(コードの記述不要!)
  • 一画面にエディタエリアとプレビュー表示エリアがある(画面を切り替えなくてもプレビュー確認できる!)
  • オフライン状態でも使える(電波悪いとこでも使える!)

などといった機能があります。

reveal.jsユーザーの方はよかったら試してみてください。

f:id:paiza:20180403152707g:plain

開発の詳しい背景や機能紹介などはこちらPrezentaion powered by reveal.js)。

reveal_lightningを使って作ったスライドで紹介しています。興味がある方はぜひご参照ください。

■「reveal_lightning」を作って勉強になったこと

細かいことまで含めるとたくさんありすぎるので、ここではかいつまんでまとめておきます。

◆ライブラリ管理ツールの知見(npm,Yarn)

JavaScriptのパッケージマネージャーとして、まずnpmを使ってみて、その後でYarnに乗り換えたので、速度的な違いを体感できました。

◆CSSフレームワーク「UIkit」がめっちゃいい

今回初めてUIkitを使ってみたのですが、class名の頭にuk-ってついてるからスタイル名が既存のものとかぶらないのがすごくいいですね。Bootstrapよりいい。すぐに実務にも導入しました。

◆Electronの知見

Electronを使ったアプリの作り方から配布の仕方まで、一通り理解できました……できたつもりです。

アプリの自動アップデート機能も簡単にできそうだったし、せっかくなので実装しました。

ちなみに自動アップデートをMacで動かせるようにするには、Apple社への課金と承認が必要なため、ちゃんとお布施を払って申請して審査を通しました。結構いいお値段するというのが身にしみてわかりました。

◆GitHubで静的なページを公開する方法

reveal_lightningで作ったスライドを世の中に公開したい場合はGitHub Pagesで公開できるように意識して作ったんですが、Jekyllというツールを今回初めて知りました。

pages.github.com

◆その他、いろいろなJavaScriptライブラリ

ちゃんと目的に沿ったモノを作るために、npmでいろいろなライブラリを探したり試したりしたので、それも勉強になりました。

例えば、markdownをコンパイルしたかったら、最近だとmarkdown-itmarkedがよさそうとか。

◆Travis CIでの自動ビルドからのGithub Releaseへの自動連携

TravisCIで自動ビルドをしているのですが、コード署名用の機密情報のセキュアな管理方法や、TravisCIからGithub Releaseへ自動アップロードする方法など、知らなかったことがいろいろ学べました。


とりあえず個人ユースに耐えられるものはできましたが、Webpackの導入などはまだできておらず、パッケージ化後のサイズが大きすぎるので、これからMinifyとかしていきたいと考えています。


<参考>
Quick Start | Electron
API | Electron
Introduction · electron-builder
GitHub - electron-userland/electron-packager: Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
コード署名 - テクニカルサポート - Apple Developer
npm
UIkit
reveal.js – The HTML Presentation Framework
Yarn
webpack
Electron で Markdownプレゼン作成ツールを作って公開するまで - Qiita

■まとめ

というわけで、自分は「reveal_lightning」を作ったことで、いろいろとフロントエンド周りの知見が増えたので、やってみてよかったなと思っています。

あと、「動くモノを作る」というのは、現役エンジニアだけでなく、他職種からエンジニアを目指したい人や、B2BからB2Cへ行きたい人など、未経験の分野へ挑戦したい人もやってみたほうがいいと思います。

私も前職ではRailsを使った経験がなかったため(paizaはRailsで作られています)、入社前はRailsで端末管理アプリを作ってみて、Railsを使ったWeb開発の全体像をざっくり学んだりしました。

とりあえず自分で手を動かして何か作ってみるというのは、基礎知識が身につくだけでなく、就職・転職活動でも有利になります


初心者だとハードルが高く感じるかもしれませんが、paizaラーニングだとプログラミング未経験者から始められる「Ruby入門編」「Java入門編」などから、実際に動くWebアプリが作れる「Webアプリ開発入門」まで公開していますので、興味のある方はぜひごらんください。




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック