TypeScriptなんも分からんワイ ワイ「なぁ、ハスケル子ちゃん」 ハスケル子「はい」 ワイ「最近、TypeScriptっていうのが流行ってるみたいやけど」 ワイ「何がええの？」 ワイ「普通のJavaScriptじゃアカンの？」 ハスケル子「うーん」 ハスケル子「じゃあ、VSCodeでコードを書きながら説明しますね」 ハスケル子「例えば・・・」 const titles = ['記事タイトル1', '記事タイトル2', '記事タイトル3'] const newestTitle = titles.pop() console.log(newestTitle) ハスケル子「↑このコードは正しく動くと思いますか？」 ワイ「ええと」 ワイ「まずはtitlesという変数に、記事タイトルが3つ入った配列を格納するんやな」 ワイ「そんで、配列が持ってるpop()メソッドを実行して」 ワイ「一番最後の要

はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに

Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。JavaScriptTypeScript設計Vue.jsNuxt はじめに Composition APIで、Providerパターン(provide/inject)が、なぜ重要なのでしょうか。 Composition APIを使えば「状態やロジック」を簡単にコンポーネントの外に切り出すことができます。 しかしながら、Composition APIだけでは「ロジックや状態は切り出せても、複数コンポーネント間で共有できない」からです。 Composition APIによって、荷物をダンボールに梱包はできても、運ぶ人がいない状態です。 みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか? https:/

こんにちは。 最近は、バーチャルキャストというVRライブ・コミュニケーションサービスで美少女になって配信をすることにハマっているゆいもっぷです。 さて オブジェクト指向。 うまく扱えれば、保守性、機能追加・修正などにすぐれ コードの品質を保ちやすくなります。 逆にうまく扱うことができなければ、当然保守性は悪くなり、機能追加・修正はしにくくなります。 そしてスパゲティコードのできあがりです。 そんなコード、ゆいさんは触りたくないです ゆえに、自分の昔のコードを見ると吐き気に襲われます← 本来、保守性を高めて管理しやすくしようというのが特性であるのに、 コードが増えれば増えるほど汚くなっていく……。 もっときれいなコードを書きたいんだ！ っていうそこのあなた！ 基本的な原則を覚えましょう！ ということで、SOLID原則ですっ！原則原則ぅ〜！ SOLIDの原則 #とは ソリッドスネークのことであ

1. はじめに 本稿は、私が1年以上の期間をかけて、成長し続けるチームに変わることができた施策を紹介します。 本稿は長文なので、忙しい人は太字だけを拾い読みして、興味をもった施策だけを詳しく読んでいただければと思います。 なお、本稿の内容で「Developers Summit 2020 KANSAI」というカンファレンスで発表した結果、ベストスピーカー賞1位をいただきました。発表を視聴してくださった方々に感謝しております。 発表資料と発表動画はコチラ 2. 施策の効果 私の開発チームは当初(1年と数ヶ月前)は、以下の状態でした。 あまり積極的に今のやり方を変えようと思っていないチーム メンバーは、中堅(私)が1名と入社2年目と3年目の3人(後に新人が配属して途中から4名に) 全員、技術記事を書いたことがない 全員、社外の勉強会などのイベントに参加したことがない 全員、開発知識は、業務で教え

今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。 どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。 気に入ったサイトを自己判断で参考にしてみてください。 TwinzLabo コピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。記事に使用しているアニメーションはVue環境で作成されているので普段Vueで開発している方はコピペだけできれいに反映させることができて便利です。記事で紹介されているコードひとつひとつに詳しく解説がついているので初心者にはありがたいかと思います。 Free Frontend By using freefrontend.com you accept our cookies and agree to our priv

Storybook を Vue.js で使っていきたいので、必要な箇所を翻訳します。 Introduction Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively. Storybook は UI Component のための開発環境です。これによって様々な状態の UI Component を視覚化し、インタラクティブな開発を可能にします。 Storybook runs outside of your app. So you can develop UI components in isolation without wo

参考サイト: http://www.atmarkit.co.jp/ait/articles/1311/18/news017.html gitのブランチ管理ツール。 それぞれの役割を持った、以下の5つのブランチで管理する。 develop: 開発用 feature: 機能実装、バグフィックス用 release: リリース準備用 master: リリースしたソースコード用 hotfix: 緊急のバグフィックス用 インストール 参考サイト: http://www.atmarkit.co.jp/ait/articles/1311/28/news042.html homebrewなら以下の通り。 ※その他の場合: https://github.com/nvie/gitflow/wiki/Mac-OS-X Source Tree などgit-flowに対応したGUIを使う方法もある。 git-flow

Monologを使ってSlackへ通知したい 現在運用しているサービスの通知を全て Slack で受け取りたい ここから全ては始まった。＼(^o^)／ﾊｼﾞﾏﾀ LaravelではMonologを使っている 現在のサービスではフレームワークにLaravelを使用しています。 ログはMonologを使っている。 よくよく調べてみると、、、おっ簡単に出来そうやん！！ よっしゃ、いっっちょやってみっか！ ということでやってみるで。 Monologのドキュメントを眺める ふむふむ φ(ﾟДﾟ )ﾌﾑﾌﾑ… Monolog-Github あった！ Handlers, Formatters and Processors コレの中の SlackHandler これやん！ SlackHandler使ってみるで まずはSlackの設定を作るやで Laravelのconfigに設定を作るやで config/s

はじめに Rubyをあまりさわったことない初心者向けの内容です。 細かいところは置いておいて、とりあえずRSpecでテスト書く→コード実装のような、超シンプルなチュートリアルをまとめてみました。 RSpecはポピュラーなテストフレームワーク https://github.com/rspec/rspec DSLとかでフォーマットされてて、自然言語（英語）っぽくテストが書ける David Chelimsky氏のブログでもチュートリアルがある（※2007年のエントリ） an introduction to RSpec - Part I 本ならThe RSpec Bookもあるよ！！4,410円。 下準備 install

composerについて勉強したのでまとめておく。 composer.jsonファイルに設定を記述していく形式らしい。 依存パッケージの指定

はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。 似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()

<label><input type="radio" name="area" value="0" checked>関東</label> <label><input type="radio" name="area" value="1">関西</label>

はじめに 最近 jQuery はじめたけど、セレクタ自由に使えないと捗らないのでまとめておく。 注意点 以下に出てくるセレクタ特殊文字（'.', ',', ':', '#', '[', ']'）はエスケープが必要 基本セレクタ タグ名 or クラス名 or ID による指定ができる。 $("form"); // タグ名="form" $(".className"); // クラス名="className" $("#formId"); // ID="formId"

D3.jsのd3.format便利ですよね。良く使う桁数の指定やゼロ埋めが少し分かりづらかったのでQiitaにまとめます。 d3.format("01d")(1); // 1 d3.format("02d")(1); // 01 d3.format("03d")(1); // 001 d3.format(".0d")(100); // 100 d3.format(".1d")(100); // 100 d3.format(".2d")(100); // 100 d3.format(".0f")(100); // 100 d3.format(".1f")(100); // 100.0 d3.format(".2f")(100); // 100.00 d3.format(".0%")(1); // 100% d3.format(".1%")(1); // 100.0% d3.format(".

はじめに このガイドでは、はじめて Zsh を使う人や Zsh の便利な使い方を知らない人に向けて、いくつかの便利な設定と操作方法を紹介します。また、 Zsh についての疑問を素早く解決できるよう、マニュアルの調べ方や他のドキュメントへのリンクも盛り込んであります。 このガイドでカバーしきれていない設定や分かりやすいドキュメントをご存知でしたら、ぜひ編集リクエストやコメントでお知らせください。 設定ファイル ここでは主に普段のキー入力数を大幅に減らせるような設定を紹介します。 .zshrc ~/.zshrc は Zsh のインタラクティブシェル（ユーザーがコマンドを入力する画面）が起動した際に読み込まれる設定ファイルです。 Zsh スクリプトを実行したり、 zsh -c 'command...' でコマンドを実行したりしたときには読み込まれません。このファイルには主に Zsh の操作に関す

glideってなんぞ？ glideはGo1.5以降で使用可能なvendoring機能を利用した。 パッケージ管理ツールです。 （正確にはvendor管理） glideを使うと下記のようにvendorにプロジェクトに必要なパッケージがインストールされ、そのプロジェクト内でのみ利用が可能となります。 (通常のgo get, go installのようにグローバル管理ではない) - $GOPATH/src/myProject (プロジェクトのディレクトリ) | |-- glide.yaml | |-- main.go | |-- mySubpackage (サブパッケージ) | | | |-- foo.go | |-- vendor (この配下がglideで作成されるもの) |-- github.com | |-- Masterminds | |-- ... etc. 使いはじめた理由 実は、使

Railsのアプリケーションで MySQL を利用しよう(実稼働環境では AWS の RDS を使いたいので)と思い、まずは MacBook Pro に MySQL をインストールしてみたので手順をメモ。 前提 ローカルの環境(Mac)に MySQL をインストールします。 今回の OS X のバージョンは OS X 10.9.4 (Mavericks) です。 Homebrew でインストールします。 Homebrew自体が入ってなければ、Homebrewの公式ページどおり、次のようにインストール $ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

NOT NULL制約 チェック制約 一意性制約（UNIQUE KEY) 主キー制約 (PRIMARY KEY) 参照整合性制約、外部キー制約 (FOREIGN KEY) NOT NULL NULL値を禁止 CREATE TABLE product ( product_id INT PRIMARY KEY , product_name VARCHAR(16) UNIQUE NOT NULL , price INT ) ; CREATE TABLE user ( user_id INT PRIMARY KEY , age INT , city_code CHAR(4) , gender CHAR(1), CONSTRAINT agecity_check CHECK(age >= 18 OR city_code = '0003'), CONSTRAINT gendercheck CHECK(ge

Golang + MySQLで何かapiを作ろうと思って調べたら、たくさん情報が出てきたのでまとめてみる 基本設計 基本的な流れはこれに従う。 Golang+Echo+dbrでMySQLのCRUDをする／JSONでDBの値を返却する話 Echoの使い方は、以下を参照。 Go製のフレームワークechoを使ってJSONを返すWebサーバーを作り、GoogleAppEngineで動かす Go の echo ってWebサーバーでサクッと REST しちゃう Echo公式サイト Fast and unfancy HTTP server framework for Go (Golang). (気になったのでメモ。Echo公式サイトでは、carbon adsという、ヒートマップを計測するサービスを使っているらしい) Golangの構造体で 「｀」の記法について気になったので調べた What are th