こまぶろ

技術のこととか仕事のこととか。

トップ > プログラミング > フロントエンドの勉強としてGitHub PagesでダメWebサイトを公開してみました

フロントエンドの勉強としてGitHub PagesでダメWebサイトを公開してみました

プログラミング JavaScript フロントエンド Vue.js

はじめに

記念すべき最初の「実装してみた」記事です。
GitHub & フロントエンド初心者がこんなもの↓を作りました、という話です。

f:id:ky_yk_d:20180504185225p:plain

目次

はじめての「実装してみた」

技術の勉強が捗らない！

技術ブログのつもりで始めたこのブログですが、これまでの投稿で何一つとして実装していないことに気づきました。仕事でプログラムを書くのは好きなのですが、どうもプライベートの技術の勉強は捗らないんですよね。勉強に時間を割くことは吝かではなく、書籍やネットの記事などを見て勉強することも少なくないのですが、

  • 内容がエモい話に偏ってしまう（仕事術とか組織論とか開発手法とか）
  • Hello World的なものや単一の機能の写経までで途絶してしまう

というのが自分の傾向としてあるな、と感じています。課題解決の手段としてエモい話が有効である場合も多く、自社の状況からするとこちらの方にまず手が着けやすそうだったので、その方面に力が入るのはある程度は意図的ではあります。

ただ一方で、技術で解決されるべき問題をエモい話で解決しようとしてしまったり、業務で与えられた技術的課題を自分の技術力の不足によって解決できなかったりするという怖れがある以上、技術の勉強をすることは不可欠だなと考えています。

「おそらく自分のやりたいことがマネジメント方面にあるのだろうな」、「新卒でエンジニアになったからといっても技術にこだわる必要はないんじゃないか？」などと思うこともあり、考えをまとめておきたいと思っているのですが、「いいから実装しろ」という天のお告げが聴こえたので、とにかく何か実装してみることにしました。

フロントエンドの勉強をしよう

さて、学ばねば、と思っている技術はいくらだってあるわけですが、今回JavaScriptを勉強したいなと思いました。JavaScriptは、

  • 業務で使うことがある
  • Webとかbot作成とかいろんな場面で使える
  • AngularとかReactとかNodeとか聴こえてくる

といった理由で、学ぶ必要性は感じています。ただ、JavaScriptをそれ自体として学ぶのはイメージが湧かず、またWebサイト制作でもすれば、JSは当然学ぶことになるのでしょうが、新人研修でWeb技術を少しだけ学んだときに興味が持てず、業務でもビジネスロジック側を触ることがほとんどになったので、これまで放置してきました。

Web系に転職したり、フリーランスになったりする予定も今のところないし、趣味で何かサイトで公開したいという気持ちもないし、Webサイト作ってもなぁ、というのが正直なところです。しかし、 「いいから実装しろ」 という天のお告げが再び聴こえたので、Webサイトを制作してみることにしました。

はじめてのGitHub Pages

「GitHub Pagesがあるじゃん」と思った

さて、Webサイトを作るなら、どのように作っていくのがよいのでしょうか。やはり、公開した方がいいだろうな、と思ったとき、「GitHub Pages で公開すればいいのでは？？」 と思いつきました。ちょうど先日、『わかばちゃんと学ぶGit使い方入門』を読みまして、

GitHubには【GitHub Pages】という静的Webサイトの無料ホスティングサービスがある

ということを知識として得ていました（手元に今ないのですが、確かこの本で知ったはず）。

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

【2018.05.07追記】 やはりわかばちゃん本でした。Section 29です。

ゆくゆくはDB接続をするようなアプリケーションを作れればと思っていますが、さしあたりのWebサイト制作という目的にはGitHub Pagesで足りると考えました。また、GitHub Pagesを使用することには、

  • Git, GitHubを使う練習になる
  • 勉強・試行錯誤の過程が残る
  • フィードバックをもらいやすい

などのメリットもあると感じ、よし、GitHub Pagesでやってみよう！ と決めました。

GitHub Pagesに公開してみた

GitHub Pagesでのページ公開の方法は下記のサイトを参照しました。

大昔、中学生のとき色々と苦しみながらホームページを公開していた記憶があるのですが、簡単なもんですね。 手順は、

  1. GitHubにレポジトリ作って、
  2. ローカルにクローンして、
  3. ローカルで編集して、
  4. コミットして、
  5. プッシュして、
  6. Settingsから公開

これで公開は完了です。

はじめてじゃないJavaScriptとHTML & CSS

JavaScriptを書いてみた

さて、いよいよ中身です。とはいえ、<h1>タグとかは流石にわかる一方で、実践的に「こういうサイトが作りたい」というものがあるわけでもなかったので、書籍のサンプルコードのなかでJavaScriptを使っている風のところを選んで実装してみることにしました。今回は、こちらの書籍に載っているストップウォッチにしました。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

下に今回書いた（写経した）コードの一部を示しています。秒を60で割って分にして、それを更に60で割って時間に……、という流れ、懐かしいですね。

// タイマーの処理
var goTimer = function(){
    var now = new Date();
    var milli = now.getTime() - start.getTime();
    var seconds = Math.floor(milli / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);

    seconds = seconds - minutes * 60; 
    minutes = minutes - hours * 60;
    // 0補完
    hours = addZero(hours);
    minutes = addZero(minutes);
    seconds = addZero(seconds);
    document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
}

function(){...}というのがJSだなぁという印象です。もっとも、ES2015からはアロー関数で書けるようになっていて、僕の思うJavaScript像は既に時代送れになりつつあるようですし、僕が知っているJavaが7以前でラムダ式がなかったりするので、Java像もJavaScript像も同程度に歪んだものであることを痛感しました。モダンな書き方ができるようにならないといけませんね。

HTML & CSSも（久しぶりに）書いてみた

見た目にはあまり興味がなく、目的としてもJavaScriptを学ぶことが第一だったので、CSSは特にこだわる必要を感じていませんでした。しかし、友人に「Bootstrapは見た目的に欲しいよね」と言われ、敢えて使わないというようなこだわりもないので導入することにしました。下記のサイトを参考にしました。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

これでボタンやテーブルに対して簡単にスタイルを適用できるようになりました。めでたしめでたし。サンプルコードの写経だけではあんまりですから、下記の2つを参考にして実装することで、申し訳程度の「オリジナル感」を出しておきました。

はじめてのJSフレームワーク

Vue.jsをやってみることにした

せっかくなので、JSついでにVue.jsも試してみました。

他のJSフレームワークも考えたのですが、しがないラジオでの言及や友人の話から、Reactなどに比べてとっつきやすいらしいという印象を持っていたためVue.jsに。JSの勉強が進んだらNode.jsでサーバーサイドも書いてみたいと思っています。

Vue.jsを使ってみるのに、何かサンプルを探していたところ、下記のページが見つかったので、こちらのタスク管理アプリを実装することにしました。 また、日本語版の公式ガイドも参照しています。

jp.vuejs.org

Vue.jsを使ってみた

当初は、「JSフレームワークって大変なのでは？」と思っていたのですが、Vue.jsの導入は簡単でした。Bootstrapと同じくCDNで提供されているので、下記のコードを公式からコピーして貼り付ければ使えるようになります。今回は開発バージョンの方にしました。

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

こちらを貼り付けたあとは、HTMLに{{ }}で囲まれた「プレースホルダー」を記述し、js側からそれを指定してデータを入れてやればVue.jsのHello Worldは完了です（？）。今回は触りの部分だけで、Vue.jsの何が優れているのか等を理解できるところまではやっていないので、公式ガイドを読みながら勉強してみようと思います。

はじめてのGitHub Issue

写経したはずなのにバグが出た

「さーて、写経して動くようになったっぽいしGitHubにプッシュだー」と公開し、満足した気分でポチポチしていると「ん？」と気づくことがありました。最初から存在しているタスクは正常に【Done!】で削除できるのに、画面から新しく追加したタスクは削除されるタイミングがおかしいではありませんか。 これバグじゃん。

Issueを書いてみた

写経元のサイトから見られるサンプルは正常に動いていましたので、自分のコードに問題がありそうです。しかし、コードを見直してみても、原因がパッと見ではわかりません。そこで、Issueを書いてみることにしました。GitHubの練習です。そこで上げた記念すべき第1号のIssueがこちら。

Issueのコメントを書くにあたっては、ネット上の情報を参考に書いてみました。書いてみて感じたのは、他の人に伝わりやすいIssueを書くためには、形式・内容の両面の洗練が必要ということです。バグの報告は業務でもする機会があったのですが、口頭で、かつ画面を一緒に見ながら報告することが多かったので、言語でわかりやすく書くのは難しいなーと思いました。

ちなみに、こちらのバグ、JSの中にタイプミスがあった（1箇所だけ isDeleted じゃなくて idDeleted になっていた）というオチでした。自分で修正してクローズ。次はどなたかにissue上げてもらったりプルリク出してもらったりできると、GitHubらしくなってきますね。

おわりに

「フロントエンド技術を勉強するぞ！うぉー！」と走り始め、雑ではありますがWebサイトらしきものを公開するところまでやってみました。思ったことをまとめておきます。

  • ネットの情報だけでも色々作れることが実感できた
  • 勉強する足がかりを作ることができた
  • やっぱりデザイン大事なのである程度気を使うべきだと思った
  • 「こういうページが作ろう」というゴールを設定すべきだと思った

最後のものが重要ですね。今回の目的は、とにかく実装してみることだったので、仕方がないのですが、やはり「こういうものを作ろう」というゴールは持たなければならないなと実感しました。言語やツールが手段でしかない以上、目的がなければそれらの勉強が捗るはずがありません。

「プログラミングは嫌いじゃないけど作りたいものがないから勉強できない」という、エンジニアの一部の層には確実に存在しているであろう悩みを僕も持っていますし、一朝一夕で「こんなものが作りたい！！」となることは多分ないと思います。

しかし、今回何もないまま実装してみて目的設定の重要性を痛感しましたので、目的設定に労力を割くのも勉強の一環だと思って、一度ちゃんと考えてみようと思います。一方で、設定できないことを勉強しないことの言い訳にしては元も子もないので、これから週に1回は何かしら実装して記事を書いていきます！ 頑張ります。頑張ります。

最後にお願いをいくつか。

  • オススメの書籍や記事、勉強方法などあれば教えてください！
  • サイトにツッコミどころがあったらGitHubでIssue or プルリクお願いします！

わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]