2018-02-22

プログラミングの入門がむずかしい理由・できるだけ簡単に学ぶ方法

プログラミング

f:id:yoneapp:20180222112941j:plain

前々からプログラミングは教わるのが難しいジャンルなんじゃないかなと思っていました。ちょっと考えを整理して、対応策なども考えたので記事にしてみました。

まず極論ですが、だいたいのプロトタイプぐらいの製品は、ネットで検索すれば作れると思われます。私もすごい色々かけるプログラマではありませんが、多少調べればなんとなく作れます。

なので、基本的に教わることなど存在せず、ネットで調べたら作れるので、この能力のことをプログラミングが出来ると言い換えてみます。

この能力は作りたい物の作り方が瞬時にわかる・検索できる能力です。

これを学習するというのが難しいのだと思います。作り方を説明してはいけないし、何と検索すればいいか説明しても意味がないのです。思いつく能力なので、直接教わる方法がないし、教える方法がないんじゃないかなと。

ここでの一つの解決策は、手元にある瞬時にわかる・検索できることだけで作りたい物を作るトレーニングを行うことです。作り方や検索の方法を直接は教わらないようにします。

なので、おすすめは

学習を行って瞬時にわかる・検索できるものを少し増やす
学んだ内容で作りたい物を作る

この2セットを繰り返すことです。

まず、最初は瞬時にわかる・検索できるものが存在しませんから、適当に学習します。

次に、瞬時にわかる・検索できるものだけを使って、何かを作ります。これを繰り返します。

ポイントは、作りたい物を最小限にして、必ず公開する事です。完成させて公開しましょう。公開した瞬間のみレベルが上がると思いましょう。

公開のためには、あらゆる手段を使いましょう。作りたい物の機能を削ったり、作りたいものを極限まで少なくしてOKです。安全に公開するために、間違ってたら迷惑のかかりそうな制作物は控えたほうがいいでしょう。

1に関して、いくつかソリューションがあったので紹介します。

スクール

WEBスクール

WEBサービス

私はコンピュータ系の大学に行ったので、基礎はそこで学びました。講座系は値段は、まあまあしますが大学に行っちゃうよりコスパがいいと思われます（大学の学費って300万以上はかかってるだろうし...）

学校の勉強と同じで、授業が好きだったり個別指導が好きだったり、独学が好きだったりで人次第だと思うので、肌似合いそうなやつを選んでくださいませ。

2に関しては、特にソリューションは思いつきませんが、興味があればコーチングは出来るので是非SNSで相談してください🙇

2017-12-06

preact-cliにてtemplate.htmlをカスタマイズするに当たりhtmlWebpackPlugin.options.ssrより前にsprictを書くとDOMの書き換えが一部動作しない事例

プログラミング

駄目

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>

良い

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>

2017-12-04

Firebase Storage User Base Security DocumentのRE2構文ミス

プログラミング

ユーザーデータを保護する | Firebase において

match /public/{imageId} {
  allow read: if resource.size < 100 * 1024;
  allow write: if imageId.matches(".*\.txt");
}

というサンプルがあるがエラーになる。

f:id:yoneapp:20171204180544p:plain

Google RE2の正規表現で「?（ハテナ）」「.」などをエスケープする方法【Data Studio】 - アズメディア｜広告とメディアを考える（@_danboooo_ ）を参考に

match /public/{imageId} {
  allow read: if resource.size < 100 * 1024;
  allow write: if imageId.matches(".*\\.txt");
}

と修正すると良さそう。

なお Syntax · google/re2 Wiki · GitHub にSyntaxの説明がある。

2017-12-01

typescriptでscriptタグを使いcdnから読み込んだ場合に型付でコードを書く方法がわからない

プログラミング

例えば、こういう風にScriptを読み込むと、他のサイトのロードで読み込みが終わってる可能性があるから有利（なはず）

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>

とするとtypescript + webpackを使った時に、cdn読み込みファイルは含めないのが嬉しい。この場合に、どのように記述すればいいのだろう。

形無しで良ければ、このようにdeclareで宣言すれば良さそうでした。

declare var firebase: any

せっかくfirebaseがtypescript定義ファイルd.tsを用意してくれてるので使いたいのです。もしご存じの方が居たら教えて頂けるとうれしいです🙇

自己解決メモ

これは、TypeScriptの対応範囲で無いのかもしれない。 TypeScript上は通常の読み込みを行い、CDNを使うことを読み込みの依存関係と考えて、externalsを使ってfirebaseを無視するのが良さそう。

webpackのビルド高速化の効果を測ってみた - Qiita

2017-11-26

preact-cliでCSS Modulesを任意フォルダで使用する

プログラミング

preact-cli は webpack をラッピングしています。

preact.config.js を作成する事によりカスタマイズが可能です。
https://github.com/developit/preact-cli/wiki/Config-Recipes

また preact-cli のCSS規則で components と routes 以下のファイルは <div class={style.header}>hoge</div> のような記法が使用できるCSS Modulesで
それ以外は import 'sanitize.css' のようにCSSが読み込めるようになっています。

詳しくはコードをご確認ください。
https://github.com/developit/preact-cli/blob/1e54b822b561206ce8ea1121f4ac1877cf4e23f3/src/lib/webpack/webpack-base-config.js

そこで components と routes 以外のフォルダでもCSS Modulesで読み込まれるように試してみました。

export default function(config, env, helpers) {  
  const staticLoads = [
    source('sanitize.css'),
    source('style/index.css')
  ];

  const loaderA = config.module.loaders[4];
  const loaderB = config.module.loaders[5];
  
  delete(config.module.loaders[4].include);
  delete(config.module.loaders[5].exclude);

  config.module.loaders[4].exclude = staticLoads;
  config.module.loaders[5].include = staticLoads;
}

このように webpack の設定を上書きする事で components と routes 以外でもCSS Modulesが使えるようになります。

2017-05-02

プログラミング指南メモ

プログラミング

f:id:yoneapp:20170502164157j:plain

久しぶりにプログラミング学習をお手伝いする事になったので、その過程などをメモしていきたいと思います。なお、リモートでお手伝いしています。

まずは、Ruby on Rails 5 超入門をオススメしました。

しかし、環境構築でハマってしまいそうだったので、環境構築をサポートすることにしました。環境構築は初学者には難しいため、学習断念ポイントの山場でもあります。

2016-04-19

Railsで日本語系バリデーション

プログラミング

全角文字制限

全角文字変換サポート

ひらがな toカタカナ

電話ハイフン除去バリデーション

数字のみにフィルタしてから桁数バリデーションでいいかな

JIS水準バリデーション

文字コード系メソッド

実際に文字コード変換してみて、欠けた文字が非対応文字って感じが楽ですかね。

フリーランスプログラマのブログ

iOS & Rails & JavaScript

プログラミングの入門がむずかしい理由・できるだけ簡単に学ぶ方法

スクール

WEBスクール

WEBサービス

preact-cliにてtemplate.htmlをカスタマイズするに当たりhtmlWebpackPlugin.options.ssrより前にsprictを書くとDOMの書き換えが一部動作しない事例

Firebase Storage User Base Security DocumentのRE2構文ミス

typescriptでscriptタグを使いcdnから読み込んだ場合に型付でコードを書く方法がわからない

自己解決メモ

preact-cliでCSS Modulesを任意フォルダで使用する

プログラミング指南メモ

Railsで日本語系バリデーション

全角文字制限

全角文字変換サポート

ひらがな toカタカナ

電話ハイフン除去バリデーション

JIS水準バリデーション

文字コード系メソッド