VueSchoolでVue.jsの基礎を学んでみた

VueSchoolという、Vueについて学べるサイトがあります。

vueschool.io

ここでは、Vue.jsについて様々なことを学べるコースが月$12で用意されています。全編英語ではありますが、字幕は用意されていますし、再生速度も変えることができました。Vue.jsについて学べる動画はあまり展開されていないので、試してみる価値はあるのかなと思います。

今回は無料で試せる「Vue.js Fundamentals」をやってみました。無料ということもあり、Vue.jsの基礎的なことが学べる内容でした。10レッスン、計27分だったので気分転換に眺めてみるのもいいと思います。

サンプルコードもGitHub上に展開されています。

github.com

【下書きの公開前に追記】

繰り返し見てまとめていましたが、英語で理解しづらい部分もあり困りました。並行して「Vue.js入門 基礎から実践アプリケーション開発まで」を読んでいたので少しずつ理解できましたが、「Vue.js Fundamentals」単体だと難しいかも知れません。他の言語から来た人だとわかりやすいのかな…

理解が深まってきて色々直したくなってきたので、動画から学べたこととして一回アップし供養します。

Vue.js入門 基礎から実践アプリケーション開発まで

【追記ここまで】

---

Vue.js Fundamentals

This Vue.js course will teach you and get you up and running with the fundamental concepts of Vue.js. Perfect if you haven't touched Vue before or you just getting started!

Get Started with Vue.js

Getting Started With Vue.js

• CDNからVue.jsをサイトに追加する方法
• Vueインスタンスの生成方法
  • el:'#id'の形式でマウントするポイントを指定
  • dataではVueインスタンスが使うデータを指定
• v-modelで画面上の変数に動的に値を入力できる

https://vueschool.io/lessons/getting-started-with-vuejs

VVue.js Template Syntax And Expressions

• VueのテンプレートでJavaScriptを実行する方法

https://vueschool.io/lessons/vuejs-user-events

Loops

• v-forでループ処理を実行できる。

https://vueschool.io/lessons/vuejs-loops

User Inputs & Vue Devtools

• v-modelで入力した値をdataに格納できる
• Vue Devtoolsの紹介
  • ChromeとFireFoxで利用できる
  • 開発やバグを見つける際に便利

https://vueschool.io/lessons/vuejs-user-inputs-vue-devtools

User Events

• v-onでイベントを設定できる
  • v-on:は@に置き換えられる
• clickやkeyup.enterで様々なイベントに対応できる

https://vueschool.io/lessons/vuejs-user-events

Vue Methods

• メソッドを利用することで冗長的なコードを排除できる
  • Vue Schoolの中では扱われていなかったが、computedとの違いはなにか気になった。

https://vueschool.io/lessons/vue-methods

Conditional Rendering

• v-ifとv-elseを使って、動的にページを変化できる
  • dataの配下にstateを用意し管理している
  • この形が標準的に使われているのか気になった

https://vueschool.io/lessons/vuejs-conditionals

Attribute Bindings

• v-bind でHTML属性をバインドできる

https://vueschool.io/lessons/vuejs-attribute-bindings

Dynamic Classes

• v-bind:classにオブジェクトを渡すことで動的に変えることができる
• v-bind:classには配列を渡すこともできる

https://vueschool.io/lessons/vuejs-dynamic-classes

Computed Properties

• ComputedはVueの特徴の1つである
• dataに対する処理をtemplateへ最新の変数として再利用できる

https://vueschool.io/lessons/vuejs-computed-properties

まとめ

• 30分でVueの基礎を学べた

  • 躓いた部分は公式サイトで保管するといいかも
  • https://jp.vuejs.org

• 英語がわからないと辛い

  • 辛かった
  • その他のコースも受講しようか迷ったが、英語なので一旦思いとどまる
• methodとcomputedの違いを調べてみる

OSS Gateにサポーターとして参加しました。

10/27はOSS Gateにサポーターとして参加しました。会場はGMOペパボさんです。ありがとうございます。

3月にビギナーとして参加し約半年経ちました。サポーターとしても貢献したいなとは思っていましたが、本当に自分がサポータとして参加するとは思ってもみませんでした。残念ながら自分自身はOSSに対して貢献できていませんが…OSS Gateへ参加することもOSSへの貢献だと思って参加を決めました。

3月にビギナーとして参加した記事はこちらです

https://yoshitaku-jp.hatenablog.com/entry/2018/03/11/321/

OSS Gateとは

https://oss-gate.github.io/

「OSS Gate」は、OSS開発に参加する「入り口」を提供する取り組みです。 OSS開発に未参加の人を参加する人へ、少し参加したことがある人を継続的に参加する人へ。そうやってOSS開発に参加する人を継続的に増やしていく。それが「OSS Gate」の目的です。

ビギナーさんと顔合わせ

今回は、SIer出身のビギナーの方と組むことになりました。アイスブレイクでお話を聞いていると、自分がビギナーとして参加したときの気持ちとすごく似ていて、親近感が湧きました。

世の中で動いているソフトウェアの多くにOSSが使われていて 自分も何らかの形で貢献してみたいと思ったが、 心理的な障壁が大きく自律的に始めるきっかけになればと思いはじめた。

ビギナーさんの作業ログ

当日の作業ログはこちらです。Jupyter notebookについてやりました。

https://github.com/oss-gate/workshop/issues/981

サポーターとして参加した感想・気をつけたこと

当日サポーターとして参加した感想ですが、思ったよりも緊張しませんでした。やはり大きな部分では「自分がビギナーで体験したこと」を提供すればいいんだと思うようにしていたからだと思います。逆に言えば、OSS Gateにビギナーとして参加していない方は、やりにくさや難しさを感じてしまうかも知れません。 今はワークショップをビギナーとサポーター1on1でやっていますが、個人的には1:2でもやれるのではないかと思いました。しかし、自分が担当したビギナーさんが自身で進める力を持っていたので余裕があった面は否めないと思います。

気をつけたことは、あくまでビギナーさんの背中を押す活動だと思うので、手取り足取り教えないようにしました。ビギナーさんが躓いてそうな雰囲気があれば、「どうしました？」と入ったり、「インストール手順のところが分かりづらそうなのでフィードバックできるポイントになりませんか？」と促したりしました。この加減が難しくは感じました。

まとめ

一日を通して、誰かのサポートをする体験が初めてだったので、貴重な経験となりました。人に教えるってのは難しいけど最高に楽しいですね。自分が通った道でもありますし、そこで立ち止まっている人の背中を押すことができたことがすごく嬉しいです。もちろん自分ひとりの力ではないです。全体を見てくださっていた司会役の方と、サポートメンターの方、参加してくださったビギナー・サポーターの方に感謝します。

余談

OSS Gateの運営方法で気がついた点

もっと運営が楽になったり、継続的に参加してもらうためにはどうしたらいいだろうかを考えました。

• サポーターとビギナーの座る位置を固定したほうが良いのでは？
  • 「どちらがサポーターですか？」と聞いているタイミングが合ったので固定したほうが楽ではないかな…サポーターメンターもどちらがビギナーでサポーターかわかって動きやすそう？
• ワークショップが終わったあとのフォローにも力を入れてみては？
  • 自分がビギナーだったときに終わったあとのフォローをしていただいたので、サポーターに回ったときもやってみた
    • 担当したビギナーさんへ
    • 午前に振り返りをしたビギナーさんへ
    • 午後振り返りをしたビギナーさんへ
  • 終わったあとのフォローもすれば、OSS Gateに来てくれることが増えるんじゃないかと思った

おしまい

GitHubで画像を保存してREADME.mdに表示する

初級者の人や、プロジェクトにあとから入ってきた人がわかりやすいようにGitHubのREADME.mdを詳細に書いていくことは大切です。しかし、文字ばかりになるのも味気ないですし、やはり絵や図があったほうがわかりやすいはずです。ふと、画像を貼るにはどうしたらいいのだろうと思ったので調べて実践してみました。

README.mdに画像を貼る手段はいくつかあるようで、外部サービスを利用するものもあります。外部サービスに保存し、そこを参照しに行く方法です。

GitHubでREADME.mdに画像を使用したい - Qiita

個人的にはGitHubの同じリポジトリの中だけで閉じておきたいなと思ったので、空のブランチを用意しその中に画像だけ保存しておく方法を選択しました。今回はそのメモです。

空のブランチを作る方法

空のimagesのブランチを作成します。orphanオプションをつけることによって、元のブランチの情報を引き継がないブランチを作成できます。

git checkout --orphan images

空のブランチに画像を入れる方法

フォルダの中を削除し、表示したい画像をコミットし、最後はプッシュします。

今回使う画像はこちらです。

git rm -rf .
git add dog_akitainu.png
git commit -m "犬の画像を追加しました"
git push origin images

これで独立したimagesブランチとdog_akitainu.pngがGitHub上にあがりました。masterには一番最初に作ったREADME.mdがあります。

README.mdに画像を表示する

masterブランチに移動し、README.mdを編集します。

git checkout master
vim README.md

vimでREADME.mdに書く内容です。

![秋田犬](https://github.com/yoshitaku-jp/test_doc/blob/images/dog_akitainu.png)

masterブランチにコミットしてプッシュします。

git add README.md
git commit -m "画像を表示"
git push origin master

完成

GitHub - yoshitaku-jp/test_doc: Githubで画像を保存してREADME.mdに表示するブログ記事のリポジトリ

夏休みに九州・四国をまわってきました〜四国編〜

もういつだよって話ですが、8月の末に夏休みをいただき、九州・四国をまわってきました。

ほぼ写真です。

九州はこちら

yoshitaku-jp.hatenablog.com

愛媛

高知

香川

おしまい

夏休みに九州・四国をまわってきました〜九州編〜

もういつだよって話ですが、8月の末に夏休みをいただき、九州・四国をまわってきました。

ほぼ写真です。

四国はこちら

yoshitaku-jp.hatenablog.com

宮崎

鹿児島

熊本

佐賀

長崎

福岡

大分

おしまい

Hacktoberfest2018 に参加してみた

Hacktoberfestとは

hacktoberfest.digitalocean.com

OSS活動を促進するイベントです。Hacktoberfestに登録してから10月の間にパブリックリポジトリに対してプルリクエスト(PR)を5つ以上送ると，オリジナルTシャツがもらえます！

詳細な記事があるのでリンクを貼っておきます。

codezine.jp

dev.classmethod.jp

2018年は達成できた

流れ

1,2件目

このときはHacktoberfestを勘違いしていました…OSSのリポジトリに送ったPRしかカウントされないと思っていました。Hacktoberfestに登録したあと、知り合いのリポジトリにPR出したらカウントされていました。ラッキー…

Yoshitaku jp/signup and login by yoshitaku-jp · Pull Request #26 · minmin0530/chat · GitHub

【UPDATE】index.js by yoshitaku-jp · Pull Request #27 · minmin0530/chat · GitHub

3件目

is:issue is:open label:HacktoberfestでGitHubを検索していたら、

github.com

こちらのリポジトリにたどり着きました。 書いてある英語も難しくなく、適度にGoogle翻訳をしながら理解し、さらにコードも読んでいると、割り切れる数字を探すテストコードを作っているみたいでした。

def test_for_25(quotient):
    """Divisibility test to check if the quotient is 
    a multiple of 25, without using the modulo operator.
    This can be done, by checking if the final digit is 
    one of 00, 25, 50, or 75"""
    last_two_digits = str(quotient)[-2:]
    if last_two_digits in ["00", "25", "50", "75"] or last_two_digits == "0":
        return True
    else:
        return False


# Test to check that the function behaves properly
for i in range(400):
    print("{} divisible by 25 {}".format(i, test_for_25(i)))

OSSを直すのはハードルが高いけど、算数ができればいいなら自分でもできると思い挑戦し、無事にマージしてもらえました。

【ADD】TestFor8.py by yoshitaku-jp · Pull Request #84 · AneriMehta/DivisibilityTestPrograms · GitHub

4,5件目

3件目は運良くリポジトリを見つけられました。しかし、次に貢献できそうなリポジトリがなかなか見つかりませんでした。 しばらく調べていると、Hacktoberfest上で人気のあるリポジトリを紹介してくれていることに気がついたので、そこから探すことにしました。

ここに並べられているリポジトリは初心者やはじめての人を対象としている物が多く、README.mdに丁寧なPRの説明が書いてあるものが多いです。下のものは各国の翻訳ページまであります。リンク先は日本語ページです。

github.com

GitやGitHubをどう動かしたらいいかわからない人は、このようなリポジトリでなれていくのもいいと思います。自分は2回分利用させてもらい、無事に5件達成となりました。

OSSの活動

HacktoberfestはOSS活動を普及させるワールドワイドでの活動ですが、日本でもOSS活動を普及させるコミュニティがあります。

oss-gate.github.io

以前、ビギナーとして参加しOSSのRedashにPRを出しました。 yoshitaku-jp.hatenablog.com

サポータとしても活動したいのですが、タイミングが合わず保留となっています。 Hacktoberfestを通じてPRに対する抵抗が全くなくなったので、ぜひとも貢献していきたいです。

まとめ

• 初心者向けのリポジトリが用意されていて、心理的なハードルを下げることができた
• 自分で貢献できるリポジトリを見つけ、PRを出せたのは貴重な経験となった
• これからはもっとOSSに関わっていきたいと思う
• Tシャツ楽しみ

Git・GitHubに関する本

読みました。おすすめです。

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

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)

Gitが、おもしろいほどわかる基本の使い方33

AWS Lambdaで東京の時刻を簡単に取る

最初から余談

小ネタだけどメモ代わりに…

いろいろ教えてもらったのでアイキャッチ画像を練習がてら、こだわってみた。

タイトル含め、「人にわかりやすく伝えるには」と考えると、悩むことは多い…

あとKeynote使ってるときはマウスのほうがいい気がする。持ってないけど…

Magic Trackpad...うーん…

AWS Lambda内で時刻取得をしたらUTCが取れてしまった

東京リージョンだったので何も考えず東京の時刻が取れると思ったら、UTCが取れました。知らなかった…

書いたPythonプログラムの一部です。

keyword = 'yoshitaku*jp.hatenablog.com'
print('keyword is ' + keyword)
print('----------------------------------------------------')

now = datetime.datetime.now()
str_now = now.strftime('%Y-%m-%d_%H:%M:%S')
print('until is ' + str_now)
befor_1hour = now - datetime.timedelta(hours=1)
str_befor_1hour = befor_1hour.strftime('%Y-%m-%d_%H:%M:%S')
print('since is ' + str_befor_1hour)
print('----------------------------------------------------')

環境変数を設定すると東京の時刻が簡単に取れる

AWS Lambda上の環境変数で、KeyにTZ、ValueにAsia/Tokyoと入力すると…

無事に東京の時刻が取れました

※若干時刻がずれているのはキャプチャを取るタイミングの問題です。気にしないでください。

便利…簡単…

技術書典5に参加してきた！！

技術書典4に続き、技術書典5に参加してきました！

yoshitaku-jp.hatenablog.com

戦利品

今回の一番の目当ては、「現場で使える Django の教科書《実践編》」です。こちらは、前回のとき「現場で使える Django の教科書《基礎編》」と出会い、その続編が制作・販売される予定であることを聞きとても楽しみにしていました！

他にも、

yoshitaku-jp.hatenablog.com

で、話題にした「write-blog-every-week」Slackに入られている方々が出されるということで、PHPもGoもやったことないですが買ってみました！新しい出会いがあるのもいいこと！ありがとうございます！

<2018/10/11追記>
PHPの本を出されたこのすみさんのブログ記事です！ www.konosumi.net <2018/10/11追記ここまで>

当日の様子

30分で入れました#技術書典

— よしたく (@yoshitaku_jp) 2018年10月8日

12時頃に到着し、30分程で中にはいれました。あまり物理本にこだわりがなく電子があるなら電子版でもいいやと思っていたので、ゆったりいきました。中は少し暑かったので、半袖Tシャツに脱ぎやすいパーカーとかが正解だったかも？長袖一枚は調整が難しかったです。

技術書典公式アプリ

これ便利ですね。けど、アプリ起動するのと1000円札出すのなら、1000円札出すほうが早かったという意見も見ました。確かに…。 ですが、あまり現金を持ち歩かないようになってきたので個人的には嬉しいシステムでした。後払いの通知も、翌日に届き無事に決済を済ませました。

個人的に感じた難点

この後払いシステムを採用するかはサークル参加者側の判断なんですね。これ知りませんでした。全サークル義務だと思ってた…。お財布に1万円札と3000円しか入ってなかったので、途中で「うおおおおおおおおおおおおおおおおおおおおお」となっていました。

まとめ

4に続き楽しめました！！会場も広くなり、サークルも多くなり、人も多くなり…すごいですね！！！この文化がまだまだ続いていってくれることを望みます。次こそはサークルで参加したいです！！

参加者の方、サークル参加者の方、運営の方お疲れ様でした！次回も参加させていただきます！

新しい弁当箱を買った

https://twitter.com/yoshitaku_jp/status/1047494375784075264

大学生のときにレポートやら卒業論文やらを書くために買ったMBAが、そろそろやばい気がしてきました。

MacBook Air (13-inch, Mid 2012)
プロセッサ　1.8 GHz Intel Core i5
メモリ 4 GB 1600 MHz DDR3

そして10月に入って新しく買ったPCはMac miniです。

Mac mini (Late 2014)
プロセッサ　2.6 GHz Intel Core i5
メモリ　8 GB 1600 MHz DD

これにした理由は、

• 自宅だけで利用することが多い
• モリモリMBPを買って自宅でバリバリ開発ができるわけではない

のでここに落ち着きました。

メルカリで5万円いってなかったので個人的にはOKです。MBAも引退させる予定ではないです。

転職してもっとバリバリ開発することになったら、モリモリMBP買ってみようと思います。

新しいMac mini出ないで！！！

バリバリモリモリ。

最近入った3つのSlack

9月10月になり、いろいろ環境を変えたいなと思っていました。

そこでいくつかのSlackに入って自分の意識と行動を変えてみようと思いました。

3つしかありませんが、だいたい入った時系列で並べています。

プログラミング自習室

オンラインサロン「プログラミング自習室」開設のおしらせ！｜NZ MoyaSystem

プログラミング自習室は

• 「なかなか自習の時間が取れない」と悩んでいるプログラマの方
• 「プログラミングを勉強する仲間がほしい」と感じている初心者の方

を対象にしていて、自分は自習を継続していきたい気持ちと初心者経験者関係なしにプログラミングする仲間がほしいなと思って入りました。50人ほど集まり、現在は新規の入会を受け付けていません。主催者のお仕事が捌ききれなくなってしまうからのようです。

自習する内容を共有したり、わからない所があれば気軽に質問できていいと思います。しかし、ニッチな部分の質問だと回答できる方がいなくてまだ人数が少ない段階では難しいです。

最近は、何人かでプロダクトを作ってみようということになり、node.jsを使ったチャットアプリの開発をしています。

スピードはゆっくりですが、一人で作っている上では気づくことのできない、Gitのブランチの切り方や、コミットの単位など参考になることが多いです。逆に一つ一つ確認しながら・納得しながら進んでくれるので自分はすごく嬉しいです。

もう1つ2つぐらいプロジェクトがあると、並行で進めていけていいかなと思いますが、このSlackの目的が「プログラミング自習室」なので本質とずれるかなと思っています。

毎日覗くのが楽しいSlackです。

write-blog-every-week

kojirooooocks.hatenablog.com

id:kojirooooocks さんが作ってくださった週イチでブログ書くことをチェックし合うSlackです。1番目に入りました（自慢）

ブログの内容・質・量は一切問いません。週に1回以上ブログを更新することだけです。

それ以外のルールっぽいものは

• 週に1記事かけなかったら、翌週は2記事
• さらに書けなかったら、3記事
• 4記事分溜まったら退会

ですが、そこまで強制力ないルールです笑 口コミで広まって現在19人も入っています。気軽に入ってきてほしいです。 ブログを書いていないと、特定の曜日にbotから煽られます。それを見たメンバーからも煽られます。気軽に入ってきてほしいです。

write-blog-every-weekのいいところ

最近いい流れが2つほどできていて、1つは id:kojirooooocksさんが、こちらの記事を公開したところ、Slack上で指摘がもらえていたことです。

kojirooooocks.hatenablog.com

中略

そして指摘いただいた内容の記事です。 kojirooooocks.hatenablog.com

指摘がもらえているのを横から見ていましたが、純粋にすごい！と思っていました。

---

もう一つのいい流れは、Slack内のメンバーからリアクションをもらえることです。

これは生の声が一番だと思うので、以上です笑

毎日覗くのが楽しいのと、ブログが書けていないときは覗きに行きたくないSlackです。

入江開発室

camp-fire.jp

これは10月に入り眺めています。まだ何もできていないの理由があって、自宅のPCを新しくしてセットアップに時間がかかっていたからです笑 いろいろプロジェクトがあり戸惑っていますが、とりあえずすべてのチャンネルに入って様子を見てみようと思います。 人も多いこともあってメッセージが流れるスピードも早いので、日中仕事している自分についていけるか不安です笑 テンプレ的な動き方があるとしたらどなたかに教えてほしいです笑

まとめ

• いくつかのSlackに入った
• 積極的に動いていきたい
• 他にも入ったけど、積極的には動けていないのでまたそのときに