2021.05 Zennで、Vue.jsの入門記事を書く

Zenn

引き続き、Vue.jsについて調べてました。

Vue.jsでアプリを作って、GitHub Pagesでデプロイする:Vue.js Step by Step
https://zenn.dev/catch/articles/install_vuejs

VutifiyとVee-Validateを使ってみる:Vue.js Step by Step
https://zenn.dev/catch/articles/vutify_and_validation

Nuxt.jsでアプリを作って、GitHub Pagesでデプロイする:Vue.js Step by Step
https://zenn.dev/catch/articles/install_nuxtjs

VuePressを、GitHub Pagesでデプロイする:Vue.js Step by Step
https://zenn.dev/catch/articles/install_vuepress

Nuxt.jsで管理画面を作って、GitHub Pagesでデプロイする:Vue.js Step by Step
https://zenn.dev/catch/articles/install_vuepress


2021.04 ざっくり、Webシステムとオープンソースビジネス

このブログ(ほかのも)、ぜんぜん更新できないので、やっている活動をまとめて記録していこうと思います。随時更新中。

Qiita

新年度のタイミングにあったおかげか、Webシステムの記事が好評でした。LGTM(Looks Good To Me)も、まだ増えてます。Docusaurusは、2月ごろからやっている。

ざっくり、Webシステムの発展と最新状況 2021
https://qiita.com/y_catch/items/1597a9a2ac2f7c8c43bf

ざっくり、オープンソースビジネスの最新事例2021
https://qiita.com/y_catch/items/2947121bedf86d4504fc

React製の静的サイトジェネレータDocusaurus v2を、GitHub Pagesにデプロイする
https://qiita.com/y_catch/items/46b7eb7d618d95fbc9c3

Zenn

関連して、静的サイトジェネレータ(SSG)とかVue.jsとか調べてました。ためしに、Zennで書いてみた。

Zennで記事を書き始める
https://zenn.dev/catch/scraps/874ce1d58cbd55

Vue.jsでアプリを作って、GitHub Pagesでデプロイする:Vue.js Step by Step
https://zenn.dev/catch/articles/install_vuejs

Github

動かしてみたやつ。

ycatch / docusaurus
https://github.com/ycatch/docusaurus リポジトリ
https://ycatch.github.io/docusaurus/ 公開ページ

ycatch / vue-press
https://github.com/ycatch/vue-pressリポジトリ
https://ycatch.github.io/vue-press/ 公開ページ

ycatch / vue-app
https://github.com/ycatch/vue-appリポジトリ
https://ycatch.github.io/vue-app/  公開ページ

ycatch / vuetify_app
https://github.com/ycatch/vuetify_appリポジトリ
https://ycatch.github.io/vuetify_app/ 公開ページ

ycatch/vue-nuxt-app
https://github.com/ycatch/vue-nuxt-appリポジトリ
https://ycatch.github.io/vue-nuxt-app/  公開ページ

そのほか

ぜんぜん映画を見にいく雰囲気ではなく、読書が増えている。


paizaスキルチェックでAランクを取るまでにやったこと

50半ばのおっさんですが、ようやくpaizaスキルチェックでAランクをクリアできた。
そのために、やったこととちゃんとやらなかったことを整理しておきたい。

長らくコンピュータを仕事にしてますが、たいしたプログラミング能力があるわけでなく、5年前にやったときはランクBだった。これがずっと心の片隅にひっかかっていたので、本腰を入れて再勉強してみた。

やったこと1. 解説動画をみる

まずは、どんなふうに問題を解けばいいのか、paizaラーニングの解説動画をチェック。
このあたりは、ほぼ無料プランで見ることができる。
特に「日別訪問者数の最大平均区間」は、Aランクでの解き方も解説しているのでおすすめ。
うなぎ屋の解説動画は、PHP版だけだし後半が有料だけど、最初だけでも見ておくと問題のとらえ方がよくわかって良いと思う。

やったこと2. スキルチェック過去問題をやる

次に、解答コード付きの問題を実際に解いてみる。制限時間がなく、何度でもチャレンジできて、paizaランクにも影響しないので、じっくり問題に取り組める。中に「長テーブルのうなぎ屋」もあって、解答チェックもしてくれるので、欠かさずやる。

やったこと3. スキルチェック見本問題をやる

さらに、見本問題も実際に解いてみる。
こちらは、スキルチェック入門編2の「日別訪問者数の最大平均区間」がある。

やったこと4. レベルアップ問題集をやる

そして、これもやる。とくに「Bランクレベルアップセット」は、DランクやCランクの関連問題を解いていくので、レベルアップに最適です。

あんまりやらなかったこと. ネットに解説文があれば読む

追記:自力で解くことを重視していたので、実際にはあまりできなかったんだけど、レベルアップ問題集は、ネット上にいくつか解説があるので、それもよく読んでみると役立つと思う。

Aランクを取ったあと、再度自分でも解いてみた。

 ふりかえり その1

ここまでは、ほとんどBランクのおさらい。
やってみて、自分なりに不得意なところを振り返ってみた。
ひと通りできたけど、頭に入る複雑さの度合いが低いなぁと感じた。
ロジックを追いかける能力が、まだまだ低いのか。
これは、paizaスキルチェックだけでは解消できそうもないので、
一般的なプログラミングのテクニックをもう少し勉強してみることにした。

(ただし、後からふりかえってみると、Aランクのために以下を勉強したのは、ちょっとやりすぎだったかも。いろいろな問題を解いたり、その解説を読むのは役に立ったけど。難しく考えないと解けないとしたら、じつは問題を勘違いしているかも)

やったこと5. 定番のプログラミング

そこで、ソートや再帰呼び出しなど、よくあるプログラミングの課題にチャレンジしてみた。定番アルゴリズムみたいなものを調べて、自分なりに実装してみる。

このとき心がけたことは、こんな感じ。

  • コメントで手順を整理してからプログラミングする
  • 小さな実験的なプログラムを作って、すこしずつ複雑にしていく
  • 他の人が書いたコードや解説を探して、じっくり読む

やったこと6. 数学パズルの第1章入門編

それから、こんな本を買ってみた。

「シンプルで高速なコードが書けるようになる70問」というサブタイトルがついているので、その第1章だけやってみた。
入門編でレベルは高くないらしいんだけど、案外できない問題、わからない問題がある。
ネットで解説を見つけたら、そこでも分からないことが見つかるので、またいろいろ調べてみた。

やったこと7. 再帰検索

特に、再帰呼び出しを使ったツリー探索について、ちゃんと分かってないことに気が付いた。名前は知っているつもりでも、自分では実装できないので、これもコードを書いてみた。

やったこと8. 順列・組み合わせ

そうこう調べていくうちに、最短経路問題というのが出てきた。これも、プログラミングの定番問題らしいんだけど、意味がよく分からなかった。調べてみたら、高校受験や高校数学あたりで登場する、順列・組み合わせのバリエーションらしい。
高校生向け数学解説サイトみたいなところに、解説文がたくさんあった。
paizaスキルチェックに登場するような、問題の立て方がたくさん登場していた。
どうやら、オレは、このあたりの知識がスッポリ抜け落ちているぞ!
そこで、練習がてら、こんなコードを全部実装してみた。

頭に入る複雑さも、こういうパターンを知っていると、かなり改善される感じがした。

やったこと9. 基本的な文法の再確認

その過程で、プログラミング言語の文法ついて再確認してみた。
なかには、ちょっと引っ掛かりやすい使い方もあるので、基本的な使い方のコードを書いてみた。

  • 配列から、特定範囲の要素を切り出す
  • 2次元配列のソート

やったこと10. Aランク問題に挑戦

というわけでして、再チャレンジ。
簡単そうな問題を探してやってみたら、
制限時間6時間のところ、1時間くらいで解けてしまった。
積年の課題が解消できて、いやぁ、よかったよかった。

ふりかえり その2

  1. まずは、Aランクの問題が解けてよかった。
  2. 頭が悪いのではなく、プログラミングの定番パターンを知らないだけ。そこがとりあえず分かってよかった。場数重要。
  3. あるいは、問題を読み間違えている。特定の答えを求めるためには、愚直にやらなくていいことも多い。難しいことを知っているから書けるプログラムもあるけれど、難しくしか書けないとしたら、じつは問題を勘違いしているかも。
  4. スキルチェックの見本問題なんかはいいんだけど、本問題で一部のテストパターンがエラーになった場合、どこでひっかかっているか分かりにくいので困った。自分なりにテストパターンを作ればいいし、問題を起こすパターンを絞り込むこと自体がデバックのかなりの占めていることもあるんだけれど。
    テストパターン10個をちゃんと作るのは、対象ランクよりも難易度が高い場合もある。
    どこかで一度、見本問題で10パタ―ン全部がどうなっているか調べてみるといいのかも。
  5. 個々のテクニックを知っていれば、ランクが上がるわけではない。
    だけど、プログラミングの場数を踏んでいく中で、このあたりに出会う場面は多そうなので、おのずと把握しているのかも。場数重要。
  6. 今まで自分で作ってきたいろいろな物が、ちょっと単純すぎたのかなと感じた。
    解決策が単純なのは、良いところのひとつなんだけど。
    もう何段階か複雑で、高い精度の解決策を目指してもいいのかも。

というわけで、次のレベルを目指す方々の参考になれば幸いです。


Land of Lispを読んでみる – その3

引き続き「Land of Lisp」を読んでみた。なんとか最後までたどり着いた。

第14章:関数型プログラミング

手続き型コードと関数型と高階プログラミングを
同じ課題でコードを書き分けてみる。
ゲームはなし。
このあと、数章にわたって、大きなゲームプログラムを作って
段階的に拡張していく(らしい)。

第15章:ダイスウォーズ

関数型プログラミングで、戦略ゲームを作る。
DiceWars」「KDice」というFlashゲームが元ネタらしい。英語版のWikipediaには、 Taro Ito’s Dice Warsが作ったと書いてあるぞ!
小さな盤サイズからはじめて、かなり強いCPU対戦モードも作る。
コードは217行。
クロージャ、メモ化、末尾呼び出し最適化というテクニックを利用して、高速化する。

ただ、手元のPCが不安定になってしまい、Common Lispを動かしていたWSLをアンインストール。残念ながら、ここから、あまり写経をしていない。

第16章:マクロ

噂に名高いLispのマクロ。
いや、これは面白い。
JavaScript版CommonLispでやってみた。

第17章:ドメイン特化言語

マクロの実例として、ドメイン特化言語を扱う。
SVGフォーマットやHTMLを生成する簡易記法。
さらに、第5章で作ったテキストアドベンチャーゲームを拡張。
前のコードに、30行ほど追加するだけ。

第18章:遅延プログラム

ふたたび、ダイスウォーズ。
盤サイズが大きくなると、CPUモードで先読みできなくなるため
遅延プログラムで探索ツリーを刈り込む。
前のバージョンに、180行ほど追加。

第19章:ダイスウォーズに、グラフィカルなWebインターフェースを追加

さらに、200行ほど追加。

第20章:ダイスウォーズの仕上げ

さらに、160行を追加して完成!

エピローグ:Lispマンガ

というわけで、なんとか最後まで読んだけど、写経は中途半端なってしまった。
公式サイトのサンプルコードを見ると、600行ほどで、ここまで作り込めるのはすごいな。

それに、今までプログラミング言語の入門書を読んできても、ここまで写経させるものはなかったし、写経しているうちの理解度の高さはスゴイ。もっと写経したくなる。南無阿弥陀仏。

ちゃんと、独特のふざけたスタイルではあるけれど、基本的な事項を説明しながら、高度なプログラムを実現してみせる本は、ほかにはない。

Lispの本を、もう何冊か読んでみたいし、RubyやJavaScriptのメタプログラミングについても調べてみたくなりました。


Land of Lispを読んでみる – その2

前回に引き続き、がんばって 「Land of Lisp」を読んでいる。

コードが複雑になってきたので、普段使っているテキストエディタのVS Codeに、
カッコを色分けするエクステンション「Bracket Pair Colorizer 2」を導入。

第9章:いろいろなデータ型

配列、ハッシュ、ジェネリック、構造体
Javaのオーバーロードのような機能もあるのね。
作ったゲームは、RPGの戦闘シーンのような「オーク・バトル!」
ここで書いたコードは、約270行。
ただし、いくつかのモンスターの入力を省略。

これで、第2部のコア機能の説明が終了!

第10章:Loopマクロ

ここから第3部。Lispの周辺機能の解説。
まずは、Loopマクロの変態っぷりを味わう。

作例として、進化シミュレーションをLispで実装。
約200行。

これは、A・K・デュードニーの「コンピュータレクリエーション」に載っていた
「Simulated evolution: wherein bugs learn to hunt bacteria」をLispで実装したものだとか。
日本語版は、別冊サイエンス「コンピュータレクリエーションIV」の
「進化のシミュレーション:虫がバクテリアを食べるようになるまで」。

第11章:formatコマンド

機能豊富なformatコマンドの説明。

サンプルゲームは、クラシックなロボット対戦ゲーム。
50行ほどのコードだけど、Loopとformatがてんこ盛りなので
公式サイトからダウンロードしてみた。
http://landoflisp.com/source.html

第12章:ストリーム

標準入力、ファイル操作、ネットワークなど。どれも、ストリームで扱うことができる。

作例として、2つのclispコンソールを用意して、ネットワークを通じてテキストを送る。
Windows10でも、WSLのターミナルを2つ立ち上げて実行できた。

第13章:Webサーバーをつくる

ストリームで、標準入力やファイル・ネットワークが操作できるようになったので、簡単なWebサーバーを作る。そのために、例外処理についても取り上げる。

書いたコードは、100行くらい。
リクエストヘッダーとリクエストボディを解析して、動的なWebページを返す。

コードはちゃんと動いた。だけど、レスポンスはボディだけでヘッダーがない。そのせいか、ブラウザがちゃんとWebページを表示してくれない。Firefoxは、HTMLをテキストとして表示するし、Chromeは”正しいWebページではない”と言ってくる。結局、もうひとつWSLコンソールを立ち上げて、Curlコマンドで動作確認。

第13.5章:閑話休題

息抜きなのか!?なぞのマンガが登場。

Haskellをdisっているようにみえるが、はたして…

第3部、完。


というわけで、12日ほどで284ページ/475ページ。
ざっと60%をクリア。
Common Lispも、軽量スクリプト言語みたいに使えるんだな、ってことがわかってきた。
続く…


Land of Lispを読んでみる – その1

さいきんアウトプットが少ないと、オルターエゴが、どーもうるさい。

もうちょっとプログラミング能力を上げたいと思って、
長いこと積読になっていた「Land of Lisp」を読んでいるので、
その途中経過を書くことにした。

Lispの本は、全体的にアカデミックで小難しい雰囲気だけど、この本は違う。
作るのも、ゲームだし。ミュージックビデオもある!

読書方針としては、コードをちゃんと写経する。登場した関数の役割りをちゃんと確認する。
12月15日くらいから読みはじめて、年末年始にどこまで進むか!

はじめに

もう、ここから長いw。
11ページあって、Lispがどんなにすばらしいか、なぜマイナーなのか、
コンピュータの歴史にそってコミカルに描いている 。

第1章:環境構築

CLISPを導入する。
公式サイトでは、Windows用としてCygwin版を紹介しているが、
今となってはWSL(Windows Subsystem for Linux)が早いと思う。

詳しくは、clispのメモを参照

第2章:数当てゲーム

人間が考えた数字を、プログラムに当てさせるゲームを作る。
10行くらいで、データ定義や関数定義を学ぶ。

第3章:基本構文

リストとか、carとか、cdr。

第4章:条件分岐

nilの話。ifとかcond、case。

第5章:テキストゲームのエンジンを作る

テキスト型のアドベンチャーゲームのエンジン部分を作る。
walkとlook・pickupコマンドで、魔法使いの家を探検できる。
ここで書いたコードは、110行ほど。

ここで関数型プログラミングスタイルが出てくる。
関数型プログラミング言語は敷居が高いけど、
「引数かローカル変数しか参照せず、値を返すだけ」なら、
なるほど感がある。

第6章:コマンドインターフェースを改良する

ゲームのインターフェースを改良して、カッコなしでコマンドを受け付けられるようにする。
evalが登場。ここで書いたコードは、約56行。

第6.5章:Lambda登場

Lambdaのための短い章。
頭の中で、Lambdaをラムブダと呼んでいるヨ。

第7章:いろいろなリストと、ノード図の出力

ドットリストや連想リスト。
アドベンチャーゲームのマップを画像として出力する。
そのために、clispの中からGraphvizコマンドを呼ぶ。
ここで書いたコードは、約130行。

Lispは、関数をすぐに評価できるので、デバッグする場合も、テストデータをすぐ確認できる。
うむ、これは便利。
なので、関数ごとに簡単なテストパターンを用意して、チェックする。

第8章:荒くれシティでハンティング! グラン・セプト・ワンプス

ランダムに生成される街を探索して敵を見つけ出すゲームを作る。
その名も「グラン・セプト・ワンプス」
ここで書いたコードは、テストパターン込みで約250行。
街のマップを描くため、 前に作ったコードを再利用する。


と、ここまでで、だいたい1ヶ月。
読んだページは、145ページ/475ページ。
ちょうど30%か。

写経して、自分で入力したコードをデバッグしながらだから、ちょっと心が折れそうだったけど、コツがつかめてきたせいか、だんだん楽しくなってきました。

続く・・・。