tag:crieit.net,2005:https://crieit.net/users/seuyu_bin/feed 醤油瓶🍘@TypeScript入門中の投稿 - Crieit Crieitでユーザー醤油瓶🍘@TypeScript入門中による最近の投稿 2020-12-14T07:00:10+09:00 https://crieit.net/users/seuyu_bin/feed tag:crieit.net,2005:PublicArticle/16356 2020-12-14T07:00:10+09:00 2020-12-14T07:00:10+09:00 https://crieit.net/posts/2020-5fd68eea88ed6 2020年に作ったものと神の宿る場所 <p>この記事は<a href="https://crieit.net/advent-calendars/2020/crieit">なんでも Advent Calendar 2020</a>の14日目の記事になります。</p> <p>今年の振り返りポエムをどこに書こうかなと思ってCrieitさんにお世話になることにしました。<br /> 醤油瓶(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/seuyu_bin">@seuyu_bin</a>)というアカウント名で活動しています。</p> <h1 id="2020年"><a href="#2020%E5%B9%B4">2020年</a></h1> <p>今年は世界的に大きく変わりましたが、私としてもRailsエンジニアとして駆け出した変化の大きい年となりました。</p> <p>去年の末にSIerから転職して実務未経験からRailsを触り始め、なんとかクビにならずに仕事こなせるようになりました。</p> <p>2020年、特に目標を持っていたわけではないですが「何か新しいこと」というのは根底にあって、今までで最もいろんなものを「作った」年になったなと思います。</p> <p>時系列順に作ったものを列挙して振り返りたいと思います。</p> <h1 id="4月ショートショートに手を出す"><a href="#4%E6%9C%88%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%81%AB%E6%89%8B%E3%82%92%E5%87%BA%E3%81%99">4月ショートショートに手を出す</a></h1> <p>初手から開発の話じゃないです。小説の話です。</p> <p>ショートショートとは数百から数千文字程度の超短編小説のことです。著名なショートショート作家である田丸雅智さんの情熱大陸か何かのテレビをみて、自分も書いてみようと思い立って書いてみました。</p> <p>自分が書いていたのはショートショートの中でも、超ショートショートと呼ばれる2000文字くらいのお話です。</p> <p>書いたショートショートはnoteに公開しています。→<a target="_blank" rel="nofollow noopener" href="https://note.com/seuyu_ss">セウユ</a></p> <p>4月末から5月くらいにかけて13個ほど作りました。</p> <p>今読んでも我ながら面白いやつもあれば、「ちょっと何言ってるかわからない」というのもあります。</p> <p>個人的ベストは、ちょっと頭おかしい系の「<a target="_blank" rel="nofollow noopener" href="https://note.com/seuyu_ss/n/n7b10687bb61b">クリップ</a>」という作品です。</p> <h2 id="小説を書いてみて"><a href="#%E5%B0%8F%E8%AA%AC%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%BF%E3%81%A6">小説を書いてみて</a></h2> <p>ショートショートを書いてみて思ったのは、2000文字というレベルでさえ作るのに苦労するのに、長編小説をかける人の頭の中は一体どうなっているのだろうということ。</p> <p>普段さっと読んでしまうなろう系のラノベだったり、著名な小説家だったり、ショートショートを書いてみた後に触れた小説という小説の全てがすごいと思えるようになって、「どうやってプロットを整理したんだろう」とか、「この言い回しってどうやって生きてきたら思いつくのだろう」と小説に対してただ楽しむだけでなく、1段踏み込んだ考えをするようになりました。</p> <p>これは実際に作ってみて本当によかったことで、字を書くということに対する解像度が一つ上がったかなと思います。</p> <p>ショートショートを書くというのは、ネタが浮かんだら数時間で完成まで持っていけるので割とフットワークの軽い趣味になります。今後も定期的にゆるく続けていきたいです。</p> <h1 id="5月ボカロに手を出す"><a href="#5%E6%9C%88%E3%83%9C%E3%82%AB%E3%83%AD%E3%81%AB%E6%89%8B%E3%82%92%E5%87%BA%E3%81%99">5月ボカロに手を出す</a></h1> <p>ショートショートのネタが割と尽きたタイミングで手を出したのが、作曲です。</p> <p>楽器を習っていたわけでもなく、何か知識があったわけでもなく、とにかくゼロから作曲して、結果としてボカロ曲を2つYoutubeに公開しました。</p> <p>ここで紹介するのはやめておきます笑 ショートショート公開するより恥ずかしい笑</p> <h2 id="作曲する"><a href="#%E4%BD%9C%E6%9B%B2%E3%81%99%E3%82%8B">作曲する</a></h2> <p>「コード進行って何?」みたいなところかスタートしたわけですが、Youtubeで誰かがやさしく解説してくれている時代ですので、入門するのに特にハードルはありませんでした。</p> <p>王道小室進行とか、カノン進行とか、「ああ、聞いたことあるな」というコードの流れがなぜ心地よいのか、スケールの話から、トニック、ドミナントといったコードの機能まで、基本的な知識は全てYoutubeで教えてくれます。</p> <p>作りたい曲のイメージは最初からあって、コード進行がひたすらループする系の曲を作ろうと決めていました。</p> <p>Aviciiが大好きで、最初の曲はAviciiの「wake me up」という曲のコード進行を真似して作りました。コード進行ループ系の曲は初心者としても考えることが少ないので結構とっつきやすいところだったと思います。</p> <p>コードが破綻しないように主旋律を打ち込んでいって「あーでもない、こーでもない」と考えながらメロディを作っていきました。</p> <p>大体1週間、20時間くらいで一応曲としては作れたと思います。</p> <h2 id="作詞する"><a href="#%E4%BD%9C%E8%A9%9E%E3%81%99%E3%82%8B">作詞する</a></h2> <p>割と時間がかかったのが作詞の部分、売れているアーティストって何か伝えたいことを詞にしていると思うのですが、残念ながらあんまり伝えたいことが浮かばず、ありがちなストーリー、ありがちなセリフしか浮かんできませんでした。</p> <p>最終的に出来たものも特に面白みもなく、ありがちなものになってしまったので、悔いが残っている部分です。</p> <p>作曲は楽しく夢中でやった感がありましたが、作詞はひたすら苦しみました。</p> <h2 id="作曲してみて"><a href="#%E4%BD%9C%E6%9B%B2%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6">作曲してみて</a></h2> <p>ここでも解像度の話ですが、実際にコード理論を勉強したり作ってみたりしたことで、音楽を聴くことに対する解像度が上がったと思います。良い曲というのは、ドラムのハイハットの入れ方一つ、ベースの音一つ一つに工夫があって、好きだなと思う曲をよくよく聴いてみると音作りから詞の一単語に至るまで、細部まで計算されていたり、工夫が凝らしてあります。</p> <p>まだまだ初心者なので知ったかレベルですが、やればやるほど奥の見えない世界の一端を覗けた気分になりました。</p> <p>2曲目は、ちょっとだけレベルアップしたものを作れましたが、1曲目、2曲目合わせても合計100再生に満たずYoutubeの海に沈んでいきました。</p> <p>2021年は一つネタが浮かんでいるので、創意工夫をふんだんに入れてゆっくり時間をかけて作ってみたいと思っています。</p> <h1 id="8月フラットアイコン制作に手を出す"><a href="#8%E6%9C%88%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E5%88%B6%E4%BD%9C%E3%81%AB%E6%89%8B%E3%82%92%E5%87%BA%E3%81%99">8月フラットアイコン制作に手を出す</a></h1> <p>絵なんてほとんど書いたことなかったですが、アイコン制作をしてみようと思ってフラットデザインのアイコンを制作し始めました。理由はあんまり覚えてないですが、Youtubeのフラットデザインのイラスト制作のチュートリアル動画を見て「楽しそう」と思ったからだと思います。</p> <p>これがなかなか楽しくて、毎日コツコツ作りました。<br /> Affinity Designerというイラストツールを使っていますが、だんだん慣れてくるとショートカットも手に馴染んで、四角と三角と丸でなんでも作れるようになってきました。</p> <p>普通のイラストを描くのと異なる点は、ペンを使わず、マウスとトラックパッド操作だけで図形をベースに作るので、どうやっても整った形にしかならない点がとっつきやすいと思います。</p> <h2 id="フリー素材サイトを作り出す"><a href="#%E3%83%95%E3%83%AA%E3%83%BC%E7%B4%A0%E6%9D%90%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8A%E5%87%BA%E3%81%99">フリー素材サイトを作り出す</a></h2> <p>はい、やっと開発の話です。出来たアイコンをベースに素材サイトを作ろうと思いました。</p> <p>そろそろエンジニアとして最新のフロント技術を勉強せねばと思っていたので、Nuxt.jsとGatsby.jsを試してみて、結局ReactのGatsbyで作ってみました。</p> <p>出来上がったサイトがこちら「<a target="_blank" rel="nofollow noopener" href="https://flat-svg-designs.net/">FLAT SVG DESIGNS</a>」です。</p> <p>詳細についてはZennで記事を書いています。<br /> 「<a target="_blank" rel="nofollow noopener" href="https://zenn.dev/seuyu_bin/articles/709ad8e90be73f9d9a3c">Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた</a>」</p> <p>この開発でReactとVueの雰囲気をつかめましたし、javascriptをガッツリ書いたのも初めてでした。</p> <p>i18n対応したのでHacker Newsに投下してみたら、割と高評価を貰えて、その後誰かがRedditのWeb Designカテゴリの掲示板にリンクを貼ってくれて、リリースしてから1週間ほどは毎日数千人が全世界から流入してくるなど、世界をまたにかけたサイトとなりました笑(なおフィーバー後は1日数十人程度に落ち着きましたorz)</p> <p>また、残念ながらフィーバー中はAdsense審査待ちで、フィーバー後に審査が通ったので全く恩恵預かれず。</p> <p>次に出すアプリはどんなに待ち遠しくてもAdsenseが通ってからと心に決めました。</p> <h2 id="Tailwind CSSに出会う"><a href="#Tailwind+CSS%E3%81%AB%E5%87%BA%E4%BC%9A%E3%81%86">Tailwind CSSに出会う</a></h2> <p>あと、このサービスを初めてよかったのがTailwindCSSというフレームワークに出会ったこと。<br /> NuxtJSのデフォルトCSSフレームワークの一つとして入っていて、「これなんだろう?」とたまたま導入してみたことが出会いでした。</p> <p>普段仕事でRailsを触っている中で、スパゲッティ化したCSSを修正したりしている状況で、このフレームワークの思想は衝撃的でした。「これが完全なる自分の中の答え」と崇め、崇拝しています。</p> <h1 id="フロントを触り出す"><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%92%E8%A7%A6%E3%82%8A%E5%87%BA%E3%81%99">フロントを触り出す</a></h1> <p>GatsbyJSで調子に乗り始め、「やっぱりシステム開発が一番楽しいかな」と再認識したのでフロントをもっと触ろうということでNext.jsとTypeScriptに入門しました。</p> <p>今は機能を絞ったTwitter連動系のミニアプリを製作中です。</p> <p>実はもうリリースできる状態ではありますが、Adsense承認待ちです笑。</p> <p>昨日審査落ちてたので、年内のリリースは出来ないと思います。。</p> <p>Adsense通るまで絶対にリリースしません笑</p> <h1 id="神は細部に宿る"><a href="#%E7%A5%9E%E3%81%AF%E7%B4%B0%E9%83%A8%E3%81%AB%E5%AE%BF%E3%82%8B">神は細部に宿る</a></h1> <p>そんな感じで小説執筆、作曲、アイコンイラスト制作、Webアプリ開発と散らかりすぎですが、「モノを作る」という点で共通点があり、得られた教訓も同じです。</p> <p>それは、「神は細部に宿る」ということ。タイトル回収。</p> <p>誰も気がつかないかもしれない細部にどこまで拘れるか、どこまで考えて工夫を盛り込めるか。</p> <p>これがどれだけ最終成果物に影響するか、というのをひたすら感じました。</p> <p>そして、どんなジャンルでも良い作品というのは創意工夫が詰め込まれ、考えに考えて作られたものだということ。初心者レベルの知識がついたことによって創意工夫を発見できる視点が強化されたと思います。</p> <p>繰り返しの言葉ですが、解像度が上がりました。</p> <h1 id="2021年は"><a href="#2021%E5%B9%B4%E3%81%AF">2021年は</a></h1> <p>自分のダメなところははっきり分かっているつもりです。</p> <p>「継続できないこと」「限界まで諦めずに工夫し続けられないこと」</p> <p>その代わりジャンル問わずフットワーク軽くなんでも手を出せるという能力は気に入っています。</p> <p>でもそれだとただの器用貧乏で終わってしまい、結局何もできない人です。</p> <p>2021年はそこに手を入れなきゃなという思いです。継続、そして突き詰めて考えること。</p> <p>これをモットーに来年はやっていこうと思います。運営者ギルドというコミュニティに混ぜてもらったのでその中で頑張ってる人を見て奮起していこうと思います。</p> <p>なんか4000文字もポエムを吐いてしまいましたが、最後まで読んでいただきありがとうございました。</p> <p>P.S.<br /> フラットアイコン作り始める前に、漆喰と珪藻土を使ったアートパネルを5作品くらい作ったりもしてましたが、それはもう書くの面倒なので割愛しました。</p> 醤油瓶🍘@TypeScript入門中